@museumwnf/viewer-core 2.2.0 → 2.3.0

package/README.md

@@ -566,6 +566,9 @@ below for whichever future site needs its own).
 | `useGalleryPartner(data, collection, config)` / `useExhibitionPartner(data, config)` | `data`, and (gallery only) `collection` for its `tile` | `partnerList`/`partnerListSpec`, `partnerSheet`/`partnerSheetSpec`, and (gallery only) `partnerObjects` — the exhibition shape's `partnerSpecs.js` never carried an objects-page spec |
 | `useGallerySheet(data, config)` / `useExhibitionSheet(data, config)` | `data`; `config` unused today | `{ itemSheet }`, the `RecordView` spec — the exhibition shape's `citation.project` reads `data.projectName`, absent from the gallery shape |
 | `PAGE_SIZE`, `DATE_MODE`, `FACET_CATEGORIES`, `FACET_LABEL_KEYS`, `useFacetLabels()` | — | the five THG catalogue facets, shared verbatim by both families (nine tiles a page, containment dates, `type`/`dynasty`/`subject`/`material`/`artist`) |
+| `useGalleryItemDetail(data, timeline)` / `useExhibitionItemDetail(data, timeline)` | `data`, the family's `timeline` object; the site's `projectColors` and `noticeProjects` through `useSiteConfig()`, read lazily | `{ itemDetail }`, the item page's `RecordSheetView` spec: the family sheet plus the source-database chip, the Explore-partner notice, the holding-museum link (none for an exhibition's hidden partner), and the related block's labels, outside-reference chips, dynasty popouts and timeline popout. The exhibition gives a record with no project the `mwnf-chip--Explore` chip, and its "search this period" link carries only the timeline controls' keys |
+| `useExhibitionThemes(data)` | `data` | the exhibition's themes: `themeTree` (a `useCollectionTree` over themes.json, `entity: 'themes'`), `themes`, `aboutTheme`, `listedThemes`, `themeByRouteId`/`themeRouteId` (legacy's `display_order - 1`), `romanFor`, `themePictures`, `pictureById`, `themeText`/`pictureText`, `owningTheme`, `subIndexOf`, `pictureParent`, `itemDetailString`, and `useThemePictures(node)`, the live `pictures` `PictureGallery`/`PictureNarrative` read |
+| `buildThemePictures(nodePictures, deps)`, `romanFor(displayOrder)` | — | the pure halves of the above: a node's pictures with their `related`/`backRelated` links resolved across the whole tree, and legacy's Roman theme numeral (display order 2 is "I") |
 
 ### The declaration outside a component
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@museumwnf/viewer-core",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Application engine for MWNF websites: turns a dataset.config.js into a mounted Vue application.",
   "type": "module",
   "license": "SEE LICENSE IN LICENSE.md",

package/src/dxa/exhibition/useExhibitionItemDetail.js

@@ -0,0 +1,130 @@
+import { eraLabel, roundOutward } from '../../catalogue/dates.js'
+import { useSiteConfig } from '../../siteConfig.js'
+import { useExhibitionSheet } from './useExhibitionSheet.js'
+
+// An exhibition's item page, as viewer-layout's `RecordSheetView` spec
+// (inventory-app#2053): `useExhibitionSheet`'s field sheet, plus the blocks
+// the view reads through `spec.sourceDatabase`, `spec.notice`, `spec.museum`
+// and `spec.related.*`. The six exhibitions each carried this layer as their
+// own `composables/sheet.js`, the same code in all six.
+//
+// What stays an exhibition's own is read from its `dataset.config.js`
+// through `useSiteConfig()`, lazily, as the galleries do:
+//
+//   * `projectColors`, project id → one of viewer-layout's `mwnf-chip--*`
+//     classes, for the source-database chip and an outside reference's chip;
+//     a record with no project at all is an Explore record, whose chip is
+//     `mwnf-chip--Explore`;
+//   * `noticeProjects`, the projects whose sheets still carry legacy's
+//     Explore-partner notice.
+
+/**
+ * The exhibition's item-page spec, over its data layer's `data` and its
+ * timeline layer's `timeline` (`useExhibitionTimeline`).
+ *
+ * Reads `data.defaultLang`, `data.dynastyById`, `data.isExploreRecord`,
+ * `data.isHiddenPartner`, `data.labelOf`, `data.partnerById`,
+ * `data.partnerRoute`, `data.translations`, what `useExhibitionSheet` reads,
+ * and `timeline.countryIdForCode`, `timeline.findEvents`,
+ * `timeline.hasTimeline`, `timeline.timelineCountries`, `timeline.timelineSpec`.
+ */
+export function useExhibitionItemDetail(data, timeline) {
+  const {
+    defaultLang, dynastyById, isExploreRecord, isHiddenPartner, labelOf, partnerById, partnerRoute, translations,
+  } = data
+  const { countryIdForCode, findEvents, hasTimeline, timelineCountries, timelineSpec } = timeline
+  const { itemSheet: platformSheet } = useExhibitionSheet(data)
+
+  function chipClass(record) {
+    return useSiteConfig().projectColors?.[record.project_id] ?? (isExploreRecord(record) ? 'mwnf-chip--Explore' : null)
+  }
+
+  function dynastyTr(dynasty, language) {
+    return translations('dynasties', language)[dynasty.id] ?? translations('dynasties', defaultLang)[dynasty.id] ?? {}
+  }
+
+  // Legacy popped out a dynasty only when it had a history to show.
+  function dynastiesWithHistory(record, language) {
+    return (record.dynasty_ids ?? [])
+      .map((id) => dynastyById.value.get(id))
+      .filter((d) => d && dynastyTr(d, language).history)
+  }
+
+  // The country the "Timeline for this item" popout opens on: the legacy
+  // two-letter code whose id is the record's own country.
+  function countryCodeOf(countryId) {
+    for (const [code] of timelineCountries.value) {
+      if (countryIdForCode(code) === countryId) return code
+    }
+    return null
+  }
+
+  // The popout's "search this period" link: the timeline results filtered to
+  // the country and the period, under the keys the results page's controls
+  // read — never a key it has no control for (a local timeline has no
+  // country), which it would ignore (inventory-app#2022).
+  function periodSearch(countryCode, range) {
+    const keys = new Set((timelineSpec.value?.controls ?? []).map((control) => control.key))
+    const query = { country: countryCode, begin: range[0], end: range[1] }
+    return { name: 'timeline-results', query: Object.fromEntries(Object.entries(query).filter(([key]) => keys.has(key))) }
+  }
+
+  const itemDetail = {
+    ...platformSheet,
+
+    sourceDatabase: {
+      chipClass: (record) => chipClass(record),
+    },
+
+    notice: {
+      show: (record) => (useSiteConfig().noticeProjects ?? []).includes(record.project_id),
+      label: 'exhibition.item.explorePartnerNote',
+    },
+
+    // A hidden museum keeps its name on the sheet and loses the link: it has
+    // no page to link to.
+    museum: {
+      route: (partnerId) => {
+        const partner = partnerById.value.get(partnerId)
+        if (!partner || isHiddenPartner(partner)) return null
+        return partnerRoute(partner)
+      },
+      label: (partnerId) => labelOf('partners', partnerId),
+    },
+
+    related: {
+      ...platformSheet.related,
+      title: 'exhibition.related.title',
+      description: 'exhibition.related.description',
+      outsideChip: (ref) => chipClass(ref),
+      notInPackageLabel: 'exhibition.results.notInThisExhibition',
+      artisticIntroductionLabel: 'exhibition.nav.artisticIntroduction',
+      databaseLabel: 'exhibition.search.relatedDatabase',
+      overallDatabase: { label: 'exhibition.search.overallDatabase', linkLabel: 'exhibition.nav.overallDatabase' },
+      onDisplayIn: { linkPendingLabel: 'exhibition.item.linkPending' },
+      dynasties: (record, language) => ({
+        records: dynastiesWithHistory(record, language),
+        tr: (d) => dynastyTr(d, language),
+      }),
+      // Withheld when the exhibition reports no chronology, or the item has
+      // no date to anchor a range on: legacy then printed no "timeline"
+      // anywhere on the sheet.
+      timeline: (record, ctx) => {
+        if (!hasTimeline.value) return null
+        const range = roundOutward(record.start_date, record.end_date)
+        if (range[0] == null) return null
+        return {
+          heading: 'exhibition.section.timeline',
+          countries: timelineCountries.value.map(([value, label]) => ({ value, label })),
+          defaultCountry: () => countryCodeOf(record.country_id) ?? 'all',
+          events: (countryCode) => findEvents({ countryCode, start: range[0], end: range[1] }),
+          range,
+          era: (year) => eraLabel(year, ctx.t),
+          searchTo: periodSearch,
+        }
+      },
+    },
+  }
+
+  return { itemDetail }
+}

package/src/dxa/exhibition/useExhibitionThemes.js

@@ -0,0 +1,279 @@
+import { computed } from 'vue'
+import { useI18n } from '../../i18n/index.js'
+import { entityRef } from '../../composables/useEntities.js'
+import { useCollectionTree } from '../../record/collectionTree.js'
+
+// An exhibition's themes: the tour its theme pages, its themes list and its
+// theme galleries read (inventory-app#2053). The six exhibitions each carried
+// this as `composables/themes.js`, `useThemePresentation.js` and
+// `useThemePictures.js`, the same code in all six.
+//
+// themes.json is the ordered tree: top-level themes, each with its sub-themes
+// and its curated picture selections. `useCollectionTree({ source: 'themes' })`
+// walks it, and its `previous`/`next` (depth-first) is legacy's tour order:
+// About → theme 1 overview → its sub-themes → theme 2 overview → ….
+//
+// Two rules the data fixes rather than taste:
+//
+//   * Theme 0 ("About the Exhibition") is an ordinary top-level theme legacy
+//     renders at /about and skips on /themes. Its display order is 1, so the
+//     themes list starts at display order 2 and numbers those "Theme I"
+//     upwards — which is why `romanFor` subtracts one.
+//   * The theme id in the keyspace is not the display order. The route
+//     carries `display_order - 1`, as legacy's `theme.display - 1` did, so a
+//     legacy address pasted after the `#` lands on the same theme.
+//
+// A theme's selections point at `picture` items, which are not members of the
+// exhibition and so not in items.json — only their parents are. Every label a
+// theme page shows (name, holding museum, location, country) is read off the
+// parent record, which is also what "see the full record" links to.
+// `parent_in_package` says whether the parent is there at all: a curated
+// picture whose parent was not exported still renders its own image.
+
+/**
+ * Legacy numbered its themes in Roman numerals, counting from the About
+ * theme. EssayView's `numbering: 'roman'` counts a node's position among its
+ * siblings, which it derives from `tree.root` — always null for a themes.json
+ * package — so it would number every top-level theme "I". The numeral an
+ * exhibition shows is always the owning theme's, so one function serves
+ * themes and sub-themes.
+ */
+export function romanFor(displayOrder) {
+  const lookup = [
+    ['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90],
+    ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1],
+  ]
+  let n = displayOrder - 1
+  let out = ''
+  for (const [sym, value] of lookup) {
+    while (n >= value) { out += sym; n -= value }
+  }
+  return out
+}
+
+/**
+ * The `pictures` PictureGallery/PictureNarrative read (viewer-layout's
+ * docs/theme-components.md) for one node, as a pure function of its data so
+ * the graph rules are tested without Vue or a package.
+ *
+ * A picture's `related`/`backRelated` targets resolve against `pictureById`,
+ * the WHOLE tree's picture index, not the node's own selections:
+ * `theme_item_related` rows can name a picture curated under another theme,
+ * and scoping the lookup to the node is what used to drop such a link.
+ *
+ * @param nodePictures - the node's own selections, in curator order
+ * @param deps.pictureById - Map<pictureId, rawPicture> for every picture in the tree
+ * @param deps.resolvePicture - (raw) => `{ id, image, imageAlt, name, detail, to }`,
+ *   the node-independent shape, used for the node's pictures and every target
+ * @param deps.imageCaptionFor - (raw) => this node's own caption for the picture
+ * @param deps.fieldsFor - (raw) => this node's panel `fields` for the picture
+ * @param deps.relationText - (link) => the forward relation's text
+ * @param deps.reciprocalText - (link) => the backward relation's text
+ */
+export function buildThemePictures(nodePictures, deps) {
+  const {
+    pictureById: byId, resolvePicture, imageCaptionFor, fieldsFor, relationText, reciprocalText,
+  } = deps
+
+  return (nodePictures ?? []).map((raw) => {
+    const related = (raw.related ?? [])
+      .map((link) => {
+        const target = byId.get(link.picture_item_id)
+        return target ? { picture: resolvePicture(target), text: relationText(link) } : null
+      })
+      .filter(Boolean)
+
+    // Every other picture anywhere in the tree whose own `related` names this
+    // one, so a target on another theme's page still shows "related to" back.
+    const backRelated = []
+    for (const other of byId.values()) {
+      for (const link of other.related ?? []) {
+        if (link.picture_item_id === raw.picture_item_id) {
+          backRelated.push({ picture: resolvePicture(other), reciprocalText: reciprocalText(link) })
+        }
+      }
+    }
+
+    return {
+      ...resolvePicture(raw),
+      imageCaption: imageCaptionFor(raw),
+      fields: fieldsFor(raw),
+      // Not part of the components' contract: the theme page turns a
+      // selection back into legacy's `?image=<display_order>` with it.
+      displayOrder: raw.display_order,
+      related,
+      backRelated,
+    }
+  })
+}
+
+/**
+ * The exhibition's themes, over its data layer's `data`.
+ *
+ * Reads `data.defaultLang`, `data.itemById`, `data.itemRoute`, `data.labelOf`,
+ * `data.mdInline`, `data.tr`.
+ */
+export function useExhibitionThemes(data) {
+  const { defaultLang, itemById, itemRoute, labelOf, mdInline, tr } = data
+
+  // EssayView reads `spec.tree.entity` to know where a node's own text lives,
+  // even for a tree built here rather than from its `{ themes: true }`
+  // shorthand; without it, every title/quote/body lookup would read
+  // 'collections', not a themes.json package's entity.
+  const themeTree = useCollectionTree({ source: 'themes', entity: 'themes' })
+  themeTree.entity = 'themes'
+
+  // The raw top-level array, in the order the themes list and the tour read
+  // them: the tree's own `root` is always null for this shape, so it cannot
+  // hand back every top-level theme itself.
+  const rawThemes = entityRef('themes')
+  const themes = computed(() => rawThemes.value ?? [])
+
+  const aboutTheme = computed(() => themes.value.find((t) => t.display_order === 1) ?? null)
+
+  /** The themes the themes page lists: everything after the About theme. */
+  const listedThemes = computed(() => themes.value.filter((t) => t.display_order > 1))
+
+  /** Route id → theme: legacy's `/theme/:id` carries `display_order - 1`. */
+  function themeByRouteId(id) {
+    const n = Number(id)
+    return themes.value.find((t) => t.display_order - 1 === n) ?? null
+  }
+
+  function themeRouteId(theme) {
+    return (theme?.display_order ?? 1) - 1
+  }
+
+  /** A node's picture selections, in curator order. */
+  function themePictures(theme) {
+    return [...(theme?.pictures ?? [])].sort((a, b) => (a.display_order ?? 0) - (b.display_order ?? 0))
+  }
+
+  /** Every picture selection in the tree, by its own id (not a catalogue id). */
+  const pictureById = computed(() => {
+    const map = new Map()
+    for (const node of themeTree.byId.value.values()) {
+      for (const picture of node.pictures ?? []) map.set(picture.picture_item_id, picture)
+    }
+    return map
+  })
+
+  // translations/themes.<lang>.json is keyed two ways: by theme id for the
+  // theme's own title/quote/presentation, and by `<theme id>/<picture item
+  // id>` for one picture's curated text in that theme — the same picture in
+  // two themes carries two descriptions.
+  function themeText(theme, lang = defaultLang) {
+    return tr('themes', theme?.id, lang)
+  }
+
+  function pictureText(theme, picture, lang = defaultLang) {
+    if (!theme?.id || !picture?.picture_item_id) return {}
+    return tr('themes', `${theme.id}/${picture.picture_item_id}`, lang)
+  }
+
+  /** The top-level theme that owns a node: the node itself, or its parent. */
+  function owningTheme(node) {
+    if (!node) return null
+    const parents = themeTree.parents(node.id)
+    return parents.length ? parents[0] : node
+  }
+
+  /** A node's 1-based position among its owning theme's sub-themes; null for the theme itself. */
+  function subIndexOf(node) {
+    if (!node) return null
+    const owner = owningTheme(node)
+    if (!owner || owner.id === node.id) return null
+    const index = themeTree.children(owner.id).findIndex((child) => child.id === node.id)
+    return index === -1 ? null : index + 1
+  }
+
+  /** A picture selection's parent record, or null when it is not a member. */
+  function pictureParent(picture) {
+    if (!picture?.parent_in_package) return null
+    return itemById.value.get(picture.parent_item_id) ?? null
+  }
+
+  /** Legacy's `itemDetailString`: museum, location, country, blanks dropped. */
+  function itemDetailString(item) {
+    if (!item) return ''
+    const sheet = tr('items', item.id, defaultLang)
+    return [
+      sheet.holder || labelOf('partners', item.partner_id),
+      sheet.location,
+      labelOf('countries', item.country_id),
+    ].filter(Boolean).join(', ')
+  }
+
+  /**
+   * A node's `pictures`, live: its selections resolved against the parent
+   * records, the translations and the current locale. Call it in a
+   * component's setup; `node` is a ref.
+   */
+  function useThemePictures(node) {
+    const { t, locale } = useI18n()
+
+    function resolvePicture(raw) {
+      const parent = pictureParent(raw)
+      const name = parent ? labelOf('items', parent.id) : ''
+      return {
+        id: raw.picture_item_id,
+        image: raw.image_url,
+        imageAlt: name,
+        name: mdInline(name),
+        detail: itemDetailString(parent),
+        to: parent ? itemRoute(parent) : null,
+      }
+    }
+
+    function imageCaptionFor(raw) {
+      if (!node.value?.id) return ''
+      return tr('themes', `${node.value.id}/${raw.picture_item_id}`, locale.value).image_caption ?? ''
+    }
+
+    // Legacy labelled only "also known as"; artist names and dates stand
+    // alone, as `fields` rows with an empty label.
+    function fieldsFor(raw) {
+      const parent = pictureParent(raw)
+      if (!parent) return []
+      const sheet = tr('items', parent.id, defaultLang)
+      const fields = []
+      if (sheet.alternate_name) {
+        fields.push({ label: `${t('sheet.field.alsoKnownAs')}:`, value: mdInline(sheet.alternate_name) })
+      }
+      if (parent.artist_names?.length) fields.push({ label: '', value: parent.artist_names.join(', ') })
+      if (sheet.dates) fields.push({ label: '', value: sheet.dates })
+      return fields
+    }
+
+    const relationText = (link) => link?.descriptions?.[locale.value] ?? link?.descriptions?.en ?? ''
+    const reciprocalText = (link) => link?.reciprocal_descriptions?.[locale.value] ?? link?.reciprocal_descriptions?.en ?? ''
+
+    return computed(() => buildThemePictures(themePictures(node.value), {
+      pictureById: pictureById.value,
+      resolvePicture,
+      imageCaptionFor,
+      fieldsFor,
+      relationText,
+      reciprocalText,
+    }))
+  }
+
+  return {
+    themeTree,
+    themes,
+    aboutTheme,
+    listedThemes,
+    themeByRouteId,
+    themeRouteId,
+    romanFor,
+    themePictures,
+    pictureById,
+    themeText,
+    pictureText,
+    owningTheme,
+    subIndexOf,
+    pictureParent,
+    itemDetailString,
+    useThemePictures,
+  }
+}

package/src/dxa/gallery/useGalleryItemDetail.js

@@ -0,0 +1,110 @@
+import { eraLabel, roundOutward } from '../../catalogue/dates.js'
+import { useSiteConfig } from '../../siteConfig.js'
+import { useGallerySheet } from './useGallerySheet.js'
+
+// A gallery's item page, as viewer-layout's `RecordSheetView` spec
+// (inventory-app#2054): `useGallerySheet`'s field sheet, plus the blocks the
+// view reads through `spec.sourceDatabase`, `spec.notice`, `spec.museum` and
+// `spec.related.*` — the project chips, the Explore-partner notice, the
+// holding-museum link, and the related block's outside references,
+// cross-database links, dynasty popouts and timeline popout. The 37
+// galleries each carried this layer in their own `composables/gallery.js`,
+// the same code in all 37.
+//
+// What stays a gallery's own is read from its `dataset.config.js` through
+// `useSiteConfig()`, lazily, inside the functions the view calls at render
+// time — `dataset.config.js` is imported before `createViewer()` sets the
+// config, so a read at module level would only ever see the empty default:
+//
+//   * `projectColors`, project id → one of viewer-layout's `mwnf-chip--*`
+//     classes, for the source-database chip and an outside reference's chip;
+//   * `noticeProjects`, the projects whose sheets still carry legacy's
+//     Explore-partner notice.
+
+/**
+ * The gallery's item-page spec, over its data layer's `data` and its
+ * timeline layer's `timeline` (`useGalleryTimeline`).
+ *
+ * Reads `data.defaultLang`, `data.dynastyById`, `data.labelOf`,
+ * `data.partnerById`, `data.partnerRoute`, `data.translations`, what
+ * `useGallerySheet` reads, and `timeline.countryIdForCode`,
+ * `timeline.timelineEvents` (`countries`, `findEvents`).
+ */
+export function useGalleryItemDetail(data, timeline) {
+  const { defaultLang, dynastyById, labelOf, partnerById, partnerRoute, translations } = data
+  const { countryIdForCode, timelineEvents } = timeline
+  const { countries: timelineCountries, findEvents } = timelineEvents
+  const { itemSheet: platformSheet } = useGallerySheet(data)
+
+  const chipClass = (record) => useSiteConfig().projectColors?.[record.project_id] ?? null
+
+  function museumRoute(partnerId) {
+    const partner = partnerById.value.get(partnerId)
+    return partner ? partnerRoute(partner) : null
+  }
+
+  function dynastyTranslation(dynasty, language) {
+    return translations('dynasties', language)[dynasty.id] ?? translations('dynasties', defaultLang)[dynasty.id] ?? {}
+  }
+
+  // Legacy popped out a dynasty only when it had a history to show.
+  function itemDynasties(record, language) {
+    const records = (record.dynasty_ids ?? [])
+      .map((id) => dynastyById.value.get(id))
+      .filter((d) => d && dynastyTranslation(d, language).history)
+    return records.length ? { records, tr: (d) => dynastyTranslation(d, language) } : null
+  }
+
+  // The timeline popout, for the record's own date range: the gallery's own
+  // countries, events and search route.
+  function itemTimeline(record, ctx) {
+    const [from, to] = roundOutward(record.start_date, record.end_date)
+    if (from == null) return null
+    return {
+      heading: 'gallery.section.timeline',
+      countries: timelineCountries.value.map((c) => ({ value: c.value, label: c.label ?? ctx.t('timeline.form.allCountries') })),
+      defaultCountry: () => {
+        for (const { value: code } of timelineCountries.value) {
+          if (countryIdForCode(code) === record.country_id) return code
+        }
+        return 'all'
+      },
+      events: (country) => findEvents({ country, begin: from, end: to }),
+      range: [from, to],
+      era: (year) => eraLabel(year, ctx.t),
+      searchTo: (country, [begin, end]) => ({ name: 'timeline-results', query: { country, begin, end } }),
+    }
+  }
+
+  const itemDetail = {
+    ...platformSheet,
+    sourceDatabase: {
+      chipClass,
+    },
+    notice: {
+      show: (record) => (useSiteConfig().noticeProjects ?? []).includes(record.project_id),
+      label: 'gallery.item.explorePartnerNote',
+    },
+    museum: {
+      route: (partnerId) => museumRoute(partnerId),
+      label: (partnerId) => labelOf('partners', partnerId),
+    },
+    related: {
+      ...platformSheet.related,
+      title: 'gallery.related.title',
+      description: 'gallery.related.description',
+      notInPackageLabel: 'gallery.results.notInThisGallery',
+      // An outside `related_items` reference carries its `project_id`
+      // (inventory-app#1807), so it reads the same `projectColors` map.
+      outsideChip: chipClass,
+      artisticIntroductionLabel: 'gallery.nav.artisticIntroduction',
+      databaseLabel: 'gallery.search.relatedDatabase',
+      overallDatabase: { label: 'gallery.search.overallDatabase', linkLabel: 'gallery.nav.overallDatabase' },
+      onDisplayIn: { linkPendingLabel: 'gallery.item.linkPending' },
+      dynasties: (record, language) => itemDynasties(record, language),
+      timeline: itemTimeline,
+    },
+  }
+
+  return { itemDetail }
+}

package/src/dxa/index.js

@@ -26,9 +26,12 @@ export { useGalleryCollection } from './gallery/useGalleryCollection.js'
 export { useGalleryTimeline } from './gallery/useGalleryTimeline.js'
 export { useGalleryPartner } from './gallery/useGalleryPartner.js'
 export { useGallerySheet } from './gallery/useGallerySheet.js'
+export { useGalleryItemDetail } from './gallery/useGalleryItemDetail.js'
 
 export { useExhibitionData } from './exhibition/useExhibitionData.js'
 export { useExhibitionCollection } from './exhibition/useExhibitionCollection.js'
 export { useExhibitionTimeline } from './exhibition/useExhibitionTimeline.js'
 export { useExhibitionPartner } from './exhibition/useExhibitionPartner.js'
 export { useExhibitionSheet } from './exhibition/useExhibitionSheet.js'
+export { useExhibitionItemDetail } from './exhibition/useExhibitionItemDetail.js'
+export { buildThemePictures, romanFor, useExhibitionThemes } from './exhibition/useExhibitionThemes.js'