@datagouv/components-next 1.0.2-dev.97 → 1.0.2-dev.98

package/src/components/TabularExplorer/TabularExplorer.vue

@@ -1,164 +1,218 @@
 <template>
   <div>
-    <SimpleBanner
-      v-if="error"
-      type="warning"
-      class="mb-4"
+    <div
+      v-if="previewError"
+      class="max-w-3xl mx-auto"
     >
-      {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
-      <pre class="text-xs mt-2">{{ error }}</pre>
-    </SimpleBanner>
-
-    <template v-else-if="tableData">
-      <!-- Toolbar -->
-      <div class="flex items-center py-3 gap-2">
-        <!-- Mobile: filter & sort button -->
-        <BrandedButton
-          class="md:hidden"
-          color="tertiary"
-          size="2xs"
-          :icon="RiFilter2Line"
-          keep-margins-even-without-borders
-          @click="mobileFilterOpen = true"
-        >
-          {{ t('Filtres & tri') }}
-        </BrandedButton>
-
-        <div class="flex-1" />
-
-        <!-- Right: Stats -->
-        <div class="flex items-center gap-4">
-          <!-- Columns (clickable, opens column popover) -->
-          <Popover
-            ref="columnAnchor"
-            v-slot="{ open }"
-            class="relative"
-          >
-            <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
-              <RiLayoutColumnLine
-                class="size-3"
-                aria-hidden="true"
-              />
-              <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
-              <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
-              <RiArrowDownSLine
-                class="size-3 opacity-50"
-                aria-hidden="true"
-              />
-            </PopoverButton>
-
-            <ClientOnly>
-              <Teleport to="#tooltips">
-                <PopoverPanel
-                  v-show="open"
-                  ref="columnPanel"
-                  static
-                  class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
-                  :style="columnFloatingStyles"
-                >
-                  <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
-                    <span class="text-xs font-medium text-gray-title">
-                      {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
-                    </span>
-                    <BrandedButton
-                      v-if="hiddenCount"
-                      color="tertiary"
-                      size="2xs"
-                      @click="showAllColumns"
-                    >
-                      {{ t('Tout afficher') }}
-                    </BrandedButton>
-                  </div>
-                  <div class="max-h-64 overflow-auto p-1">
-                    <label
-                      v-for="col in allColumns"
-                      :key="col"
-                      class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
-                    >
-                      <input
-                        type="checkbox"
-                        :checked="visibleColumns.has(col)"
-                        class="size-3.5 accent-new-primary"
-                        @change="toggleColumn(col)"
-                      >
-                      <span class="truncate">{{ col }}</span>
-                    </label>
-                  </div>
-                </PopoverPanel>
-              </Teleport>
-            </ClientOnly>
-          </Popover>
-
-          <!-- Rows -->
-          <span class="flex items-center gap-1.5 text-xs text-gray-plain">
-            <RiLayoutRowLine
-              class="size-3 text-mention-grey"
-              aria-hidden="true"
-            />
-            <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
-            <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
-          </span>
+      <SimpleBanner
+        type="warning"
+        class="mb-4"
+      >
+        {{ t("L'aperçu de ce fichier n'a pas pu être chargé.") }}
+        <pre class="text-xs mt-2 whitespace-pre-wrap break-words">{{ previewError }}</pre>
+      </SimpleBanner>
+    </div>
+
+    <div
+      v-else-if="previewLoading"
+      class="animate-pulse-placeholder"
+      :aria-label="t('Chargement de l\'aperçu…')"
+      role="status"
+    >
+      <div class="container">
+        <div class="flex items-center justify-end gap-4 py-3">
+          <div class="h-4 w-20 bg-gray-200" />
+          <div class="h-4 w-20 bg-gray-200" />
         </div>
       </div>
+      <div class="overflow-hidden">
+        <table class="w-full text-sm border-collapse">
+          <thead class="shadow-[inset_0_-1px_0_0_#E5E5E5]">
+            <tr>
+              <th
+                v-for="i in 6"
+                :key="i"
+                class="px-3 py-2 text-left"
+              >
+                <div class="h-4 w-24 bg-gray-200" />
+              </th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr
+              v-for="row in 8"
+              :key="row"
+              class="border-b border-gray-100"
+            >
+              <td
+                v-for="col in 6"
+                :key="col"
+                class="px-3 py-2.5"
+              >
+                <div class="h-3 bg-gray-200" />
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
 
-      <!-- Active filters -->
-      <div
-        v-if="activeFilters.length > 0"
-        class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
-      >
-        <!-- Header -->
-        <div class="flex items-center justify-between">
-          <div class="flex items-center gap-2">
-            <RiFilter2Line
-              class="size-3.5"
-              aria-hidden="true"
-            />
-            <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
-            <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
-              {{ activeFilters.length }}
-            </span>
-          </div>
+    <template v-else-if="tableData && profileData">
+      <!-- Toolbar (constrained width — only the table itself goes edge-to-edge) -->
+      <div class="container">
+        <div class="flex items-center py-3 gap-2">
+          <!-- Mobile: filter & sort button -->
           <BrandedButton
+            class="md:hidden"
             color="tertiary"
             size="2xs"
-            :icon="RiCloseLine"
-            @click="clearAllFilters"
+            :icon="RiFilter2Line"
+            keep-margins-even-without-borders
+            @click="mobileFilterOpen = true"
           >
-            {{ t('Tout effacer') }}
+            {{ t('Filtres & tri') }}
           </BrandedButton>
+
+          <div class="flex-1" />
+
+          <!-- Right: Stats -->
+          <div class="flex items-center gap-4">
+            <!-- Columns (clickable, opens column popover) -->
+            <Popover
+              ref="columnAnchor"
+              v-slot="{ open }"
+              class="relative"
+            >
+              <PopoverButton class="flex items-center gap-1.5 text-xs text-gray-plain rounded px-2 py-1 hover:bg-gray-50 focus:outline-none">
+                <RiLayoutColumnLine
+                  class="size-3"
+                  aria-hidden="true"
+                />
+                <span class="font-bold hidden md:inline">{{ t('Colonnes') }}</span>
+                <span class="font-mono tabular-nums">{{ visibleColumns.size }}/{{ allColumns.length }}</span>
+                <RiArrowDownSLine
+                  class="size-3 opacity-50"
+                  aria-hidden="true"
+                />
+              </PopoverButton>
+
+              <ClientOnly>
+                <Teleport to="#tooltips">
+                  <PopoverPanel
+                    v-show="open"
+                    ref="columnPanel"
+                    static
+                    class="bg-white border border-gray-default rounded shadow-lg w-72 absolute z-[800]"
+                    :style="columnFloatingStyles"
+                  >
+                    <div class="flex items-center justify-between px-3 py-2 border-b border-gray-default">
+                      <span class="text-xs font-medium text-gray-title">
+                        {{ visibleColumns.size }} {{ t('sur') }} {{ allColumns.length }} {{ t('colonnes visibles') }}
+                      </span>
+                      <BrandedButton
+                        v-if="hiddenCount"
+                        color="tertiary"
+                        size="2xs"
+                        @click="showAllColumns"
+                      >
+                        {{ t('Tout afficher') }}
+                      </BrandedButton>
+                    </div>
+                    <div class="max-h-64 overflow-auto p-1">
+                      <label
+                        v-for="col in allColumns"
+                        :key="col"
+                        class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-50 cursor-pointer text-xs"
+                      >
+                        <input
+                          type="checkbox"
+                          :checked="visibleColumns.has(col)"
+                          class="size-3.5 accent-new-primary"
+                          @change="toggleColumn(col)"
+                        >
+                        <span class="truncate">{{ col }}</span>
+                      </label>
+                    </div>
+                  </PopoverPanel>
+                </Teleport>
+              </ClientOnly>
+            </Popover>
+
+            <!-- Rows -->
+            <span class="flex items-center gap-1.5 text-xs text-gray-plain">
+              <RiLayoutRowLine
+                class="size-3 text-mention-grey"
+                aria-hidden="true"
+              />
+              <span class="font-bold hidden md:inline">{{ t('Lignes') }}</span>
+              <span class="font-mono tabular-nums">{{ tableData.meta.total.toLocaleString() }}/{{ totalLines.toLocaleString() }}</span>
+            </span>
+          </div>
         </div>
-        <!-- Chips -->
-        <div class="flex flex-wrap gap-1.5">
-          <span
-            v-for="af in activeFilters"
-            :key="af.column"
-            class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
-          >
-            <component
-              :is="getTypeConfig(af.column).icon"
-              class="size-3 text-gray-title"
-              aria-hidden="true"
-            />
-            <span class="text-gray-title">{{ af.column }}</span>
-            <span class="text-gray-plain">{{ af.label }}</span>
-            <button
-              class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
-              @click="removeFilter(af.column)"
+
+        <!-- Active filters -->
+        <div
+          v-if="activeFilters.length > 0"
+          class="bg-gray-some border border-gray-default rounded-xl px-3 py-2.5 mb-3 space-y-2.5"
+        >
+          <!-- Header -->
+          <div class="flex items-center justify-between">
+            <div class="flex items-center gap-2">
+              <RiFilter2Line
+                class="size-3.5"
+                aria-hidden="true"
+              />
+              <span class="text-xs text-gray-plain">{{ t('Filtres actifs') }}</span>
+              <span class="inline-flex items-center justify-center rounded-full bg-new-primary/10 text-new-primary text-xs tabular-nums min-w-5 h-5 px-1.5">
+                {{ activeFilters.length }}
+              </span>
+            </div>
+            <BrandedButton
+              color="tertiary"
+              size="2xs"
+              :icon="RiCloseLine"
+              @click="clearAllFilters"
+            >
+              {{ t('Tout effacer') }}
+            </BrandedButton>
+          </div>
+          <!-- Chips -->
+          <div class="flex flex-wrap gap-1.5">
+            <span
+              v-for="af in activeFilters"
+              :key="af.column"
+              class="inline-flex items-center gap-1.5 bg-white border border-gray-silver rounded-lg pl-2 pr-1 py-1 text-xs"
             >
-              <RiCloseLine
-                class="size-3"
+              <component
+                :is="getTypeConfig(af.column).icon"
+                class="size-3 text-gray-title"
                 aria-hidden="true"
               />
-              <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
-            </button>
-          </span>
+              <span class="text-gray-title">{{ af.column }}</span>
+              <span class="text-gray-plain">{{ af.label }}</span>
+              <button
+                class="rounded p-0.5 text-gray-low hover:text-gray-plain hover:bg-gray-100"
+                @click="removeFilter(af.column)"
+              >
+                <RiCloseLine
+                  class="size-3"
+                  aria-hidden="true"
+                />
+                <span class="sr-only">{{ t('Supprimer ce filtre') }}</span>
+              </button>
+            </span>
+          </div>
         </div>
       </div>
+      <!-- /container (toolbar + active filters) -->
 
       <!-- Desktop: scrollable table -->
+      <!-- `-mx-4` lets the table extend edge-to-edge of the parent's px-4 wrapper
+           (used in both ResourceExplorerViewer's TabPanel and pages/explore.vue),
+           while the toolbar and active-filter rows above keep that padding. -->
       <div
         ref="scrollContainer"
-        class="hidden md:block overflow-auto max-h-[70vh]"
+        class="hidden md:block overflow-auto max-h-[70vh] -mx-4"
       >
         <table class="text-sm border-collapse">
           <thead class="sticky top-0 bg-white z-10 shadow-[inset_0_-1px_0_0_#E5E5E5]">
@@ -457,7 +511,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, onUnmounted, ref, watch, useTemplateRef } from 'vue'
+import { computed, nextTick, onUnmounted, ref, watch, useTemplateRef } from 'vue'
 import { ofetch } from 'ofetch'
 import { flip, shift, autoUpdate, useFloating } from '@floating-ui/vue'
 import { Dialog, DialogPanel, DialogTitle, Popover, PopoverButton, PopoverPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'
@@ -474,6 +528,7 @@ import {
 import { useFetch } from '../../functions/api'
 import { useComponentsConfig } from '../../config'
 import { useTranslation } from '../../composables/useTranslation'
+import { injectTabularProfile } from '../../composables/useTabularProfile'
 import { buildTypeConfig, hasFilterForColumn as _hasFilterForColumn, isTruthy, isFalsy } from '../../functions/tabular'
 import ClientOnly from '../ClientOnly.vue'
 import SimpleBanner from '../SimpleBanner.vue'
@@ -484,7 +539,7 @@ import TabularCellPopover from './TabularCellPopover.vue'
 import type { CellInfo } from './TabularCellPopover.vue'
 import TabularFilterContent from './TabularFilterContent.vue'
 import TabularFilterPopover from './TabularFilterPopover.vue'
-import type { TabularDataResponse, TabularProfileResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
+import type { TabularDataResponse, TabularRow, ColumnType, SortConfig, ColumnFilters, BadgeStyle } from './types'
 
 const props = defineProps<{
   resourceId: string
@@ -509,10 +564,6 @@ const dataUrl = computed(() =>
   `${config.tabularApiUrl}/api/resources/${props.resourceId}/data/`,
 )
 
-const profileUrl = computed(() =>
-  `${config.tabularApiUrl}/api/resources/${props.resourceId}/profile/`,
-)
-
 // Sort & filter state
 const sort = ref<SortConfig | null>(null)
 const filters = ref<Record<string, ColumnFilters>>({})
@@ -552,7 +603,17 @@ const dataQuery = computed(() => {
 
 const { data: tableData, error } = await useFetch<TabularDataResponse>(dataUrl, { raw: true, query: dataQuery })
 
-const { data: profileData } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+// Profile is shared with sibling components (e.g. DataStructure) via
+// `provideTabularProfile` in the parent. Falls back to a local fetch
+// when no parent provides it (standalone usage).
+const { data: profileData, error: profileError, status: profileStatus } = await injectTabularProfile(() => props.resourceId)
+
+// The component renders nothing useful until the profile is available
+// (allColumns is derived from it). Surface a clear loading / error state
+// so we don't end up with an empty table + a spinner running forever.
+const profileLoading = computed(() => !profileData.value && (profileStatus.value === 'idle' || profileStatus.value === 'pending'))
+const previewError = computed(() => error.value || profileError.value)
+const previewLoading = computed(() => !previewError.value && (!tableData.value || profileLoading.value))
 
 // Infinite scroll state
 const allRows = ref<TabularRow[]>([])
@@ -625,23 +686,65 @@ function showAllColumns() {
   visibleColumns.value = new Set(allColumns.value)
 }
 
-// Column resize
+// Column widths
+//
+// Strategy:
+// - On first render (when both data and profile are loaded), we measure the
+//   natural offsetWidth of each <th>, then distribute any leftover container
+//   space proportionally so the table fills the available horizontal area.
+// - We immediately lock all columns to those widths via `columnWidths`, so
+//   pagination, filtering, sorting or infinite-scroll never trigger a layout
+//   shift (the table doesn't re-auto-size based on newly visible content).
+// - Manual resize via the drag handle keeps working unchanged: it always sees
+//   columnWidths populated, so it goes straight into the resize loop.
 const columnWidths = ref<Record<string, number>>({})
 const resizing = ref<{ column: string, startX: number, startWidth: number } | null>(null)
 
-function initColumnWidths() {
-  const ths = scrollContainerRef.value?.querySelectorAll('th')
-  if (!ths) return
-  const widths: Record<string, number> = {}
+function measureAndDistributeColumnWidths() {
+  const container = scrollContainerRef.value
+  if (!container) return
+  const ths = container.querySelectorAll('th')
+  if (!ths || ths.length === 0) return
+
+  const naturalWidths: Record<string, number> = {}
+  let naturalSum = 0
   ths.forEach((th, i) => {
     const col = displayedColumns.value[i]
-    if (col) widths[col] = th.offsetWidth
+    if (!col) return
+    const w = th.offsetWidth
+    naturalWidths[col] = w
+    naturalSum += w
   })
+  if (naturalSum === 0) return
+
+  // Inflate to fill container if columns don't naturally cover it.
+  const containerWidth = container.clientWidth
+  const ratio = naturalSum < containerWidth ? containerWidth / naturalSum : 1
+
+  const widths: Record<string, number> = {}
+  for (const [col, w] of Object.entries(naturalWidths)) {
+    widths[col] = Math.floor(w * ratio)
+  }
   columnWidths.value = widths
 }
 
+// Lock columns once both data and profile are ready (so the <thead> is rendered
+// with content-driven natural widths). Only runs once — subsequent data changes
+// (pagination, filters) keep the locked widths and avoid layout shifts.
+watch(
+  () => [tableData.value !== null, displayedColumns.value.length] as const,
+  async ([dataReady, colCount]) => {
+    if (!dataReady || colCount === 0) return
+    if (Object.keys(columnWidths.value).length > 0) return
+    await nextTick()
+    measureAndDistributeColumnWidths()
+  },
+  { immediate: true },
+)
+
 function startResize(col: string, e: MouseEvent) {
-  if (!Object.keys(columnWidths.value).length) initColumnWidths()
+  // Fallback in case the user grabs the handle before the initial measure ran.
+  if (!Object.keys(columnWidths.value).length) measureAndDistributeColumnWidths()
   resizing.value = { column: col, startX: e.clientX, startWidth: columnWidths.value[col] ?? 100 }
   // Disable smooth scroll during resize
   if (scrollContainerRef.value) scrollContainerRef.value.style.scrollBehavior = 'auto'

package/src/composables/useHasTabularData.ts

@@ -11,10 +11,17 @@ export const useHasTabularData = () => {
   const config = useComponentsConfig()
 
   return (resource: Resource) => {
+    // Reject resources whose source URL last check failed (>= 400):
+    // the tabular-api purges its parquet when the source dies, but
+    // `parsing_table` may still be set — leading to a 404 on fetch.
+    const checkStatus = resource.extras['check:status']
+    const sourceUnreachable = typeof checkStatus === 'number' && checkStatus >= 400
+
     return (
       config.tabularApiUrl
       && resource.extras['analysis:parsing:parsing_table']
       && !resource.extras['analysis:parsing:error']
+      && !sourceUnreachable
       && (config.tabularAllowRemote || resource.filetype === 'file')
     )
   }

package/src/composables/useTabularProfile.ts

@@ -0,0 +1,70 @@
+import { computed, inject, provide, toValue, type MaybeRefOrGetter, type Ref } from 'vue'
+import { useComponentsConfig } from '../config'
+import { useFetch } from '../functions/api'
+import type { AsyncDataRequestStatus } from '../functions/api.types'
+import type { TabularProfileResponse } from '../components/TabularExplorer/types'
+
+const TABULAR_PROFILE_KEY = Symbol('tabular-profile')
+
+export type TabularProfileState = {
+  resourceId: Readonly<Ref<string>>
+  data: Readonly<Ref<TabularProfileResponse | null>>
+  error: Readonly<Ref<unknown | null>>
+  status: Readonly<Ref<AsyncDataRequestStatus>>
+  refresh: () => Promise<void>
+}
+
+// What is shared through provide/inject: the resourceId (to let descendants
+// check they target the same resource) and the in-flight fetch promise. We
+// share the promise rather than the resolved state because `provide()` must
+// run synchronously during setup — see `provideTabularProfile`.
+type TabularProfileShared = {
+  resourceId: Readonly<Ref<string>>
+  state: Promise<TabularProfileState>
+}
+
+async function createProfileState(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const config = useComponentsConfig()
+  const ridRef = computed(() => toValue(resourceId))
+
+  // Goes through the package's useFetch, which delegates to the host's
+  // customUseFetch (Nuxt useFetch in cdata) so the response is shared
+  // between SSR and CSR via the Nuxt payload — avoiding a double fetch.
+  const profileUrl = computed(() =>
+    ridRef.value ? `${config.tabularApiUrl}/api/resources/${ridRef.value}/profile/` : null,
+  )
+
+  const { data, error, status, refresh } = await useFetch<TabularProfileResponse>(profileUrl, { raw: true })
+
+  return { resourceId: ridRef, data, error, status, refresh }
+}
+
+/**
+ * Parent: fetch the tabular profile once and share it with descendants
+ * (TabularExplorer, DataStructure...) via provide/inject.
+ *
+ * Not async on purpose: `provide()` only works while the active component
+ * instance is set, which is lost after the first `await`. So we kick off the
+ * fetch, `provide()` the resulting promise synchronously, then return it for
+ * the caller to await.
+ */
+export function provideTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const ridRef = computed(() => toValue(resourceId))
+  const state = createProfileState(resourceId)
+  provide<TabularProfileShared>(TABULAR_PROFILE_KEY, { resourceId: ridRef, state })
+  return state
+}
+
+/**
+ * Child: get the tabular profile from an ancestor that called
+ * `provideTabularProfile` for the same resourceId. Falls back to
+ * fetching on its own if no compatible ancestor is found — preserves
+ * standalone usage of TabularExplorer / DataStructure.
+ */
+export async function injectTabularProfile(resourceId: MaybeRefOrGetter<string>): Promise<TabularProfileState> {
+  const injected = inject<TabularProfileShared | null>(TABULAR_PROFILE_KEY, null)
+  if (injected && injected.resourceId.value === toValue(resourceId)) {
+    return await injected.state
+  }
+  return await createProfileState(resourceId)
+}

package/src/main.ts

@@ -40,6 +40,9 @@ import BrandedButton from './components/BrandedButton.vue'
 import CopyButton from './components/CopyButton.vue'
 import DataserviceCard from './components/DataserviceCard.vue'
 import DatasetCard from './components/DatasetCard.vue'
+import DataStructure from './components/ResourceAccordion/DataStructure.vue'
+import Downloads from './components/ResourceAccordion/Downloads.vue'
+import Metadata from './components/ResourceAccordion/Metadata.vue'
 import DescriptionListTerm from './components/DescriptionListTerm.vue'
 import DescriptionListDetails from './components/DescriptionListDetails.vue'
 import DiscussionMessageCard from './components/DiscussionMessageCard.vue'
@@ -60,6 +63,7 @@ import LoadingBlock from './components/LoadingBlock.vue'
 import MarkdownViewer from './components/MarkdownViewer.vue'
 import OrganizationCard from './components/OrganizationCard.vue'
 import OrganizationHorizontalCard from './components/OrganizationHorizontalCard.vue'
+import ObjectCardOwner from './components/ObjectCardOwner.vue'
 import OrganizationLogo from './components/OrganizationLogo.vue'
 import OrganizationNameWithCertificate from './components/OrganizationNameWithCertificate.vue'
 import OwnerType from './components/OwnerType.vue'
@@ -73,6 +77,7 @@ import PostCard from './components/PostCard.vue'
 import ReadMore from './components/ReadMore.vue'
 import ResourceAccordion from './components/ResourceAccordion/ResourceAccordion.vue'
 import ResourceIcon from './components/ResourceAccordion/ResourceIcon.vue'
+import ResourceSelector from './components/ResourceExplorer/ResourceSelector.vue'
 import ResourceExplorer from './components/ResourceExplorer/ResourceExplorer.vue'
 import ResourceExplorerSidebar from './components/ResourceExplorer/ResourceExplorerSidebar.vue'
 import ResourceExplorerViewer from './components/ResourceExplorer/ResourceExplorerViewer.vue'
@@ -115,6 +120,8 @@ export * from './composables/useMetrics'
 export * from './composables/useReuseType'
 export * from './composables/useTranslation'
 export * from './composables/useHasTabularData'
+export * from './composables/useResourceCapabilities'
+export * from './composables/useTabularProfile'
 
 export * from './functions/activities'
 export * from './functions/datasets'
@@ -326,6 +333,9 @@ export {
   CopyButton,
   DataserviceCard,
   DatasetCard,
+  DataStructure,
+  Downloads,
+  Metadata,
   DatasetInformationSection,
   DatasetTemporalitySection,
   DatasetSpatialSection,
@@ -365,7 +375,9 @@ export {
   ResourceExplorer,
   ResourceExplorerSidebar,
   ResourceExplorerViewer,
+  ObjectCardOwner,
   ResourceIcon,
+  ResourceSelector,
   ReuseCard,
   ReuseDetails,
   ReuseHorizontalCard,