@datagouv/components-next 1.0.2-dev.161 → 1.0.2-dev.162

package/dist/{vue3-xml-viewer.common-H2czi46-.js → vue3-xml-viewer.common-Cpui-Yi9.js}

@@ -1,4 +1,4 @@
-import { g as Ke } from "./main-Cmq8fQdM.js";
+import { g as Ke } from "./main-BU6kP4dE.js";
 import We from "vue";
 function Fe($, K) {
   for (var V = 0; V < K.length; V++) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datagouv/components-next",
-  "version": "1.0.2-dev.161",
+  "version": "1.0.2-dev.162",
   "private": false,
   "type": "module",
   "engines": {
@@ -23,7 +23,7 @@
     "src"
   ],
   "dependencies": {
-    "@floating-ui/vue": "^2.0.1",
+    "@floating-ui/vue": "^1.1.11",
     "@headlessui/vue": "^1.7.23",
     "@remixicon/vue": "^4.9.0",
     "@types/hast": "^3.0.4",
@@ -31,7 +31,7 @@
     "@vueuse/core": "^14.3.0",
     "@vueuse/router": "^14.3.0",
     "chart.js": "^4.5.1",
-    "dompurify": "^3.4.11",
+    "dompurify": "^3.4.7",
     "echarts": "^6.1.0",
     "geopf-extensions-openlayers": "1.0.0-beta.11",
     "leaflet": "^1.9.4",
@@ -63,6 +63,7 @@
     "yaml": "^2.9.0"
   },
   "devDependencies": {
+    "@intlify/cli": "^0.13.1",
     "@tailwindcss/cli": "^4.3.0",
     "@tailwindcss/typography": "^0.5.19",
     "@tsconfig/node22": "^22.0.5",
@@ -82,7 +83,7 @@
     "typescript": "^5.9.3",
     "vite": "^7.3.3",
     "vite-plugin-vue-devtools": "^8.1.2",
-    "vue": "^3.5.40",
+    "vue": "^3.5.35",
     "vue-router": "^5.0.7",
     "vue-tsc": "^3.3.2"
   },

package/src/components/Chart/ChartViewer.vue

@@ -13,8 +13,7 @@ import { TitleComponent, TooltipComponent, LegendComponent, GridComponent, Datas
 import { init, type ECharts as EChartsType } from 'echarts'
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import { summarize } from '../../functions/helpers'
-import { useFormatDate } from '../../functions/dates'
-import type { Chart, ColumnDefinition, ColumnsDefinition, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
+import type { Chart, XAxis, YAxis, XAxisForm, ChartForApi } from '../../types/visualizations'
 import { useTranslation } from '../../composables/useTranslation'
 
 use([CanvasRenderer, LineChart, BarChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent, DatasetComponent])
@@ -23,26 +22,17 @@ const props = defineProps<{
   chart: Chart | ChartForApi
   series: {
     data: Record<string, Array<Record<string, unknown>>>
-    columns: ColumnsDefinition
+    columns: Record<string, Array<{ name: string, type: string }>>
   }
 }>()
 
 const { locale } = useTranslation()
-const { formatDate } = useFormatDate()
 const chartContainer = ref<HTMLElement | null>(null)
 let echartsInstance: EChartsType | null = null
 
-function capture(): string | null {
-  return echartsInstance?.getDataURL() ?? null
-}
-
-defineExpose({ capture })
-
-// ECharts has a dedicated 'time' axis type for continuous date values.
-function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' | 'time' {
+function mapXAxisType(xAxis: XAxis | XAxisForm): 'category' | 'value' {
   if (!xAxis) return 'category'
-  if (xAxis.type !== 'continuous') return 'category'
-  return isDateAxis.value ? 'time' : 'value'
+  return xAxis.type === 'continuous' ? 'value' : 'category'
 }
 
 function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefined {
@@ -54,77 +44,6 @@ function buildYAxisFormatter(yAxis: YAxis): ((value: number) => string) | undefi
   }
 }
 
-function buildXAxisFormatter(column: ColumnDefinition | null, options?: Intl.DateTimeFormatOptions): ((value: string | number | Date) => string) | undefined {
-  if (column?.type !== 'date') return undefined
-  return (value: string | number | Date) => {
-    if (value === null || value === undefined) return ''
-    const date = value instanceof Date ? value : new Date(value)
-    if (Number.isNaN(date.getTime())) return String(value)
-    return formatDate(date, options ?? { dateStyle: 'short' })
-  }
-}
-
-function parseXValueAsDate(row: Record<string, unknown>, xColumn: string): Record<string, unknown> {
-  const value = row[xColumn]
-  if (value === null || value === undefined || value instanceof Date) return row
-  if (typeof value === 'string') {
-    const date = new Date(value)
-    if (!Number.isNaN(date.getTime())) {
-      return { ...row, [xColumn]: date }
-    }
-  }
-  return row
-}
-
-const xAxisColumn = computed(() => {
-  const columnName = props.chart.x_axis.column_x
-  if (!columnName) return null
-  for (const columns of Object.values(props.series.columns)) {
-    const column = columns.find(c => c.name === columnName)
-    if (column) return column
-  }
-  return null
-})
-
-const isDateAxis = computed(() => xAxisColumn.value?.type === 'date')
-
-const xAxisBounds = computed(() => {
-  const columnName = props.chart.x_axis.column_x
-  if (!columnName) return { min: undefined, max: undefined }
-
-  let min: number | undefined
-  let max: number | undefined
-
-  for (const s of props.chart.series) {
-    const xColumn = s.column_x_name_override ?? columnName
-    const data = props.series.data[s.resource_id]
-    if (!data) continue
-
-    for (const row of data) {
-      const value = row[xColumn]
-      if (value === null || value === undefined) continue
-
-      let numericValue: number | undefined
-      if (value instanceof Date) {
-        numericValue = value.getTime()
-      }
-      else if (isDateAxis.value && typeof value === 'string') {
-        numericValue = new Date(value).getTime()
-      }
-      else {
-        numericValue = Number(value)
-      }
-
-      if (numericValue === undefined || Number.isNaN(numericValue)) continue
-
-      if (min === undefined || numericValue < min) min = numericValue
-      if (max === undefined || numericValue > max) max = numericValue
-    }
-  }
-
-  return { min, max }
-})
-
 const echartsOption = computed(() => {
   const seriesCount = props.chart.series.length
   if (!props.chart.series || seriesCount === 0) return
@@ -139,15 +58,12 @@ const echartsOption = computed(() => {
       return null
     }
 
-    const rawData = props.series.data[resourceId]
-    const sortedData = isDateAxis.value
-      ? rawData.map(row => parseXValueAsDate(row, xColumn))
-      : [...rawData]
-    const sortBy = props.chart.x_axis.sort_x_by ?? (isDateAxis.value ? 'axis_x' : null)
+    const sortedData = [...props.series.data[resourceId]]
+    const sortBy = props.chart.x_axis.sort_x_by
     const sortDirection = props.chart.x_axis.sort_x_direction ?? 'asc'
 
     if (sortBy && sortDirection && props.chart.x_axis.column_x) {
-      const sortKey = sortBy === 'axis_y' ? yColumn : xColumn
+      const sortKey = sortBy === 'axis_x' ? xColumn : yColumn
       sortedData.sort((a, b) => {
         const valA = a[sortKey]
         const valB = b[sortKey]
@@ -220,8 +136,6 @@ const echartsOption = computed(() => {
     seriesData.data.push(curr.data)
   }
 
-  const xAxisType = mapXAxisType(props.chart.x_axis)
-
   return {
     dataset: [...seriesData.data],
     textStyle: {
@@ -232,12 +146,10 @@ const echartsOption = computed(() => {
       trigger: 'axis' as const,
       formatter: (params: Array<{ value: Record<string, unknown>, axisValueLabel: string, seriesName: string }>) => {
         let tooltip = ''
-        const valueFormatter = new Intl.NumberFormat(locale)
-        const xAxisFormatter = buildXAxisFormatter(xAxisColumn.value, { dateStyle: 'medium' })
+        const formatter = new Intl.NumberFormat('fr-FR')
         for (const param of params) {
           const seriesName = param.seriesName
-          const axisLabel = xAxisFormatter ? xAxisFormatter(param.axisValueLabel) : param.axisValueLabel
-          tooltip += `${format.encodeHTML(String(axisLabel))}: <strong>${valueFormatter.format(Number(param.value[seriesName]))}</strong><br>`
+          tooltip += `${format.encodeHTML(param.axisValueLabel)}: <strong>${formatter.format(Number(param.value[seriesName]))}</strong><br>`
         }
         return tooltip
       },
@@ -254,13 +166,8 @@ const echartsOption = computed(() => {
       containLabel: true,
     },
     xAxis: {
-      type: xAxisType,
+      type: mapXAxisType(props.chart.x_axis),
       name: (props.chart.x_axis as XAxis).column_x,
-      min: xAxisType !== 'category' ? xAxisColumn.value?.min ?? xAxisBounds.value.min ?? undefined : undefined,
-      max: xAxisType !== 'category' ? xAxisColumn.value?.max ?? xAxisBounds.value.max ?? undefined : undefined,
-      axisLabel: xAxisType === 'time'
-        ? { formatter: buildXAxisFormatter(xAxisColumn.value) }
-        : undefined,
     },
     yAxis: {
       type: 'value' as const,

package/src/components/Chart/ChartViewerWrapper.vue

@@ -5,7 +5,6 @@
   >
     <template #default="{ data }">
       <ChartViewer
-        ref="chartViewerRef"
         :chart="chart"
         :series="data"
       />
@@ -34,13 +33,6 @@ const props = defineProps<{
 }>()
 
 const { t } = useTranslation()
-const chartViewerRef = ref<InstanceType<typeof ChartViewer> | null>(null)
-
-function capture(): string | null {
-  return chartViewerRef.value?.capture() ?? null
-}
-
-defineExpose({ capture })
 const config = useComponentsConfig()
 const getProfile = useGetProfile()
 

package/src/components/DataserviceCard.vue

@@ -99,11 +99,6 @@
         </p>
       </div>
     </div>
-    <DataserviceQualityInline
-      v-if="dataservice.quality"
-      :quality="dataservice.quality"
-    />
-
     <ObjectCardShortDescription
       v-if="showDescription"
       :text="dataservice.description"
@@ -131,7 +126,6 @@ import ObjectCardBadge from './ObjectCardBadge.vue'
 import ObjectCardHeader from './ObjectCardHeader.vue'
 import ObjectCardOwner from './ObjectCardOwner.vue'
 import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
-import DataserviceQualityInline from './DataserviceQualityInline.vue'
 
 type Props = {
   dataservice: Dataservice

package/src/components/DatasetQuality.vue

@@ -13,7 +13,7 @@
         {{ t('Qualité des métadonnées:') }}
       </span>
     </span>
-    <QualityScore
+    <DatasetQualityScore
       :score="quality.score"
       class="w-full"
     />
@@ -23,35 +23,35 @@
   </Toggletip>
   <template v-if="!hideWarnings">
     <ul class="list-none pl-0">
-      <QualityItemWarning
+      <DatasetQualityItemWarning
         :quality-item="quality.dataset_description_quality"
         :message="t('Description des données non renseignée')"
       />
-      <QualityItemWarning
+      <DatasetQualityItemWarning
         :quality-item="quality.resources_documentation"
         :message="t('Documentation des fichiers manquante')"
       />
-      <QualityItemWarning
+      <DatasetQualityItemWarning
         :quality-item="quality.license"
         :message="t('Licence non renseignée')"
       />
-      <QualityItemWarning
+      <DatasetQualityItemWarning
         :quality-item="quality.update_frequency && quality.update_fulfilled_in_time"
         :message="quality.update_frequency ? t('Fréquence de mise à jour non respectée') : t('Fréquence de mise à jour non renseignée')"
       />
-      <QualityItemWarning
+      <DatasetQualityItemWarning
         :quality-item="quality.has_open_format"
         :message="t('Formats de fichiers non standards')"
       />
-      <QualityItemWarning
+      <DatasetQualityItemWarning
         :quality-item="quality.temporal_coverage"
         :message="t('Couverture temporelle non renseignée')"
       />
-      <QualityItemWarning
+      <DatasetQualityItemWarning
         :quality-item="quality.spatial"
         :message="t('Couverture spatiale non renseignée')"
       />
-      <QualityItemWarning
+      <DatasetQualityItemWarning
         :quality-item="quality.all_resources_available"
         :message="t('Certains fichiers ne sont pas disponibles')"
       />
@@ -62,8 +62,8 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
-import QualityItemWarning from './QualityItemWarning.vue'
-import QualityScore from './QualityScore.vue'
+import DatasetQualityItemWarning from './DatasetQualityItemWarning.vue'
+import DatasetQualityScore from './DatasetQualityScore.vue'
 import Toggletip from './Toggletip.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/DatasetQualityInline.vue

@@ -7,7 +7,7 @@
     >
       <RiInformationLine class="size-3.5 shrink-0" />
       <span class="text-gray-medium text-sm group-hover/quality:underline">{{ t('Métadonnées :') }}</span>
-      <QualityScore :score="quality.score" />
+      <DatasetQualityScore :score="quality.score" />
       <template #toggletip>
         <DatasetQualityTooltipContent :quality />
       </template>
@@ -18,7 +18,7 @@
 <script setup lang="ts">
 import { RiInformationLine } from '@remixicon/vue'
 import type { Quality } from '../types/datasets'
-import QualityScore from './QualityScore.vue'
+import DatasetQualityScore from './DatasetQualityScore.vue'
 import DatasetQualityTooltipContent from './DatasetQualityTooltipContent.vue'
 import Toggletip from './Toggletip.vue'
 import { useTranslation } from '../composables/useTranslation'

package/src/components/DatasetQualityTooltipContent.vue

@@ -68,7 +68,7 @@
 import type { Quality } from '../types/datasets'
 import { useComponentsConfig } from '../config'
 import { useTranslation } from '../composables/useTranslation'
-import DatasetQualityItem from './QualityItem.vue'
+import DatasetQualityItem from './DatasetQualityItem.vue'
 
 defineProps<{
   quality: Quality

package/src/components/ResourceAccordion/ResourceAccordion.vue

@@ -224,10 +224,6 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
-              <ImagePreview
-                v-else-if="isImagePreviewFormat(resource.format)"
-                :resource="resource"
-              />
               <!-- Show Datafair embedded preview (koumoul) -->
               <DatafairPreview
                 v-else-if="hasDatafairPreview"
@@ -313,7 +309,7 @@ import { trackEvent } from '../../functions/matomo'
 import CopyButton from '../CopyButton.vue'
 import { useComponentsConfig } from '../../config'
 import { getOwnerName } from '../../functions/owned'
-import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize, isImagePreviewFormat } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceTitleId, detectOgcService, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import BrandedButton from '../BrandedButton.vue'
 import { useTranslation } from '../../composables/useTranslation'
 import { useHasTabularData } from '../../composables/useHasTabularData'
@@ -348,7 +344,6 @@ const Pmtiles = defineAsyncComponent(() => import('./Pmtiles.client.vue'))
 const JsonPreview = defineAsyncComponent(() => import('./JsonPreview.client.vue'))
 const PdfPreview = defineAsyncComponent(() => import('./PdfPreview.client.vue'))
 const XmlPreview = defineAsyncComponent(() => import('./XmlPreview.client.vue'))
-const ImagePreview = defineAsyncComponent(() => import('./ImagePreview.client.vue'))
 const DatafairPreview = defineAsyncComponent(() => import('./Datafair.client.vue'))
 
 const { t } = useTranslation()
@@ -356,11 +351,11 @@ const { formatRelativeIfRecentDate } = useFormatDate()
 const checkTabularData = useHasTabularData()
 
 const hasPreview = computed(() => {
-  // For JSON, PDF, XML, and image files, show preview.
+  // For JSON, PDF, and XML files, show preview.
   // We cannot check for CORS issues here because we cannot use an async component here.
   // If there is a CORS issue when fetching the file for preview, it will be managed and displayed as an error banner by the preview component.
   const format = props.resource.format?.toLowerCase()
-  return format === 'json' || format === 'pdf' || format === 'xml' || isImagePreviewFormat(format)
+  return format === 'json' || format === 'pdf' || format === 'xml'
 })
 
 const hasTabularData = computed(() => checkTabularData(props.resource))

package/src/components/ResourceExplorer/ResourceExplorerViewer.vue

@@ -122,11 +122,6 @@
                 v-if="ogcWms"
                 :resource="resource"
               />
-              <PreviewUnavailable v-if="!hasPmtiles && !ogcWms && hasPmtilesError">
-                {{ t("La carte n'a pas pu être générée automatiquement pour ce fichier.") }}
-                <br>
-                <span class="text-gray-medium text-xs">{{ pmtilesError }}</span>
-              </PreviewUnavailable>
             </div>
             <div v-if="tab.key === 'data'">
               <JsonPreview
@@ -141,10 +136,6 @@
                 v-else-if="resource.format && resource.format.toLowerCase() === 'xml'"
                 :resource="resource"
               />
-              <ImagePreview
-                v-else-if="isImagePreviewFormat(resource.format)"
-                :resource="resource"
-              />
               <DatafairPreview
                 v-else-if="hasDatafairPreview"
                 :resource="resource"
@@ -238,7 +229,7 @@ import Metadata from '../ResourceAccordion/Metadata.vue'
 import SchemaBadge from '../ResourceAccordion/SchemaBadge.vue'
 import ResourceSelector from './ResourceSelector.vue'
 import { filesize, summarize } from '../../functions/helpers'
-import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize, isImagePreviewFormat } from '../../functions/resources'
+import { getResourceFormatIcon, getResourceExternalUrl, getResourceFilesize } from '../../functions/resources'
 import { trackEvent } from '../../functions/matomo'
 import { useComponentsConfig } from '../../config'
 import { useFormatDate } from '../../functions/dates'
@@ -257,9 +248,6 @@ const PdfPreview = defineAsyncComponent(() =>
 const XmlPreview = defineAsyncComponent(() =>
   import('../ResourceAccordion/XmlPreview.client.vue'),
 )
-const ImagePreview = defineAsyncComponent(() =>
-  import('../ResourceAccordion/ImagePreview.client.vue'),
-)
 const DatafairPreview = defineAsyncComponent(() =>
   import('../ResourceAccordion/Datafair.client.vue'),
 )
@@ -287,8 +275,6 @@ const { formatRelativeIfRecentDate } = useFormatDate()
 const {
   hasTabularData,
   hasPmtiles,
-  hasPmtilesError,
-  pmtilesError,
   hasDatafairPreview,
   hasOpenAPIPreview,
   ogcService,

package/src/components/ReuseCard.vue

@@ -68,7 +68,7 @@ import { RiLockLine, RiSubtractLine } from '@remixicon/vue'
 import { computed } from 'vue'
 import type { RouteLocationRaw } from 'vue-router'
 import { useFormatDate } from '../functions/dates'
-import type { Reuse, ReuseV2 } from '../types/reuses'
+import type { Reuse } from '../types/reuses'
 import type { TitleTag } from '../types/ui'
 import { useTranslation } from '../composables/useTranslation'
 import AppLink from './AppLink.vue'
@@ -77,7 +77,7 @@ import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
 
 const props = withDefaults(defineProps<{
-  reuse: Reuse | ReuseV2
+  reuse: Reuse
 
   /**
   * The reuseUrl is a route location object to allow Vue Router to navigate to the details of a reuse.

package/src/components/ReuseDetails.vue

@@ -32,11 +32,11 @@
 import { RiEyeLine, RiStarLine, RiSubtractLine } from '@remixicon/vue'
 import { useReuseType } from '../composables/useReuseType'
 import { summarize } from '../functions/helpers'
-import type { Reuse, ReuseV2 } from '../types/reuses'
+import type { Reuse } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 
 const props = defineProps<{
-  reuse: Reuse | ReuseV2
+  reuse: Reuse
 }>()
 
 const { t } = useTranslation()

package/src/components/ReuseHorizontalCard.vue

@@ -60,7 +60,7 @@
 <script setup lang="ts">
 import { RiArchiveLine, RiLineChartLine, RiLockLine } from '@remixicon/vue'
 import type { RouteLocationRaw } from 'vue-router'
-import type { Reuse, ReuseV2 } from '../types/reuses'
+import type { Reuse } from '../types/reuses'
 import { useTranslation } from '../composables/useTranslation'
 import ReuseDetails from './ReuseDetails.vue'
 import Placeholder from './Placeholder.vue'
@@ -71,7 +71,7 @@ import ObjectCardShortDescription from './ObjectCardShortDescription.vue'
 import ObjectCardBadge from './ObjectCardBadge.vue'
 
 defineProps<{
-  reuse: Reuse | ReuseV2
+  reuse: Reuse
   reuseUrl?: RouteLocationRaw
   organizationUrl?: RouteLocationRaw
 }>()

package/src/components/Search/GlobalSearch.vue

@@ -266,7 +266,7 @@
                       name="reuse"
                       :reuse="result"
                     >
-                      <ReuseHorizontalCard :reuse="(result as ReuseV2)" />
+                      <ReuseHorizontalCard :reuse="(result as Reuse)" />
                     </slot>
                   </template>
                   <template v-else-if="currentTypeConfig?.class === 'organizations'">
@@ -368,7 +368,7 @@ import type { AsyncDataRequestStatus } from '../../functions/api.types'
 import type { Dataset } from '../../types/datasets'
 import type { Dataservice } from '../../types/dataservices'
 import type { Organization } from '../../types/organizations'
-import type { ReuseV2 } from '../../types/reuses'
+import type { Reuse } from '../../types/reuses'
 import type { TopicV2 } from '../../types/topics'
 import type { GlobalSearchConfig, SearchResponseByClass, SearchType, SortOption, FacetItem } from '../../types/search'
 import { getDefaultGlobalSearchConfig } from '../../types/search'

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -597,7 +597,6 @@
 <script setup lang="ts">
 import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
 import { ofetch } from 'ofetch'
-import { useElementSize } from '@vueuse/core'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
 import {
@@ -833,43 +832,18 @@ function redistributeColumnWidths() {
   columnWidths.value = widths
 }
 
-// Measure the natural widths once (the <th> must still be auto-sized) and
-// distribute them. No-op once measured or while no column is displayed.
-function ensureMeasured() {
-  if (Object.keys(naturalWidths.value).length > 0) return
-  if (displayedColumns.value.length === 0) return
-  measureNaturalWidths()
-  redistributeColumnWidths()
-}
-
-// Drive measurement and re-stretch off the container's reactive width
-// (`useElementSize` wraps a ResizeObserver and disconnects it on unmount). The
-// width goes 0 -> N once the table is laid out in the DOM, which is also when
-// the <thead> carries its content-driven natural widths: the first non-zero
-// width measures the stable base, later changes (window resize) only
-// redistribute it.
-const { width: containerWidth } = useElementSize(scrollContainerRef)
-
-watch(containerWidth, (width) => {
-  if (width === 0) return
-  if (Object.keys(naturalWidths.value).length === 0) {
-    ensureMeasured()
-  }
-  else {
-    redistributeColumnWidths()
-  }
-})
-
-// Fallback: re-run once columns appear if they weren't available when the
-// container was first sized (standalone usage where the profile resolves late).
+// Measure once both data and profile are ready (so the <thead> is rendered with
+// content-driven natural widths), then distribute.
 watch(
   () => [tableData.value !== null, displayedColumns.value.length] as const,
   async ([dataReady, colCount]) => {
     if (!dataReady || colCount === 0) return
     if (Object.keys(naturalWidths.value).length > 0) return
     await nextTick()
-    ensureMeasured()
+    measureNaturalWidths()
+    redistributeColumnWidths()
   },
+  { immediate: true },
 )
 
 // Re-stretch the remaining columns whenever the displayed set changes (columns

package/src/components/TabularExplorer/types.ts

@@ -51,8 +51,8 @@ export type TabularColumnProfile = {
   tops: TabularTopValue[]
   nb_distinct: number
   nb_missing_values: number
-  min?: number | string
-  max?: number | string
+  min?: number
+  max?: number
   std?: number
   mean?: number
 }

package/src/composables/useHasTabularData.ts

@@ -1,5 +1,4 @@
 import { useComponentsConfig } from '../config'
-import { hasTabularParsingError } from '../functions/resources'
 import type { Resource } from '../types/resources'
 
 /**
@@ -21,7 +20,7 @@ export const useHasTabularData = () => {
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
-      && !hasTabularParsingError(resource)
+      && !resource.extras['analysis:parsing:error']
       && !sourceUnreachable
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )