@datagouv/components-next 1.3.0 → 1.4.0

package/src/components/ObjectCardOwner.vue

@@ -4,6 +4,7 @@
     class="-mr-0.5 flex-initial truncate"
   >
     <AppLink
+      v-if="organizationUrl !== null"
       class="link text-sm overflow-hidden flex items-center relative z-[2] truncate"
       :to="organizationUrl || organization.page"
     >
@@ -12,6 +13,16 @@
         size="sm"
       />
     </AppLink>
+    <span
+      v-else
+      class="text-sm overflow-hidden flex items-center truncate"
+    >
+      <OrganizationNameWithCertificate
+        :organization
+        size="sm"
+        color-class="text-gray-title"
+      />
+    </span>
   </div>
   <div
     v-else-if="ownerName"
@@ -33,7 +44,8 @@ import OrganizationNameWithCertificate from './OrganizationNameWithCertificate.v
 const props = defineProps<{
   organization?: OrganizationReference | null
   owner?: UserReference | null
-  organizationUrl?: RouteLocationRaw
+  // undefined falls back to organization.page; pass null to render plain, non-linked text
+  organizationUrl?: RouteLocationRaw | null
 }>()
 
 const ownerName = computed(() => {

package/src/components/Pagination.vue

@@ -19,7 +19,7 @@
       </li>
       <li>
         <a
-          :href="getHref(page - 1)"
+          :href="getHref(currentPage - 1)"
           class="fr-pagination__link fr-pagination__link--prev fr-pagination__link--lg-label"
           data-testid="previous-page"
           @click.prevent.stop="previousPage"
@@ -29,10 +29,10 @@
       </li>
       <li>
         <a
-          :aria-current="page === 1 ? 'page' : undefined"
+          :aria-current="currentPage === 1 ? 'page' : undefined"
           :href="getHref(1)"
           class="fr-pagination__link"
-          :class="{ 'fr-hidden fr-unhidden-sm': page > 1 }"
+          :class="{ 'fr-hidden fr-unhidden-sm': currentPage > 1 }"
           :title="t('Page {nb}', { nb: 1 })"
           :data-testid="1"
           @click.prevent.stop="onClick(1)"
@@ -47,8 +47,8 @@
         <a
           v-if="index"
           class="fr-pagination__link"
-          :class="{ 'fr-hidden fr-unhidden-lg': index < page - 1 || index > page + 1 }"
-          :aria-current="page === index ? 'page' : undefined"
+          :class="{ 'fr-hidden fr-unhidden-lg': index < currentPage - 1 || index > currentPage + 1 }"
+          :aria-current="currentPage === index ? 'page' : undefined"
           :href="getHref(index)"
           :title="t('Page {nb}', { nb: index })"
           :data-testid="index"
@@ -66,7 +66,7 @@
       <li>
         <a
           class="fr-pagination__link"
-          :aria-current="page === pageCount ? 'page' : undefined"
+          :aria-current="currentPage === pageCount ? 'page' : undefined"
           :href="getHref(pageCount)"
           :title="t('Page {nb}', { nb: pageCount })"
           :data-testid="pageCount"
@@ -78,7 +78,7 @@
       <li>
         <a
           class="fr-pagination__link fr-pagination__link--next fr-pagination__link--lg-label"
-          :href="getHref(page + 1)"
+          :href="getHref(currentPage + 1)"
           data-testid="next-page"
           @click.prevent.stop="nextPage"
         >
@@ -103,6 +103,8 @@
 import { computed, useTemplateRef } from 'vue'
 import { useRoute } from 'vue-router'
 import { useTranslation } from '../composables/useTranslation'
+import { clampPage, getVisiblePages } from '../functions/paginate'
+import { scrollToBlockTop } from '../functions/scroll'
 
 type Props = {
   /**
@@ -128,78 +130,36 @@ const props = withDefaults(defineProps<Props>(), {
   pageSize: 20,
 })
 
-const PAGES_AROUND = 3
-
-function range(size: number, startAt = 1) {
-  return [...Array(size).keys()].map(i => i + startAt)
-}
-
-function getPages(pageCount: number) {
-  return range(pageCount)
-}
-
-function getPagesShown(pages: { length: number }, currentPage: number) {
-  return Math.min(
-    PAGES_AROUND * 2 + 1,
-    pages.length - 2,
-    PAGES_AROUND + currentPage - 1,
-    PAGES_AROUND + pages.length - currentPage,
-  )
-}
-
-function getStartPage(currentPage: number) {
-  return Math.max(
-    currentPage - PAGES_AROUND, // we want to start 3 pages before the current one
-    2, // we don't want to start below page 2
-  )
-}
-
-function getVisiblePages(currentPage: number, pageCount: number) {
-  const pages = getPages(pageCount)
-  const start = getStartPage(currentPage)
-  if (pageCount <= 2) {
-    return []
-  }
-  const pagination: Array<number | null> = range(getPagesShown(pages, currentPage), start)
-  if (!pagination.includes(2)) {
-    pagination.unshift(null)
-  }
-  if (!pagination.includes(pageCount - 1)) {
-    pagination.push(null)
-  }
-  return pagination
-}
-
 const { t } = useTranslation()
 const route = useRoute()
 const pageCount = computed(() => Math.ceil(props.totalResults / props.pageSize))
-const visiblePages = computed(() => getVisiblePages(props.page, pageCount.value))
+// The `page` prop often comes straight from a query string, so it is normalised
+// once here and every link below builds on an existing page.
+const currentPage = computed(() => clampPage(props.page, pageCount.value))
+const visiblePages = computed(() => getVisiblePages(currentPage.value, pageCount.value))
 
 const nav = useTemplateRef('navRef')
 function change(index: number) {
   emit('change', index)
 
-  if (!nav.value || !nav.value.parentElement) return
-
-  nav.value.parentElement.style.scrollMarginTop = '100px'
-  nav.value.parentElement.scrollIntoView({ behavior: 'smooth', block: 'start' })
+  scrollToBlockTop(nav.value?.parentElement)
 }
 
 function onClick(index: number) {
-  if (index !== props.page) {
+  if (index !== currentPage.value) {
     change(index)
   }
 }
 
 function nextPage() {
-  const index = props.page + 1
+  const index = currentPage.value + 1
   if (index <= pageCount.value) {
     change(index)
   }
 }
 
 function previousPage() {
-  const index = props.page - 1
+  const index = currentPage.value - 1
   if (index > 0) {
     change(index)
   }
@@ -209,7 +169,7 @@ function getHref(forPage: number) {
   if (forPage < 1 || forPage > pageCount.value) {
     return undefined
   }
-  if (props.page === forPage) {
+  if (currentPage.value === forPage) {
     return undefined
   }
   const search = new URLSearchParams(route.query as Record<string, string>)

package/src/components/Placeholder.vue

@@ -10,10 +10,10 @@
 
 <script setup lang="ts">
 import { computed } from 'vue'
-import { RiBookShelfLine, RiBuilding2Line, RiDatabase2Line, RiLineChartLine, RiTerminalLine } from '@remixicon/vue'
+import { RiBarChartBoxLine, RiBookShelfLine, RiBuilding2Line, RiDatabase2Line, RiLineChartLine, RiTerminalLine } from '@remixicon/vue'
 
 const props = defineProps<{
-  type: 'Dataset' | 'Dataservice' | 'Reuse' | 'Organization' | 'Topic'
+  type: 'Dataset' | 'Dataservice' | 'Reuse' | 'Organization' | 'Topic' | 'Chart'
 }>()
 
 const icon = computed(() => {
@@ -23,6 +23,7 @@ const icon = computed(() => {
     Reuse: RiLineChartLine,
     Organization: RiBuilding2Line,
     Topic: RiBookShelfLine,
+    Chart: RiBarChartBoxLine,
   }[props.type]
 })
 </script>

package/src/components/PostCard.vue

@@ -23,12 +23,20 @@
 
     <ObjectCardShortDescription :text="post.headline || post.content" />
 
-    <div
+    <TranslationT
       v-if="post.published || post.created_at"
+      tag="div"
       class="text-sm text-gray-medium mt-1"
+      keypath="Publié {date}"
     >
-      {{ t('Publié {date}', { date: formatDate(post.published || post.created_at) }) }}
-    </div>
+      <template #date>
+        <FormattedDate
+          :date="post.published || post.created_at"
+          format="relative"
+          :options="{ dateStyle: 'long', timeStyle: 'short' }"
+        />
+      </template>
+    </TranslationT>
 
     <slot />
   </ObjectCard>
@@ -37,26 +45,16 @@
 <script setup lang="ts">
 import { RiArticleLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
-import { useFormatDate } from '../functions/dates'
-import { useTranslation } from '../composables/useTranslation'
 import type { Post } from '../types/posts'
 import Placeholder from './Placeholder.vue'
 import ObjectCard from './ObjectCard.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
+import FormattedDate from './FormattedDate.vue'
+import TranslationT from './TranslationT.vue'
 
 defineProps<{
   post: Post
   postUrl?: RouteLocationRaw
 }>()
-
-const { t } = useTranslation()
-const { formatRelativeIfRecentDate } = useFormatDate()
-
-const formatDate = (dateString: string) => {
-  return formatRelativeIfRecentDate(dateString, {
-    dateStyle: 'long',
-    timeStyle: 'short',
-  })
-}
 </script>

package/src/components/ResourceAccordion/Datafair.client.vue

@@ -10,7 +10,7 @@
       />
     </div>
     <PreviewUnavailable v-else>
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le depuis l'onglet Téléchargements.") }}
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le pour le consulter.") }}
     </PreviewUnavailable>
   </div>
 </template>

package/src/components/ResourceAccordion/Downloads.vue

@@ -47,9 +47,21 @@
       />
     </dd>
     <template v-if="generatedFormats.length">
-      <dt class="font-bold fr-text--sm fr-mb-0">
-        {{ t('Formats générés automatiquement par {platform} (dernière mise à jour {date})', { platform: config.name, date: conversionsLastUpdate }) }}
-      </dt>
+      <TranslationT
+        tag="dt"
+        class="font-bold fr-text--sm fr-mb-0"
+        keypath="Formats générés automatiquement par {platform} (dernière mise à jour {date})"
+      >
+        <template #platform>
+          {{ config.name }}
+        </template>
+        <template #date>
+          <FormattedDate
+            :date="conversionsFinishedAt"
+            format="relative"
+          />
+        </template>
+      </TranslationT>
       <dd
         v-for="generatedFormat in generatedFormats"
         :key="generatedFormat.format"
@@ -132,7 +144,8 @@ import { filesize } from '../../functions/helpers'
 import { getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
+import TranslationT from '../TranslationT.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useResourceCapabilities } from '../../composables/useResourceCapabilities'
 import type { Resource } from '../../types/resources'
@@ -145,7 +158,6 @@ const props = defineProps<{
 
 const { t } = useTranslation()
 const config = useComponentsConfig()
-const { formatRelativeIfRecentDate } = useFormatDate()
 
 const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabilities(
   () => props.resource,
@@ -154,7 +166,7 @@ const { generatedFormats, wfsFormats, defaultWfsProjection } = useResourceCapabi
 
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 
-const conversionsLastUpdate = computed(() =>
-  formatRelativeIfRecentDate(props.resource.extras['analysis:parsing:finished_at'] as string | undefined),
+const conversionsFinishedAt = computed(() =>
+  props.resource.extras['analysis:parsing:finished_at'] as string | undefined,
 )
 </script>

package/src/components/ResourceAccordion/ImagePreview.client.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="text-xs">
+    <PreviewUnavailable v-if="!isSizeAllowed">
+      {{ fileSizeBytes
+        ? t("Le fichier {fileType} est trop volumineux pour être prévisualisé. Téléchargez-le pour le consulter.", { fileType })
+        : t("La taille du fichier est inconnue, l'aperçu n'est pas disponible. Téléchargez-le pour le consulter.")
+      }}
+    </PreviewUnavailable>
+    <PreviewUnavailable v-else-if="hasError">
+      {{ t("L'aperçu de ce fichier n'a pas pu être chargé. Téléchargez-le pour le consulter.") }}
+    </PreviewUnavailable>
+    <img
+      v-else
+      :src="resource.url"
+      alt=""
+      class="block w-full h-auto max-w-[800px]"
+      @error="hasError = true"
+    >
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import PreviewUnavailable from './PreviewUnavailable.vue'
+import type { Resource } from '../../types/resources'
+import { getResourceFilesize } from '../../functions/resources'
+import { useTranslation } from '../../composables/useTranslation'
+import { useComponentsConfig } from '../../config'
+
+const props = defineProps<{
+  resource: Resource
+}>()
+
+const { t } = useTranslation()
+const config = useComponentsConfig()
+
+const hasError = ref(false)
+
+const fileType = computed(() => props.resource.format?.toUpperCase() ?? t('Fichier'))
+const fileSizeBytes = computed(() => getResourceFilesize(props.resource))
+
+const isSizeAllowed = computed(() => {
+  const size = fileSizeBytes.value
+  const max = config.maxImagePreviewByteSize
+  if (!size || !max) return false
+  return size <= max
+})
+</script>

package/src/components/ResourceAccordion/MapContainer.client.vue

@@ -4,8 +4,8 @@
   </PreviewUnavailable>
   <div
     v-else
-    id="map"
     ref="mapRef"
+    class="size-full"
   />
 </template>
 
@@ -128,10 +128,3 @@ onMounted(() => {
   displayMap()
 })
 </script>
-
-<style>
-  #map {
-    width: 100%;
-    height: 500px;
-  }
-</style>

package/src/components/ResourceAccordion/Metadata.vue

@@ -1,12 +1,14 @@
 <script setup lang="ts">
 import { computed } from 'vue'
+import { RiInformationLine } from '@remixicon/vue'
 import type { Resource } from '../../types/resources'
 import CopyButton from '../CopyButton.vue'
 import DescriptionDetails from '../DescriptionDetails.vue'
 import DescriptionTerm from '../DescriptionTerm.vue'
-import { useFormatDate } from '../../functions/dates'
+import FormattedDate from '../FormattedDate.vue'
 import { filesize } from '../../functions/helpers'
 import ExtraAccordion from '../ExtraAccordion.vue'
+import Toggletip from '../Toggletip.vue'
 import { getResourceTitleId, getResourceLabel, getResourceFilesize } from '../../functions/resources'
 import { useTranslation } from '../../composables/useTranslation'
 
@@ -19,7 +21,6 @@ const resourceTitleId = computed(() => getResourceTitleId(props.resource))
 const resourceFilesize = computed(() => getResourceFilesize(props.resource))
 
 const { t } = useTranslation()
-const { formatDate } = useFormatDate()
 </script>
 
 <template>
@@ -42,8 +43,23 @@ const { formatDate } = useFormatDate()
             </a>
           </code>
         </DescriptionDetails>
-        <DescriptionTerm>
+        <DescriptionTerm class="flex items-center">
           {{ t('URL stable') }}
+          <Toggletip
+            :styled-button="false"
+            button-class="ml-1 border-transparent -outline-offset-2 inline-flex items-center justify-center rounded-sm p-1 text-gray-medium hover:bg-gray-lower transition-colors"
+          >
+            <RiInformationLine
+              class="size-4"
+              aria-hidden="true"
+            />
+            <span class="sr-only">{{ t(`Qu'est-ce qu'une URL stable ?`) }}</span>
+            <template #toggletip>
+              <p class="fr-text--sm m-0">
+                {{ t(`Cette URL redirige toujours vers la dernière version du fichier. L'URL du fichier, elle, change à chaque mise à jour : privilégiez l'URL stable pour partager la ressource ou l'utiliser dans un script.`) }}
+              </p>
+            </template>
+          </Toggletip>
           <CopyButton
             :label="t(`Copier l'URL stable`)"
             :copied-label="t('URL stable copiée !')"
@@ -94,11 +110,11 @@ const { formatDate } = useFormatDate()
       >
         <DescriptionTerm>{{ t('Créée le') }}</DescriptionTerm>
         <DescriptionDetails>
-          {{ formatDate(resource.created_at) }}
+          <FormattedDate :date="resource.created_at" />
         </DescriptionDetails>
         <DescriptionTerm>{{ t('Modifiée le') }}</DescriptionTerm>
         <DescriptionDetails>
-          {{ formatDate(resource.last_modified) }}
+          <FormattedDate :date="resource.last_modified" />
         </DescriptionDetails>
       </dl>
       <dl

package/src/components/ResourceAccordion/PdfPreview.client.vue

@@ -1,23 +1,44 @@
 <template>
   <PreviewWrapper
-    v-slot="{ data }"
     file-type="PDF"
     :resource="resource"
     :max-size="config.maxPdfPreviewByteSize"
     :load="load"
+    :fill="fill"
     @loaded="renderAllPages"
   >
-    <div
-      ref="containerRef"
-      class="w-full overflow-y-auto max-h-[80vh] space-y-3"
-    >
-      <canvas
-        v-for="page in (data as PDFDocumentProxy).numPages"
-        :key="page"
-        :ref="(el) => setCanvasRef(el as HTMLCanvasElement, page)"
-        class="w-full"
-      />
-    </div>
+    <!-- While pdfjs downloads/parses the document, show the A4 skeleton instead of a
+         bare "loading" line — it matches the reader framing below seamlessly. -->
+    <template #loading>
+      <PdfSkeleton :fill="fill" />
+    </template>
+
+    <!-- Cap the page width (A4 never needs more) and center on a light backdrop so
+         it reads like a document reader. The width cap applies in both modes since
+         the render width follows the container; `fill` only drives the height
+         (fullscreen fills down, inline stays capped). The scroll container is a plain
+         block (not a flex) so the trailing `pb` is reliably scrollable — flex + overflow
+         drops the end padding of flex items. -->
+    <template #default="{ data }">
+      <div
+        class="overflow-y-auto bg-gray-100"
+        :class="fill ? 'min-h-0 flex-1' : 'max-h-[80vh]'"
+      >
+        <div class="flex justify-center p-4 pb-16">
+          <div
+            ref="containerRef"
+            class="w-[800px] max-w-full space-y-3"
+          >
+            <canvas
+              v-for="page in (data as PDFDocumentProxy).numPages"
+              :key="page"
+              :ref="(el) => setCanvasRef(el as HTMLCanvasElement, page)"
+              class="w-full bg-white shadow-sm"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
   </PreviewWrapper>
 </template>
 
@@ -27,6 +48,7 @@ import * as pdfjsLib from 'pdfjs-dist'
 import pdfjsWorker from 'pdfjs-dist/build/pdf.worker.min.mjs?url'
 import type { PDFDocumentProxy } from 'pdfjs-dist'
 import PreviewWrapper from './PreviewWrapper.vue'
+import PdfSkeleton from './PdfSkeleton.vue'
 import { useComponentsConfig } from '../../config'
 import type { Resource } from '../../types/resources'
 
@@ -34,6 +56,8 @@ pdfjsLib.GlobalWorkerOptions.workerSrc = pdfjsWorker
 
 const props = defineProps<{
   resource: Resource
+  // Fill the available height (fullscreen) instead of the default capped height.
+  fill?: boolean
 }>()
 
 const config = useComponentsConfig()

package/src/components/ResourceAccordion/PdfSkeleton.vue

@@ -0,0 +1,44 @@
+<template>
+  <!-- An A4 sheet on the reader backdrop with a few pulsing text lines, matching the
+       real PdfPreview framing (centered, capped ~800px, gray backdrop). -->
+  <div
+    class="overflow-hidden bg-gray-100"
+    :class="fill ? 'min-h-0 flex-1' : 'max-h-[80vh]'"
+    role="status"
+    :aria-label="t('Chargement de l\'aperçu…')"
+  >
+    <div class="flex justify-center p-4">
+      <div class="aspect-[210/297] w-[800px] max-w-full bg-white p-10 shadow-sm">
+        <div class="animate-pulse-placeholder space-y-6">
+          <div class="space-y-3">
+            <div class="h-5 w-1/2 rounded bg-gray-200" />
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-5/6 rounded bg-gray-200" />
+          </div>
+          <div class="space-y-3">
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-11/12 rounded bg-gray-200" />
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-3/4 rounded bg-gray-200" />
+          </div>
+          <div class="space-y-3">
+            <div class="h-3 w-full rounded bg-gray-200" />
+            <div class="h-3 w-5/6 rounded bg-gray-200" />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useTranslation } from '../../composables/useTranslation'
+
+defineProps<{
+  // Fill the available height (fullscreen) instead of the default capped height.
+  fill?: boolean
+}>()
+
+const { t } = useTranslation()
+</script>

package/src/components/ResourceAccordion/Pmtiles.client.vue

@@ -1,15 +1,15 @@
 <template>
-  <div>
+  <div class="flex h-full flex-col">
     <PreviewUnavailable v-if="hasError">
       {{ t("L'aperçu cartographique de ce fichier n'a pas pu être chargé.") }}
     </PreviewUnavailable>
     <div
       v-else
-      class="-mx-4"
+      class="flex min-h-0 flex-1 flex-col"
     >
       <div
         v-if="pmtilesViewerUrl"
-        class="bg-blue-100 text-datagouv fr-hidden fr-unhidden-md p-4"
+        class="bg-blue-100 text-datagouv fr-hidden fr-unhidden-md p-4 shrink-0"
       >
         <div class="fr-grid-row fr-grid-row--middle fr-grid-row--gutters">
           <div
@@ -35,12 +35,17 @@
           </p>
         </div>
       </div>
-      <div
-        ref="containerRef"
-        style="height: 600px;"
-      />
-      <div class="fr-px-5v fr-pt-5v">
-        {{ t("Aperçu de la carte mis à jour le {date}", { date: lastUpdate }) }}
+      <div class="relative min-h-0 flex-1">
+        <div
+          ref="containerRef"
+          class="size-full"
+        />
+        <!-- Freshness caption overlaid inside the map (bottom-left, the corner left
+             free by the navigation/geolocate controls top-right and the attribution
+             bottom-right) so the map itself can use the whole height. -->
+        <div class="pointer-events-none absolute bottom-2 left-2 z-10 rounded bg-white/90 px-2 py-1 text-[12px] leading-4 text-gray-medium shadow-sm">
+          {{ t("Aperçu de la carte mis à jour le {date}", { date: lastUpdate }) }}
+        </div>
       </div>
     </div>
   </div>
@@ -62,7 +67,7 @@ import styleVector from '../../../assets/json/vector.json'
 import PreviewUnavailable from './PreviewUnavailable.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import franceSvg from './france.svg?raw'
-import { getOwnerName, getOwnerPage } from '../../functions/owned'
+import { getMapAttribution } from '../../functions/owned'
 
 const props = defineProps<{ resource: Resource, dataset: Dataset | DatasetV2 }>()
 
@@ -89,11 +94,7 @@ const lastUpdate = computed(() => {
 
 const container = useTemplateRef('containerRef')
 
-const attributions = computed(() => {
-  if (!props.dataset.organization && !props.dataset.owner)
-    return ''
-  return `© <a href="${getOwnerPage(props.dataset)}" target="_blank">${getOwnerName(props.dataset)}</a>`
-})
+const attributions = computed(() => getMapAttribution(props.dataset))
 
 async function displayMap() {
   await import('maplibre-gl/dist/maplibre-gl.css')
@@ -104,14 +105,22 @@ async function displayMap() {
   const p = new PMTiles(pmtilesUrl.value)
   protocol.add(p)
 
-  p.getHeader().then((h: { maxZoom: number, centerLon: number, centerLat: number }) => {
+  p.getHeader().then((h: { minLon: number, minLat: number, maxLon: number, maxLat: number, centerZoom: number, centerLon: number, centerLat: number }) => {
+    // Frame the data's bounding box (carried by the archive header) so we land on
+    // the data. Fall back to the header center when the bbox is degenerate — an
+    // archive with a single feature, or bounds left unset (all zeroes).
+    const hasBounds = h.minLon < h.maxLon && h.minLat < h.maxLat
     const map = new maplibregl.Map({
       container: container.value!,
       // JSON import is inferred too loosely (e.g. center as number[]) to match
       // maplibre's strict StyleSpecification, so cast through unknown.
       style: styleVector as unknown as maplibregl.StyleSpecification,
-      zoom: h.maxZoom - 2,
-      center: [h.centerLon, h.centerLat],
+      ...(hasBounds
+        ? {
+            bounds: [[h.minLon, h.minLat], [h.maxLon, h.maxLat]] as [[number, number], [number, number]],
+            fitBoundsOptions: { padding: 24 },
+          }
+        : { center: [h.centerLon, h.centerLat] as [number, number], zoom: h.centerZoom }),
     })
     map.addControl(new maplibregl.NavigationControl())
     map.addControl(