@museumwnf/viewer-layout 3.2.2 → 3.4.0

package/README.md

@@ -18,6 +18,8 @@ all the packages:
 | `@museumwnf/viewer-layout/views` | composed views | whole pages driven by a spec the website declares, with slots it fills | viewer-core's data layer, the site config and the router |
 | `@museumwnf/viewer-layout/components` | composed views | `SiteShell`, the frame composed from `dataset.config.js` | the site config and the current route |
 | `@museumwnf/viewer-layout/dxa` | DXA family layer | the gallery and exhibition pages and shells, the family-only blocks, `standardRoutes`, `galleryConfig` / `exhibitionConfig` | the entries above, `@museumwnf/viewer-core` and `@museumwnf/viewer-core/dxa` |
+| `@museumwnf/viewer-layout/dxa/gallery.css`, `/dxa/exhibition.css` | DXA family layer | each family's stylesheet: its fonts, page reset and page column, and its theme as a function of the palette | the palette a site's `theme/tokens.css` sets |
+| `@museumwnf/viewer-layout/dxa/testing` | DXA family layer | each family's smoke test, `describeGallerySmoke` / `describeExhibitionSmoke` | the site's config, texts and package, in the site's own Vitest |
 | `@museumwnf/viewer-layout/style.css` | — | one stylesheet for every entry, the family styles included | — |
 | `@museumwnf/viewer-layout/tokens.reference.css` | — | every token the package reads, with its fallback | — |
 
@@ -136,23 +138,25 @@ section — the mark in the header, the active view — not for rebuilding the
 section. A website that needs something no prop expresses adds the prop
 here, so the next website has it too.
 
-Sections render top to bottom in this fixed order. Every section is optional: it renders nothing unless its slot or driving props are set. The default slot (→ `AppContent`) is where the router-view goes.
+Sections render top to bottom in this fixed order, except that `navigation-placement="before-banner"` puts the navigation above the banner. Every section is optional: it renders nothing unless its slot or driving props are set. The default slot (→ `AppContent`) is where the router-view goes.
 
 | Section | Slot | Props (on PageShell) | Events |
 |---|---|---|---|
-| `AppHeader` | `#header`, `#header-brand` | `header-home`, `header-brand`, `header-eyebrow`, `header-title`, `header-title-href`, `header-subtitle`, `header-logos`, `header-logos-title`, `header-links`, `search`, `languages`, `language`, `language-placement`, `language-style` | `search`, `update:language` |
+| `AppHeader` | `#header`, `#header-brand` | `header-home`, `header-brand`, `header-brand-logo`, `header-eyebrow`, `header-title`, `header-title-href`, `header-subtitle`, `header-logos`, `header-logos-title`, `header-links`, `search`, `languages`, `language`, `language-placement`, `language-style` | `search`, `update:language` |
 | `AppBanner` | `#banner` | `banner-variant`, `banner-image`, `banner-image-alt`, `banner-text`, `banner-caption`, `banner-caption-label`, `banner-eyebrow`, `banner-title`, `banner-title-href`, `banner-subtitle`, `banner-headline`, `banner-enter`, `banner-strapline` | — |
-| `AppNavigation` | `#navigation` | `nav-links`, `notice`, `languages`, `language` | `update:language` |
+| `AppNavigation` | `#navigation` | `nav-links`, `notice`, `languages`, `language`, `navigation-placement` | `update:language` |
 | `AppContent` | default | — | — |
 | `AppHyperlinks` | `#hyperlinks` | `hyperlinks-variant`, `hyperlinks-title`, `hyperlinks-title-href`, `hyperlinks-subtitle`, `hyperlinks` | — |
 | `AppSponsors` | `#sponsors` | `sponsors-title`, `sponsors`, `sponsor-groups` | — |
-| `AppFooter` | `#footer` | `footer-text`, `footer-links`, `footer-attribution-label`, `footer-attribution-text`, `footer-terms-href`, `footer-terms-label` | — |
+| `AppFooter` | `#footer` | `footer-text`, `footer-links`, `footer-social`, `footer-attribution-label`, `footer-attribution-text`, `footer-terms-href`, `footer-terms-label` | — |
 
 ### The language switcher
 
 `languages` is `['en']` or `[{ code, label }]`, `language` the active code.
 `language-placement` says where the switcher renders: `navigation` (the
-default, a select at the end of the navigation bar) or `header`;
+default, a select at the end of the navigation bar), `header`, or `none` (no
+site-language switcher at all: legacy's galleries had only the record's own
+bar);
 `language-style` says how, `select` or `buttons`. Whichever renders emits
 `update:language` with the code chosen.
 
@@ -239,13 +243,122 @@ renders before the routed content, `#after-content` after it (a dismissible
 sponsor notice next to the router-view, say); `#header`, `#navigation`,
 `#hyperlinks`, `#sponsors`, `#footer` pass straight through to `PageShell`.
 
-Once the loaded package's `manifest.rights` names a holder (`useSiteRights()`),
-the footer also renders the attribution sentence — `rights.attribution`, or
+The footer is legacy's unless the site says otherwise: MWNF's five portal
+links and "© Museum With No Frontiers (MWNF) 2004–<year>" (since 3.4.0). With
+`config.footer.rightsHolder: true`, and once the loaded package's
+`manifest.rights` names a holder (`useSiteRights()`), it also renders the
+attribution sentence — `rights.attribution`, or
 the holder's name when the package carries no separate attribution text —
 labelled `record.source.rightsHolder`, with a link labelled
-`record.source.termsOfUse` to `rights.termsUrl`. A package built before the
-`rights` block existed carries no holder, so the footer renders exactly as
-it did before: `footer-text` alone.
+`record.source.termsOfUse` to `rights.termsUrl`. Legacy printed no such line,
+so it is off by default.
+
+### Site chrome: the logo, the chrome pictures, the social links
+
+Since 3.4.0 a site supplies its own chrome files (decision D7 of
+inventory-app#2233: logos, banners, tiles and backgrounds belong to their
+website, not to the inventory nor to `images.museumwnf.org`). It keeps them
+in its repository under `theme/assets/` and hands the layout one map of
+them, built by Vite so every file is fingerprinted with the build:
+
+```js
+// src/dataset.config.js
+const chrome = import.meta.glob('../theme/assets/**/*.{jpg,jpeg,png,gif,svg}', {
+  eager: true, query: '?url', import: 'default',
+})
+
+export default { /* … */ chrome, brand: { logo: 'logo.png', alt: 'MWNF Logo' } }
+// a DXA site: galleryConfig({ …, chrome }) / exhibitionConfig({ …, chrome })
+```
+
+The map's keys are normalised to the path after `theme/assets/`, so
+`'../theme/assets/chrome/thematic_gallery/thg_galleries/9/banner.jpg'` is
+`chrome/thematic_gallery/thg_galleries/9/banner.jpg`. Two kinds of key:
+
+| Key | What reads it |
+| --- | --- |
+| a file name at the root (`logo.png`, `dia.jpg`, …) | the part of the layout that names it (`brand.logo`, the DXA keys below) |
+| `chrome/<path>` | an image the data package names by its legacy path (`banner_image_path`, `image_path`, `homepage_image_path`, a sibling gallery's `image_path`): the file is the package's path under `theme/assets/chrome/`. One file per path, whatever size the layout asks for |
+
+A key a site doesn't supply falls back to what the layout drew before:
+the package path on `config.media.legacyHost`, the "MWNF" text mark for the
+logo, nothing for a background. So a site that supplies nothing renders as
+it did on 3.3.
+
+| Config | Shape | Notes |
+| --- | --- | --- |
+| `config.chrome` | `{ [path]: url }` | the map above |
+| `config.brand` | `{ logo, alt }` | `logo` a key of `chrome` (or a URL), drawn in the header's brand cell; `alt` an entry name or text. The DXA configs set it (below) |
+| `config.navigation.placement` | `'after-banner'` (default) \| `'before-banner'` \| `({ section }) => …` | where the menu goes: PageShell's `navigation-placement` |
+| `config.navigation.socialLinks` | `[{ label, href, icon }]` | the footer's social-network icons, opt-in for any site; `mwnfSocialLinks` (package root) is legacy's six. `icon` is one of `youtube`, `x`, `facebook`, `instagram`, `weibo`, `linkedin` |
+| `config.footer` | `{ rightsHolder }` | the footer is legacy's by default on every site: MWNF's five portal links (`config.navigation.footerLinks` replaces them) and "© Museum With No Frontiers (MWNF) 2004–<year>" (a `footer-text` the caller passes replaces it). `rightsHolder: true` adds the package's rights-holder attribution, which legacy never printed |
+
+`SocialLinks` (package root, prop `links`) draws the icon links on their own,
+for a site that writes its own `#footer`:
+`<SocialLinks :links="mwnfSocialLinks" />`.
+
+The favicon is not the layout's: every site ships `public/favicon.ico` and
+declares it in its own `index.html` (`<link rel="icon" href="%BASE_URL%favicon.ico">`).
+
+**DXA families.** `galleryConfig` sets `brand.logo` to `logo.png` (legacy
+dxa-client's white mark), `exhibitionConfig` to `logo_black.png`. Besides
+the logo, the family reads:
+
+| Key | Family | Where | Legacy source |
+| --- | --- | --- | --- |
+| `logo.png` | gallery (and the hub) | the header | `dxa-client/src/assets/logo.png` |
+| `logo_black.png` | exhibition | the header | `exhibitions-client/src/assets/logo_black.png` |
+| `dia.jpg`, `dba.jpg`, `sh.jpg` | gallery | the home's Other Virtual Museums banners (flat colour blocks without them) | `dxa-client/src/assets/` |
+| `world.png` | gallery | the glossary entry's header on the item sheet | `dxa-client/src/sites/<site>/world.png` (one per gallery) |
+| `chrome/<gallery.banner_image_path>` | gallery | the banner, every page | `images.museumwnf.org/hi_res/<path>` |
+| `chrome/<sibling_galleries[].image_path>` | gallery | the "Visit MWNF Galleries" tiles | `images.museumwnf.org/zoom/<path>` (legacy's tile size) |
+| `chrome/<exhibition.banner_image_path>` | exhibition | the banner on inner pages | `images.museumwnf.org/hi_res/<path>` |
+| `chrome/<exhibition.homepage_image_path>` | exhibition | the home banner (`home_image.jpg`) | `images.museumwnf.org/full/<path>` |
+| `chrome/<exhibition.logos[].legacy_path>` | exhibition | the sponsors' logos (header and footer strip), unless `sponsorLogos` lists the site's own | `images.museumwnf.org/full/<path>` |
+| `chrome/<homeLogos[].image>` | gallery (Glass) | the home's "Set up on the occasion of" logos | `images.museumwnf.org/gallery_logo/<path>` |
+
+**Exhibition sponsors.** The sponsors' logos are the site's, not the
+inventory's. `exhibitionConfig({ sponsorLogos })` takes the site's own list,
+`[{ image, href, alt, category_id, display_order }]` (`image` a chrome key or a
+URL, `alt` an entry name or text), in place of the package's. Without it each
+entry of `exhibition.json`'s `logos` draws `chrome/<legacy_path>`, else legacy's
+media host at that path; never the inventory's `image_url`. A picture in the
+popup notice whose legacy address the site keeps a copy of
+(`chrome/<the path after legacy's size segment>`, e.g. `chrome/upload/toronto.jpg`
+for `…/full/upload/toronto.jpg`) is drawn from that copy.
+
+Glass's home logo slot is the one gallery-specific block, declared by the
+site because no package carries it:
+
+```js
+galleryConfig({
+  // …
+  homeLogos: [
+    { image: 'thematic_gallery/thg_logos/dga/1.jpg', href: 'https://iyog2022.org/', alt: 'glass.home.iyogLogo' },
+  ],
+})
+```
+
+`image` is a `chrome/` path (the file at
+`theme/assets/chrome/thematic_gallery/thg_logos/dga/1.jpg`), `alt` an entry
+name in the site's own locales; the strip's heading is viewer-i18n's
+`gallery.home.logosLabel` ("Set up on the occasion of").
+
+A gallery shell for a site without a gallery package (the galleries hub,
+legacy's gallery 45) takes its chrome from `config.galleryShell` instead,
+each field optional and each winning over the package:
+
+| `config.galleryShell` field | Shape |
+| --- | --- |
+| `headerEyebrow`, `headerTitle` | entry name or text: the header's title cell on inner pages |
+| `bannerEyebrow`, `bannerTitle` | entry name or text: the line over the home banner's title ("Welcome to") and the title ("MWNF Galleries") |
+| `bannerImage` | a `chrome` key or a URL |
+| `bannerCaption` | `{ name, partner, location, country }` or a string, after "Detail from" |
+| `notice` | `false` drops the menu's tip about the search bar (a site with no search) |
+
+An empty string is "no line" (`bannerEyebrow: ''` drops "Discover MWNF
+Galleries"); a field left out keeps the gallery's own. The header fields
+apply on inner pages only, as the home page's header has no title.
 
 ## Sections (standalone use)
 
@@ -432,8 +545,8 @@ export default {
 | View | Declaration | Slots |
 |---|---|---|
 | `HomeView` | `config.home` or the same as props: `title`, `intro` (Markdown), `cards: [{ title, description, action, to \| href }]`, `featured: { entity, heading, action, route, eyebrow, meta, seed, filter }` — the pick is `useFeaturedRecord`, among the records `filter` keeps (viewer-core 2.2.0) — `panels` (the welcome and the record as `.mwnf-panel` boxes) | `before`, default, `after` |
-| `CatalogueResultsView` | `spec`: `entity`, `keys`, `facets` (viewer-core's facet spec), `facetScope: 'all' \| 'matching'`, `controls: [{ key, type: 'select' \| 'year' \| 'query' \| 'checkbox', label, placeholder, anyLabel, hideEmpty }]`, `filterMode: 'apply' \| 'immediate'`, `scope(record, filters)`, `match(record, filters)`, `narrow(list, filters, helpers)` (a rule over the whole list — a keyword index, say), `dates: { mode, begin, end }`, `sort`, `pageSize`, `variant: 'list' \| 'grid'`, `record(record, helpers)`, `recordRoute`, `summary(context)`, `title`, `filterTitle`, `empty`, `actionLabel`, `pagination` | `before`, `filters`, `actions`, `aside`, `empty`, `after` — each given `{ filters, active, apply, reset, goToPage, matching, pageInfo, options }`, enough to compose the panel in the aside or a second pagination |
-| `RecordView` | `spec` and `id`: `entity`, `translations`, `attribution`, `fields` (viewer-core's `sheetRows` spec, or a function of the context), `sections`, `layout`, `shortDescription`, `media(record, ctx)`, `mediaVariant`, `credits`, `workingNumber`, `citation: { project, permalink: true \| false \| string, heading } \| false` (the permalink is `sourceUrl(currentRoute)` — null, so no address, until the website declares `site.origin` — unless the spec disables it with `false` or overrides it with a string), `related: { variant, heading, record, route } \| false`, `back: { label, to \| href }`, `title(ctx)` | `header`, `before-sheet`, `after-sheet`, `aside`, `source` (under the citation; default `SourceCredit`), `related`, `after`, and one named after every `custom` or `link` row — each given `{ record, text, language, languages, select, dir, glossary, ready, attribution, t, tr }`; `related` also `records` (the rows) and `outside` (the related records the package does not carry) |
+| `CatalogueResultsView` | `spec`: `entity`, `keys`, `facets` (viewer-core's facet spec), `facetScope: 'all' \| 'matching'`, `controls: [{ key, type: 'select' \| 'year' \| 'query' \| 'checkbox', label, placeholder, anyLabel, hideEmpty }]`, `filterMode: 'apply' \| 'immediate'`, `scope(record, filters)`, `match(record, filters)`, `narrow(list, filters, helpers)` (a rule over the whole list — a keyword index, say), `dates: { mode, begin, end }`, `sort`, `pageSize`, `variant: 'list' \| 'grid'`, `boxed: true` (the results in the site's content box: framed by the `.mwnf-panel` tokens, a gap under the filters, narrow year fields), `record(record, helpers)`, `recordRoute`, `summary(context)`, `title`, `filterTitle`, `empty`, `actionLabel`, `pagination` | `before`, `filters`, `actions`, `aside`, `empty`, `after` — each given `{ filters, active, apply, reset, goToPage, matching, pageInfo, options }`, enough to compose the panel in the aside or a second pagination |
+| `RecordView` | `spec` and `id`: `entity`, `translations`, `attribution`, `fields` (viewer-core's `sheetRows` spec, or a function of the context), `sections`, `layout`, `shortDescription`, `media(record, ctx)`, `mediaVariant`, `spaced: true` (a gap under every block of pictures and under the sheet), `credits`, `workingNumber`, `citation: { project, permalink: true \| false \| string, heading } \| false` (the permalink is `sourceUrl(currentRoute)` — null, so no address, until the website declares `site.origin` — unless the spec disables it with `false` or overrides it with a string), `related: { variant, heading, record, route } \| false`, `back: { label, to \| href }`, `title(ctx)` | `header`, `before-sheet`, `after-sheet`, `aside`, `source` (under the citation; default `SourceCredit`), `related`, `after`, and one named after every `custom` or `link` row — each given `{ record, text, language, languages, select, dir, glossary, ready, attribution, t, tr }`; `related` also `records` (the rows) and `outside` (the related records the package does not carry) |
 | `ItemDetailView` (`/dxa`) | Every `RecordView` prop (`spec`, `id`, `entity`) plus `dataGetter(id) => record \| null \| undefined` — a website's own language-subset record lookup (an exhibition's per-build `itemById.get`); omitted, every `id` `RecordView` itself finds is treated as present (the gallery shape); supplied and it reports `id` missing, `NotFoundView` renders before `RecordView` ever mounts (the exhibition shape's per-language-build 404), and it also narrows the related block's `records`/outside-reference split the same way. The DXA gallery/exhibition item sheet's own blocks, on top of `spec`: `sourceDatabase: { label?, chipClass(record, ctx), addToCollection: { label? } \| false } \| false` (the source-database line + `backward_compatibility` code + "add to my collection" link — `chipClass` is a site's own project→colour map, the name comes from `useProjects()`), `notice: { show(record, ctx), label } \| false` (the Explore-partner notice), `museum: { route(partnerId, ctx) } \| false` (the holding-museum row: the item's holder text, then the partner as `PartnerPanel`'s `summary` — "About {name}, {city}, {country}" — linked through `route`; `route` returning null keeps the name without a link, for a hidden partner; `false` keeps the holder text alone; decision D3), and on `spec.related`: `title`, `description` (entries, above the block), `notInPackageLabel`, `outsideChip(ref, ctx)` (an outside reference's chip — `TODO(#1727)`, no `project_id` on a stub yet), `artisticIntroductionLabel` (with `useProjects().links(record.project_id).artisticIntroductionUrl`), `databaseLabel` (ditto, `.relatedDatabaseUrl`), `overallDatabase: { label, linkLabel } \| false` (`mwnfLinks.overallDatabase`), `onDisplayIn: { linkPendingLabel } \| false` (`record.gallery_references`, by `kind`), `download: false` (default on, `record.action.download`/`.downloadPdf`, prints), `glossary: false` (default on, `GlossaryTool`), `dynasties(record, language, ctx) => { records, tr } \| null` (`DynastyList`), `media: false` (default on, `record.media`, a `SheetSection`), `timeline(record, ctx) => TimelineInfo \| null` (`TimelineLookup` — see `docs/slot-catalogue.md`) | Every `RecordView` slot, forwarded straight through by name, unmodified, **except** `before-sheet`/`museum`/`related`: each always has this view's own default content (above), which a website's own slot still replaces entirely — "a slot fills, the default content renders otherwise" |
 | `EssayView` | `spec` and `id`: `tree` (a `useCollectionTree` result, or `{ purpose \| rootId, childType?, entity?, order? }` / `{ themes: true \| 'themes', childType? }` for the view to build one), `entity` (the tree's items — also the tree's own translations entity when `tree` carries none of its own, a pre-built tree or a declarative form with no `entity`/`themes`; falls back to `'collections'`), `route` (a node's own page: a route name or `(node, ctx) => to \| href`), `heading(ctx)`, `placeholder` (a regex a synthesized title matches, falling back to the English title, then the internal name), `quote` / `body` (a field of the node's translation, a dotted path into it such as `'extra.intro_text'`, or a function `(ctx) => Markdown`; default `'quote'`/`'description'`, `false` to drop), `glossary`, `items: { of(node) => ids, caption(item, node, ctx) => override, meta(item, ctx) => [string] (the grid's caption lines), badge(item, ctx) => string, route }`, `panel: { variants(item, ctx) => [{ id, image, alt, caption: { title, justification, fields: [{ label (entry name), value }] } }], fields(item, node, ctx) => [{ label, value }] (the fallback when a variant carries no fields of its own) } \| false`, `navigation: 'tree' \| 'siblings' \| false` (`tree` crosses a branch boundary, `siblings` stays inside the parent), `breadcrumb`, `tabs: true \| 'siblings' \| 'children'` (the strip: `true`/`'siblings'` — the node's own siblings, the default; `'children'` — the node's own children, e.g. a theme's chapters), `about(node) => boolean \| { panel?, navigation? }` (essay only; a plain boolean drops both the picture panel and the navigation, an object keeps the named piece instead), `aboutKeeps: ['panel' \| 'navigation']` (the spec-wide equivalent, when every about page in this spec keeps the same piece), `numbering: 'roman' \| 'decimal' \| false` (counts a node among its true siblings — for a themes-package tree, whose `root` is `null`, that's every node whose own `tree.parents(id)` is also empty, so a themes tree numbers its top-level themes I, II, III); `previous`, `next`, `backTo`, `inThisTheme` (the strip's label), `seeAll` (the panel's link to the selected record) — entry names, defaulting to shared entries every bundle carries: `core.pagination.previous`/`.next`, `record.action.backToResults`, `core.nav.inThisSection`, `catalogue.results.seeDatabaseEntry` | `header`, `before-body`, `after-body`, `panel`, `thumbnails`, `aside`, `justifications`, `navigation`, `after` (default `SourceCredit` — nothing until the website declares `site.origin`) — each given `{ node, text, language, tree, items, selected, select, selectedVariant, selectVariant, breadcrumb, previous, next, t, tr }` |
 | `LinkListView` | `spec`: `title` (entry), `groups: [{ heading (entry), links: [{ label, href \| to, note? }] }] \| (ctx) => groups` (`label`/`note` are Markdown, rendered inline through `mdInline`), `back: { label, to \| href } \| false`, `empty` (entry) | `before`, `group` (given `{ group }`; the default renders the heading and its links — replace it for a citation list that is not link-shaped), `after` |
@@ -557,10 +670,52 @@ every `legacyRoutes` resolver targeting those names) working unmodified.
 Full page-by-page prop/slot/entry table in
 [`docs/slot-catalogue.md`](docs/slot-catalogue.md#dxa-family-pages-museumwnfviewer-layoutdxa).
 
+### The family's stylesheet, theme and smoke test
+
+Since 3.3.0 what every site of a family shared by copy is here once:
+
+- **`@museumwnf/viewer-layout/dxa/gallery.css`** and **`/dxa/exhibition.css`**:
+  the fonts, the page reset, the 1350px page column with its sticky header
+  and menu grid, and the family's theme — every `--mwnf-*` token the family
+  sets, read from the palette. A site imports its family's stylesheet after
+  `style.css` and before its own theme, so that its own values win:
+
+  ```js
+  import '@museumwnf/viewer-layout/style.css'
+  import '@museumwnf/viewer-layout/dxa/gallery.css'
+  import '../theme/tokens.css'
+  import '../theme/overrides.css'
+  ```
+
+  The site's `theme/tokens.css` then holds its palette — legacy's five
+  colours for a gallery (`--theme-dark`, `--theme-medium-dark`,
+  `--theme-medium`, `--theme-light`, `--background-color`), legacy's six for
+  an exhibition (`--main-color`, `--secondary-color`, `--contrast-color` and
+  their `-text-color`s) — and any token that differs from the family's.
+  `theme/overrides.css` stays the escape hatch.
+- **`@museumwnf/viewer-layout/dxa/testing`**: `describeGallerySmoke` and
+  `describeExhibitionSmoke`, the smoke test every site of the family runs.
+  A site's `tests/smoke.test.js` calls its family's with its config, its
+  texts, its package and — for a gallery — the records of its own dataset the
+  tests look for (the function's documentation names each), and may add
+  tests of its own after the call. The suite runs in the site's own Vitest,
+  which processes this package (viewer-core's `defineViewerConfig` inlines
+  it).
+
 ## Theming
 
 Every color, font, spacing, radius comes from a `--mwnf-*` CSS custom property with a neutral fallback. Full list: [`tokens.reference.css`](src/tokens.reference.css) (also exported as `@museumwnf/viewer-layout/tokens.reference.css`) — copy it into your website as `theme/tokens.css` and set values.
 
+**Links read one colour.** Every link takes `--mwnf-link-text`, and
+`--mwnf-link-hover-text` where it changes colour under the pointer. A
+component whose links a site may want different has a token of its own that
+falls back to them — `--mwnf-back-link-color`, `--mwnf-link-list-link-color`,
+`--mwnf-partner-link-color`, `--mwnf-dxa-item-link`,
+`--mwnf-related-media-link-color`, `--mwnf-on-display-link-color`,
+`--mwnf-card-accordion-child-hover-color`. **`--mwnf-color-accent` is a
+surface colour** (active backgrounds, rules, bands) and colours no text: a
+theme can paint its menu or its bands in it without hiding a link.
+
 Below `48rem` the navigation folds its links behind a menu button, the
 `split` banner stacks its two columns, and the banner captions are hidden.
 

package/dist/ItemDetailView-I__hm63H.js

@@ -0,0 +1,298 @@
+import { t as e } from "./chrome-DPuPeWzV.js";
+import { n as t, o as n } from "./TimelineEventList-COjkXEzS.js";
+import { i as r, n as i, o as a, r as o, t as s } from "./OnDisplayIn-Dv8i7uvH.js";
+import { s as c } from "./TimelineResultsView-ChkBn27W.js";
+import { Fragment as l, computed as u, createBlock as d, createCommentVNode as f, createElementBlock as p, createElementVNode as m, createSlots as ee, createTextVNode as h, createVNode as g, guardReactiveProps as _, normalizeClass as v, normalizeProps as y, normalizeStyle as te, openBlock as b, renderList as x, renderSlot as S, toDisplayString as C, unref as w, useSlots as ne, withCtx as T } from "vue";
+import { NotFoundView as re, byId as E, loadEntities as ie, mdInline as D, mdStrip as ae, mwnfLinks as O, partnerView as oe, useDataPackage as se, useI18n as ce, useProjects as le, useSiteConfig as ue } from "@museumwnf/viewer-core";
+//#region src/dxa/ItemDetailView.vue
+var k = {
+	key: 0,
+	class: "mwnf-sheet-source"
+}, A = {
+	key: 0,
+	class: "mwnf-sheet-source__line"
+}, j = {
+	key: 1,
+	class: "mwnf-sheet-source__collection"
+}, M = ["href"], N = {
+	key: 1,
+	class: "mwnf-sheet-notice"
+}, P = {
+	key: "museum",
+	class: "mwnf-sheet-museum"
+}, F = ["innerHTML"], I = {
+	key: 0,
+	class: "mwnf-sheet-related"
+}, L = {
+	key: 0,
+	class: "mwnf-sheet-related__heading mwnf-sheet-related__heading--caps"
+}, R = {
+	key: 1,
+	class: "mwnf-sheet-related__description"
+}, z = {
+	key: 0,
+	class: "mwnf-sheet-related__references"
+}, B = {
+	key: 2,
+	class: "mwnf-sheet-related__unresolved"
+}, V = {
+	key: 3,
+	class: "mwnf-sheet-related__line"
+}, H = ["href"], U = { key: 7 }, de = { class: "mwnf-sheet-related__heading" }, fe = { key: 8 }, pe = { class: "mwnf-sheet-related__heading" }, me = { class: "mwnf-sheet-related__line" }, he = ["href"], ge = { key: 9 }, _e = { class: "mwnf-sheet-related__heading" }, ve = { class: "mwnf-sheet-related__line" }, ye = ["href"], be = { key: 10 }, xe = { class: "mwnf-sheet-related__heading" }, Se = "sheet.field.", W = {
+	__name: "ItemDetailView",
+	props: {
+		spec: {
+			type: Object,
+			required: !0
+		},
+		id: {
+			type: String,
+			required: !0
+		},
+		entity: {
+			type: String,
+			default: ""
+		},
+		dataGetter: {
+			type: Function,
+			default: null
+		}
+	},
+	setup(W) {
+		let G = W, Ce = ne(), we = /* @__PURE__ */ new Set([
+			"before-sheet",
+			"museum",
+			"related",
+			"aside"
+		]), Te = u(() => Object.keys(Ce).filter((e) => !we.has(e))), Ee = u(() => !G.dataGetter || G.dataGetter(G.id) != null), { t: K } = ce();
+		function De(e) {
+			if (typeof e != "string" || !e.startsWith(Se)) return e;
+			let t = `sheet.dxa.${e.slice(12)}`;
+			return K(t) === t ? e : t;
+		}
+		let q = u(() => Array.isArray(G.spec.fields) ? {
+			...G.spec,
+			fields: G.spec.fields.map((e) => ({
+				...e,
+				label: De(e.label)
+			}))
+		} : G.spec), J = le(), Y = (e, t) => (e.name ?? "").localeCompare(t.name ?? ""), Oe = (e) => (e.gallery_references ?? []).filter((e) => e.kind === "gallery").sort(Y), X = (e) => (e.gallery_references ?? []).filter((e) => e.kind === "exhibition").sort(Y), Z = (e) => J.links(e.project_id)?.artisticIntroductionUrl ?? null, Q = (e) => J.links(e.project_id)?.relatedDatabaseUrl ?? null;
+		function ke(e, t) {
+			if (!e) return null;
+			let n = q.value.sourceDatabase === !1 ? null : q.value.sourceDatabase ?? null, r = null;
+			if (n) {
+				let i = n.chipClass ? n.chipClass(e, t) : null, a = J.label(e.project_id);
+				(i || a) && (r = {
+					chipClass: i,
+					name: a,
+					label: K(n.label ?? "record.sheet.sourceDatabase")
+				});
+			}
+			let i = n && n.addToCollection !== !1 ? K(n.addToCollection?.label ?? "record.action.addToCollection") : null, a = q.value.notice === !1 ? null : q.value.notice ?? null, o = a && a.show(e, t) ? K(a.label) : null;
+			return {
+				source: r,
+				addToCollectionLabel: i,
+				notice: o
+			};
+		}
+		let $ = se(), Ae = E("partners"), je = E("countries");
+		ie(["partners", "countries"]), $.loadTranslations("countries", "en");
+		function Me(e, t) {
+			let n = $.tr("countries", e, t, "en");
+			return ae(n.name ?? je.value?.get(e)?.internal_name ?? "");
+		}
+		function Ne(e) {
+			let t = e.text?.holder ? D(String(e.text.holder)) : "", n = q.value.museum === !1 ? null : q.value.museum ?? null, r = n ? Ae.value?.get(e.record?.partner_id) : null;
+			return {
+				holder: t,
+				view: r ? oe(r, $.tr("partners", r.id, e.language, "en"), {
+					countryLabel: (t) => Me(t, e.language),
+					route: (t) => n.route ? n.route(t.id, e) : null
+				}) : null
+			};
+		}
+		function Pe(e, t) {
+			if (!e) return null;
+			let n = q.value.related ?? {}, r = t.records ?? [], i = t.outside ?? [], a = G.dataGetter ? r.filter((e) => G.dataGetter(e.id) != null) : r, o = G.dataGetter ? r.filter((e) => G.dataGetter(e.id) == null).map((t) => (e.related_items ?? []).find((e) => e.id === t.id)).filter(Boolean) : [], s = [...i, ...o].map((e) => ({
+				...e,
+				name: e.project_id ? J.label(e.project_id) : null,
+				chipClass: n.outsideChip ? n.outsideChip(e, t) : null
+			})), c = (e) => ({
+				id: e.id,
+				label: D(e.name ?? ""),
+				href: e.legacy_host || "",
+				external: !!e.legacy_host
+			}), l = n.onDisplayIn && n.onDisplayIn !== !1 ? {
+				pendingLabel: n.onDisplayIn.linkPendingLabel ?? "",
+				groups: [{
+					heading: "record.related.exhibitions",
+					links: X(e).map(c)
+				}, {
+					heading: "record.related.galleries",
+					links: Oe(e).map(c)
+				}].filter((e) => e.links.length)
+			} : null, u = n.databaseLabel && Q(e) ? {
+				url: Q(e),
+				label: K(n.databaseLabel),
+				name: J.label(e.project_id)
+			} : null, d = n.overallDatabase && n.overallDatabase !== !1 ? {
+				label: K(n.overallDatabase.label),
+				linkLabel: K(n.overallDatabase.linkLabel)
+			} : null;
+			return {
+				title: n.title ? K(n.title) : "",
+				description: n.description ? K(n.description) : "",
+				heading: K(n.heading ?? "record.related.items"),
+				variant: n.variant ?? "grid",
+				actionLabel: n.actionLabel ? K(n.actionLabel) : "",
+				inPackage: a,
+				references: s,
+				notInPackageLabel: n.notInPackageLabel ? K(n.notInPackageLabel) : "",
+				artisticIntroduction: n.artisticIntroductionLabel && Z(e) ? {
+					url: Z(e),
+					label: K(n.artisticIntroductionLabel)
+				} : null,
+				timeline: n.timeline ? n.timeline(e, t) : null,
+				glossary: n.glossary !== !1,
+				dynasties: n.dynasties ? n.dynasties(e, t.language, t) : null,
+				media: n.media === !1 ? [] : e.media ?? [],
+				onDisplayIn: l,
+				database: u,
+				overallDatabase: d,
+				download: n.download === !1 ? null : {
+					label: K("record.action.download"),
+					pdfLabel: K("record.action.downloadPdf")
+				}
+			};
+		}
+		let Fe = ue(), Ie = u(() => {
+			let t = e(Fe.chrome, "world.png");
+			return t ? { "--mwnf-dxa-glossary-image": `url("${t}")` } : null;
+		});
+		function Le() {
+			window.print();
+		}
+		return (e, u) => Ee.value ? (b(), d(c, {
+			key: 0,
+			spec: q.value,
+			id: W.id,
+			entity: W.entity,
+			style: te(Ie.value)
+		}, ee({
+			"before-sheet": T((t) => [S(e.$slots, "before-sheet", y(_(t)), () => [(b(!0), p(l, null, x([ke(t.record, t)], (e) => (b(), p(l, { key: "before-sheet" }, [e?.source || e?.addToCollectionLabel ? (b(), p("div", k, [e.source ? (b(), p("p", A, [e.source.chipClass ? (b(), p("span", {
+				key: 0,
+				class: v(["mwnf-chip", e.source.chipClass]),
+				"aria-hidden": "true"
+			}, null, 2)) : f("", !0), e.source.name ? (b(), p(l, { key: 1 }, [h(C(e.source.label) + ": " + C(e.source.name), 1)], 64)) : f("", !0)])) : f("", !0), e.addToCollectionLabel ? (b(), p("p", j, [m("a", {
+				href: w(O).myCollection,
+				target: "_blank",
+				rel: "noopener"
+			}, "↗ " + C(e.addToCollectionLabel), 9, M)])) : f("", !0)])) : f("", !0), e?.notice ? (b(), p("div", N, [h(C(e.notice) + " ", 1), m("strong", null, [m("em", null, C(t.languages.map((e) => e.label).join(", ")), 1)])])) : f("", !0)], 64))), 128))])]),
+			museum: T((n) => [S(e.$slots, "museum", y(_(n)), () => [(b(!0), p(l, null, x([Ne(n)], (e) => (b(), p("div", P, [e.holder ? (b(), p("p", {
+				key: 0,
+				class: "mwnf-sheet-museum__holder",
+				innerHTML: e.holder
+			}, null, 8, F)) : f("", !0), e.view ? (b(), d(t, {
+				key: 1,
+				variant: "summary",
+				partner: e.view,
+				label: "partner.info.about",
+				dir: n.dir
+			}, null, 8, ["partner", "dir"])) : f("", !0)]))), 128))])]),
+			related: T(() => []),
+			aside: T((t) => [S(e.$slots, "related", y(_(t)), () => [(b(!0), p(l, null, x([Pe(t.record, t)], (e) => (b(), p(l, { key: t.record?.id ?? "related" }, [e ? (b(), p("div", I, [
+				e.title ? (b(), p("p", L, C(e.title), 1)) : f("", !0),
+				e.description ? (b(), p("p", R, C(e.description), 1)) : f("", !0),
+				e.inPackage.length || e.references.length ? (b(), d(n, {
+					key: 2,
+					heading: e.heading,
+					records: e.inPackage,
+					variant: e.variant,
+					"action-label": e.actionLabel
+				}, {
+					default: T(() => [e.references.length ? (b(), p("ul", z, [(b(!0), p(l, null, x(e.references, (t) => (b(), p("li", { key: t.id }, [
+						t.chipClass ? (b(), p("span", {
+							key: 0,
+							class: v(["mwnf-chip", t.chipClass]),
+							"aria-hidden": "true"
+						}, null, 2)) : f("", !0),
+						t.name ? (b(), p(l, { key: 1 }, [h(C(t.name), 1)], 64)) : f("", !0),
+						e.notInPackageLabel ? (b(), p("span", B, C(e.notInPackageLabel), 1)) : f("", !0)
+					]))), 128))])) : f("", !0)]),
+					_: 2
+				}, 1032, [
+					"heading",
+					"records",
+					"variant",
+					"action-label"
+				])) : f("", !0),
+				e.artisticIntroduction ? (b(), p("p", V, [m("a", {
+					href: e.artisticIntroduction.url,
+					target: "_blank",
+					rel: "noopener"
+				}, "↗ " + C(e.artisticIntroduction.label), 9, H)])) : f("", !0),
+				e.timeline ? (b(), d(o, {
+					key: t.record.id,
+					info: e.timeline
+				}, null, 8, ["info"])) : f("", !0),
+				e.glossary ? (b(), d(a, {
+					key: 5,
+					language: t.language,
+					dir: t.dir
+				}, null, 8, ["language", "dir"])) : f("", !0),
+				e.dynasties?.records?.length ? (b(), d(r, {
+					key: 6,
+					heading: w(K)("record.dynasty.list"),
+					dynasties: e.dynasties.records,
+					tr: e.dynasties.tr,
+					dir: t.dir
+				}, null, 8, [
+					"heading",
+					"dynasties",
+					"tr",
+					"dir"
+				])) : f("", !0),
+				g(i, {
+					media: e.media,
+					descriptions: !1,
+					dir: t.dir
+				}, null, 8, ["media", "dir"]),
+				e.onDisplayIn?.groups.length ? (b(), p("div", U, [m("p", de, C(w(K)("record.related.onDisplayIn")), 1), g(s, {
+					heading: "",
+					groups: e.onDisplayIn.groups,
+					"pending-label": e.onDisplayIn.pendingLabel,
+					dir: t.dir
+				}, null, 8, [
+					"groups",
+					"pending-label",
+					"dir"
+				])])) : f("", !0),
+				e.database ? (b(), p("div", fe, [m("p", pe, C(e.database.label), 1), m("p", me, [m("a", {
+					href: e.database.url,
+					target: "_blank",
+					rel: "noopener"
+				}, "↗ " + C(e.database.name), 9, he)])])) : f("", !0),
+				e.overallDatabase ? (b(), p("div", ge, [m("p", _e, C(e.overallDatabase.label), 1), m("p", ve, [m("a", {
+					href: w(O).overallDatabase,
+					target: "_blank",
+					rel: "noopener"
+				}, "↗ " + C(e.overallDatabase.linkLabel), 9, ye)])])) : f("", !0),
+				e.download ? (b(), p("div", be, [m("p", xe, C(e.download.label), 1), m("p", {
+					class: "mwnf-sheet-related__line mwnf-sheet-related__line--action",
+					onClick: Le
+				}, "➤ " + C(e.download.pdfLabel), 1)])) : f("", !0)
+			])) : f("", !0)], 64))), 128))])]),
+			_: 2
+		}, [x(Te.value, (t) => ({
+			name: t,
+			fn: T((n) => [S(e.$slots, t, y(_(n)))])
+		}))]), 1032, [
+			"spec",
+			"id",
+			"entity",
+			"style"
+		])) : (b(), d(w(re), { key: 1 }));
+	}
+};
+//#endregion
+export { W as t };