@asd20/ui-next 2.30.0 → 2.31.0

package/src/components/atoms/Asd20RichBodyContent/messageDocumentRenderer.js

@@ -1,3 +1,10 @@
+import {
+  buildHeadingIdPlan,
+  createHeadingSession,
+  contextualAccordionItemKey,
+  normalizeHeadingContext,
+} from './headingContext'
+
 const MESSAGE_DOCUMENT_SCHEMA_VERSION = 1
 
 export const BODY_JSON_FORMAT = Object.freeze({
@@ -690,7 +697,7 @@ function attribute(name, value, preserveEmpty = false) {
     : ` ${name}="${escapeHtml(value)}"`
 }
 
-function renderMarkedText(node) {
+function renderMarkedText(node, context, path) {
   let html = escapeHtml(node.text)
   const marks = [...(node.marks || [])].sort(
     (left, right) =>
@@ -705,7 +712,7 @@ function renderMarkedText(node) {
     else if (mark.type === 'subscript') html = `<sub>${html}</sub>`
     else if (mark.type === 'superscript') html = `<sup>${html}</sup>`
     else if (mark.type === 'link') {
-      html = `<a${attribute('href', mark.attrs.href)}${attribute(
+      html = `<a${attribute('href', context ? context.href(mark.attrs.href, `${path}-link`) : mark.attrs.href)}${attribute(
         'target',
         mark.attrs.target
       )}${attribute('rel', mark.attrs.rel)}${attribute(
@@ -717,11 +724,19 @@ function renderMarkedText(node) {
   return html
 }
 
-function renderChildren(node) {
-  return (node.content || []).map(renderStandardNode).join('')
+function renderChildren(node, context, path, accordionItemId) {
+  return (node.content || []).map((child, index) =>
+    renderStandardNode(child, context, `${path}-${index}`, accordionItemId)
+  ).join('')
+}
+
+function canonicalHeadingLabel(node) {
+  if (node.type === 'text') return node.text
+  if (node.type === 'hardBreak') return ' '
+  return (node.content || []).map(canonicalHeadingLabel).join('')
 }
 
-function renderTableCell(node, tagName) {
+function renderTableCell(node, tagName, context, path, accordionItemId) {
   const colspan = node.attrs?.colspan ?? 1
   const rowspan = node.attrs?.rowspan ?? 1
   const colwidth = node.attrs?.colwidth
@@ -734,10 +749,10 @@ function renderTableCell(node, tagName) {
     Array.isArray(colwidth) ? attribute('colwidth', colwidth.join(',')) : ''
   }${align ? attribute('style', `text-align: ${align}`) : ''}${
     scope ? attribute('scope', scope) : ''
-  }>${renderChildren(node)}</${tagName}>`
+  }>${renderChildren(node, context, path, accordionItemId)}</${tagName}>`
 }
 
-function renderTable(node) {
+function renderTable(node, context, path, accordionItemId) {
   const minimumWidth = 25
   const firstRow = node.content[0]
   const columns = firstRow.content.flatMap(cell => {
@@ -767,7 +782,7 @@ function renderTable(node) {
     'style',
     tableStyle
   )}>${caption}<colgroup>${colgroup}</colgroup><tbody>${renderChildren(
-    node
+    node, context, path, accordionItemId
   )}</tbody></table></div>`
 }
 
@@ -782,34 +797,41 @@ function renderImage(attrs, className = '') {
   )}${attribute('height', attrs.height)}>`
 }
 
-function renderStandardNode(node) {
-  if (node.type === 'text') return renderMarkedText(node)
+function renderStandardNode(node, context, path, accordionItemId) {
+  if (node.type === 'text') return renderMarkedText(node, context, path)
   if (node.type === 'hardBreak') return '<br>'
-  if (node.type === 'paragraph') return `<p>${renderChildren(node)}</p>`
+  if (node.type === 'paragraph') return `<p>${renderChildren(node, context, path, accordionItemId)}</p>`
   if (node.type === 'heading') {
-    return `<h${node.attrs.level}>${renderChildren(node)}</h${
+    if (context) {
+      const descriptor = context.heading({
+        authoredLevel: node.attrs.level, label: canonicalHeadingLabel(node),
+        sourcePath: path, accordionItemId,
+      })
+      return `<h${descriptor.renderedLevel}${attribute('id', descriptor.id)}>${renderChildren(node, context, path, accordionItemId)}</h${descriptor.renderedLevel}>`
+    }
+    return `<h${node.attrs.level}>${renderChildren(node, context, path, accordionItemId)}</h${
       node.attrs.level
     }>`
   }
   if (node.type === 'blockquote') {
-    return `<blockquote>${renderChildren(node)}</blockquote>`
+    return `<blockquote>${renderChildren(node, context, path, accordionItemId)}</blockquote>`
   }
   if (node.type === 'codeBlock') {
     const languageClass = node.attrs?.language
       ? attribute('class', `language-${node.attrs.language}`)
       : ''
-    return `<pre><code${languageClass}>${renderChildren(node)}</code></pre>`
+    return `<pre><code${languageClass}>${renderChildren(node, context, path, accordionItemId)}</code></pre>`
   }
   if (node.type === 'horizontalRule') return '<hr>'
-  if (node.type === 'bulletList') return `<ul>${renderChildren(node)}</ul>`
+  if (node.type === 'bulletList') return `<ul>${renderChildren(node, context, path, accordionItemId)}</ul>`
   if (node.type === 'orderedList') {
     const start = node.attrs?.start
     const type = node.attrs?.type
     return `<ol${start && start !== 1 ? attribute('start', start) : ''}${
       type && type !== '1' ? attribute('type', type) : ''
-    }>${renderChildren(node)}</ol>`
+    }>${renderChildren(node, context, path, accordionItemId)}</ol>`
   }
-  if (node.type === 'listItem') return `<li>${renderChildren(node)}</li>`
+  if (node.type === 'listItem') return `<li>${renderChildren(node, context, path, accordionItemId)}</li>`
   if (node.type === 'image') {
     return renderImage(node.attrs, 'asd20-message-image')
   }
@@ -844,10 +866,10 @@ function renderStandardNode(node) {
         : ''
     }</div>`
   }
-  if (node.type === 'table') return renderTable(node)
-  if (node.type === 'tableRow') return `<tr>${renderChildren(node)}</tr>`
-  if (node.type === 'tableCell') return renderTableCell(node, 'td')
-  if (node.type === 'tableHeader') return renderTableCell(node, 'th')
+  if (node.type === 'table') return renderTable(node, context, path, accordionItemId)
+  if (node.type === 'tableRow') return `<tr>${renderChildren(node, context, path, accordionItemId)}</tr>`
+  if (node.type === 'tableCell') return renderTableCell(node, 'td', context, path, accordionItemId)
+  if (node.type === 'tableHeader') return renderTableCell(node, 'th', context, path, accordionItemId)
   return ''
 }
 
@@ -878,47 +900,87 @@ function buildLegacyRenderNodes(bodyHtml, blocks) {
   return nodes
 }
 
-function accordionToRenderBlock(node) {
+function accordionToRenderBlock(node, context, path) {
   return {
     id: node.attrs?.blockId || '',
     type: 'accordion',
-    items: node.content.map(item => {
-      const isTableau = item.content[0]?.type === 'tableauBlock'
-      return isTableau
-        ? {
-            id: item.attrs?.itemId || '',
-            heading: item.attrs?.heading || '',
-            opened: Boolean(item.attrs?.opened),
-            contentType: 'tableau',
-            tableau: { ...item.content[0].attrs },
-          }
-        : {
-            id: item.attrs?.itemId || '',
-            heading: item.attrs?.heading || '',
-            opened: Boolean(item.attrs?.opened),
-            contentType: 'text',
-            bodyHtml: item.content.map(renderStandardNode).join(''),
-          }
+    items: node.content.map((item, index) => {
+      const renderItem = () => {
+        const itemPath = `${path}-${index}`
+        const contextual = context ? contextualAccordionHeading(context, item.attrs?.heading || '', itemPath) : {}
+        const isTableau = item.content[0]?.type === 'tableauBlock'
+        return isTableau
+          ? {
+              id: item.attrs?.itemId || '',
+              heading: item.attrs?.heading || '',
+              ...contextual,
+              opened: Boolean(item.attrs?.opened),
+              contentType: 'tableau',
+              tableau: { ...item.content[0].attrs },
+            }
+          : {
+              id: item.attrs?.itemId || '',
+              heading: item.attrs?.heading || '',
+              ...contextual,
+              opened: Boolean(item.attrs?.opened),
+              contentType: 'text',
+              bodyHtml: item.content.map((child, childIndex) => renderStandardNode(
+                child, context, `${itemPath}-${childIndex}`, context ? itemPath : null
+              )).join(''),
+            }
+      }
+      return context ? context.scope(renderItem) : renderItem()
     }),
   }
 }
 
-function buildTiptapRenderNodes(messageDocument) {
+function contextualAccordionHeading(context, label, path) {
+  const descriptor = context.heading({
+    authoredLevel: 3, label, sourcePath: `${path}-heading`,
+    kind: 'accordion-item', accordionItemId: path,
+  })
+  const panel = context.anchor(`${path}-panel`, null,
+    `${context.context.idPrefix || 'body'}-${path}-panel`, 'panel')
+  return {
+    [contextualAccordionItemKey]: true,
+    headingContextApplied: true,
+    headingTag: `h${descriptor.renderedLevel}`,
+    headingId: descriptor.id,
+    contentId: panel.id,
+    headingDescriptor: descriptor,
+  }
+}
+
+function contextualLegacyAccordion(block, context, path) {
+  return {
+    ...block,
+    items: (Array.isArray(block.items) ? block.items : []).map((item, index) => context.scope(() => {
+      if (item?.[contextualAccordionItemKey]) return item
+      const itemPath = `${path}-item-${index}`
+      const contextual = contextualAccordionHeading(context, item?.heading || '', itemPath)
+      const body = context.html(item?.bodyHtml || '', `${itemPath}-body`, null, itemPath)
+      return { ...item, ...contextual, bodyHtml: body.html }
+    })),
+  }
+}
+
+function buildTiptapRenderNodes(messageDocument, context) {
   const nodes = []
   let standardContent = []
   const flushStandardContent = () => {
     if (!standardContent.length) return
     nodes.push({
       type: 'html',
-      html: standardContent.map(renderStandardNode).join(''),
+      html: standardContent.map(({ node, path }) => renderStandardNode(node, context, path)).join(''),
     })
     standardContent = []
   }
 
-  messageDocument.content.forEach(node => {
+  messageDocument.content.forEach((node, index) => {
+    const path = `node-${index}`
     if (node.type === 'accordionBlock') {
       flushStandardContent()
-      nodes.push({ type: 'accordion', block: accordionToRenderBlock(node) })
+      nodes.push({ type: 'accordion', block: accordionToRenderBlock(node, context, path) })
     } else if (node.type === 'tableauBlock') {
       flushStandardContent()
       nodes.push({
@@ -930,7 +992,7 @@ function buildTiptapRenderNodes(messageDocument) {
         },
       })
     } else {
-      standardContent.push(node)
+      standardContent.push({ node, path })
     }
   })
   flushStandardContent()
@@ -954,7 +1016,7 @@ export function containsBodyBlockPlaceholder(html) {
   return new RegExp(LEGACY_PLACEHOLDER_PATTERN).test(html)
 }
 
-export function buildRichBodyRenderModel({
+function buildBaseRichBodyRenderModel({
   bodyContent = '',
   bodyJson = '',
 } = {}) {
@@ -996,3 +1058,95 @@ export function buildRichBodyRenderModel({
     nodes: buildTiptapRenderNodes(detected.value),
   }
 }
+
+function renderContextualBody(input, baseModel, session) {
+  if (baseModel.status === MESSAGE_DOCUMENT_STATUS.SUPPORTED) {
+    const { parsed } = parseBodyJson(input.bodyJson)
+    const nodes = buildTiptapRenderNodes(parsed, session)
+    return { ...baseModel, nodes, initialNodes: nodes }
+  }
+  const blocks = baseModel.status === MESSAGE_DOCUMENT_STATUS.LEGACY ? baseModel.blocks : []
+  const blockMap = new Map(blocks.map(block => [block.id, block]))
+  const transformed = session.html(input.bodyContent || '', 'body', (type, id, path) => {
+    const block = blockMap.get(id)
+    if (!block || block.type !== type) return null
+    if (type === 'accordion') {
+      return { type, block: contextualLegacyAccordion(block, session, `html-body-block-${path}`) }
+    }
+    return type === 'tableau' ? { type, block: { ...block } } : null
+  })
+  return {
+    ...baseModel,
+    nodes: transformed.nodes,
+    initialNodes: transformed.html ? [{ type: 'html', html: transformed.html }] : [],
+  }
+}
+
+function finalizeContextualModel(render, context, suppliedPlan = null) {
+  let plan = suppliedPlan || context.idPlan
+  if (!plan) {
+    const draft = createHeadingSession(context)
+    render(draft)
+    plan = buildHeadingIdPlan([draft], context.reservedIds || [])
+  }
+  const session = createHeadingSession({ ...context, idPlan: plan })
+  const model = render(session)
+  const prefix = context.idPrefix || 'body'
+  if (!suppliedPlan && !context.idPlan) session.report('document-heading-plan-unavailable', prefix)
+  const planDiagnostics = plan.diagnostics.filter(row => row.sourceKey.startsWith(`${prefix}:`))
+  for (const descriptor of session.headings) {
+    descriptor.diagnostics.push(...planDiagnostics.filter(row => row.sourceKey === descriptor.key).map(row => row.code))
+  }
+  return {
+    ...model, headings: session.headings,
+    headingDiagnostics: [...session.diagnostics, ...planDiagnostics],
+    headingContextApplied: true,
+    documentHeadingPlanAvailable: Boolean(suppliedPlan || context.idPlan),
+  }
+}
+
+export function buildRichBodyRenderModel(input = {}) {
+  const baseModel = buildBaseRichBodyRenderModel(input)
+  const context = normalizeHeadingContext(input.headingContext)
+  if (!context.active) {
+    return { ...baseModel, headings: [], headingDiagnostics: [], headingContextApplied: false }
+  }
+  return finalizeContextualModel(session => renderContextualBody(input, baseModel, session), context)
+}
+
+// This prepass is deliberately independent of Vue instances and mounted topics.
+export function buildPublicationHeadingModels({ bodies = [], reservedIds = [], documentUrl } = {}) {
+  const prefixes = new Set()
+  const prepared = bodies.map(body => {
+    const prefix = body.headingIdPrefix
+    if (typeof prefix !== 'string' || !prefix || prefixes.has(prefix)) {
+      throw new TypeError('Publication bodies require unique, nonempty headingIdPrefix values.')
+    }
+    prefixes.add(prefix)
+    const context = normalizeHeadingContext({
+      levelOffset: body.headingLevelOffset === undefined ? 0 : body.headingLevelOffset,
+      idPrefix: prefix, documentUrl,
+    })
+    const baseModel = buildBaseRichBodyRenderModel(body)
+    const render = session => renderContextualBody(body, baseModel, session)
+    const session = createHeadingSession(context)
+    render(session)
+    return { context, render, session }
+  })
+  const idPlan = buildHeadingIdPlan(prepared.map(row => row.session), reservedIds)
+  const models = prepared.map(row => finalizeContextualModel(row.render, row.context, idPlan))
+  return {
+    idPlan, models,
+    headings: models.flatMap(model => model.headings),
+    headingDiagnostics: models.flatMap(model => model.headingDiagnostics),
+  }
+}
+
+export function buildBodyAccordionRenderModel({ items = [], headingContext = {} } = {}) {
+  const context = normalizeHeadingContext(headingContext)
+  if (!context.active) return { items, headingContextApplied: false }
+  if (items.every(item => item?.[contextualAccordionItemKey])) return { items, headingContextApplied: true }
+  return finalizeContextualModel(session => ({
+    items: contextualLegacyAccordion({ items }, session, 'accordion').items,
+  }), context)
+}

package/src/components/molecules/Asd20Accordion/index.vue

@@ -9,7 +9,7 @@
     >
       <component
         :is="tag"
-        :id="headingId"
+        :id="resolvedHeadingId"
         class="asd20-accordion__heading"
       >
         <span
@@ -32,10 +32,10 @@
         static
       />
       <asd20-button
-        :aria-labelledby="headingId"
-        :aria-controls="contentId"
-        :aria-expanded="open"
-        :icon-angle="open ? 180 : 90"
+        :aria-labelledby="resolvedHeadingId"
+        :aria-controls="resolvedContentId"
+        :aria-expanded="isOpen"
+        :icon-angle="isOpen ? 180 : 90"
         icon="chevron"
         size="sm"
         transparent
@@ -44,12 +44,12 @@
     </div>
 
     <div
-      :id="contentId"
+      :id="resolvedContentId"
       ref="content"
-      :aria-hidden="open ? 'false' : 'true'"
-      :inert="open ? null : ''"
+      :aria-hidden="isOpen ? 'false' : 'true'"
+      :inert="isOpen ? null : ''"
       :class="{
-        'asd20-accordion__content--open': open,
+        'asd20-accordion__content--open': isOpen,
       }"
       class="asd20-accordion__content"
     >
@@ -70,6 +70,7 @@
 import Asd20Badge from '../../atoms/Asd20Badge'
 import Asd20Button from '../../atoms/Asd20Button'
 import Asd20Viewport from '../../atoms/Asd20Viewport'
+import { registerDocumentPrintBlock } from '../../../helpers/documentPrint'
 import createComponentInstanceId from '../../../utils/createComponentInstanceId'
 
 const FOCUSABLE_SELECTOR = [
@@ -88,6 +89,8 @@ export default {
     tag: { type: String, default: 'h3' },
     label: { type: String, default: '' },
     heading: { type: String, default: '' },
+    headingId: { type: String, default: '' },
+    contentId: { type: String, default: '' },
     description: { type: String, default: '' },
     badge: { type: Number, default: -1 },
     opened: { type: Boolean, default: false },
@@ -99,14 +102,16 @@ export default {
   },
   data: () => ({
     open: false,
+    printExpanded: false,
     instanceId: createComponentInstanceId('accordion'),
   }),
   computed: {
-    headingId() {
-      return `${this.instanceId}-heading`
+    isOpen() { return this.open || this.printExpanded },
+    resolvedHeadingId() {
+      return this.headingId || `${this.instanceId}-heading`
     },
-    contentId() {
-      return `${this.instanceId}-content`
+    resolvedContentId() {
+      return this.contentId || `${this.instanceId}-content`
     },
     classes() {
       return {
@@ -119,15 +124,34 @@ export default {
     this.open = this.opened
   },
   mounted() {
+    this.unregisterPrintBlock = registerDocumentPrintBlock(this.$el, () => {
+      this.printExpanded = true
+      this.syncPrintSemantics()
+      return () => {
+        this.printExpanded = false
+        this.syncPrintSemantics()
+      }
+    })
     this.syncCollapsedContentInteractivity()
   },
   updated() {
     this.syncCollapsedContentInteractivity()
   },
   beforeUnmount() {
+    this.unregisterPrintBlock?.()
     this.restoreCollapsedContentInteractivity()
   },
   methods: {
+    syncPrintSemantics() {
+      // beforeprint is synchronous: update accessibility state before Vue's tick.
+      const panel = this.$refs.content
+      panel?.setAttribute('aria-hidden', this.isOpen ? 'false' : 'true')
+      if (this.isOpen) panel?.removeAttribute('inert')
+      else panel?.setAttribute('inert', '')
+      panel?.classList.toggle('asd20-accordion__content--open', this.isOpen)
+      this.$el.querySelector('[aria-controls]')?.setAttribute('aria-expanded', String(this.isOpen))
+      this.syncCollapsedContentInteractivity()
+    },
     toggleOpen: function() {
       this.open = !this.open
       if (this.open) this.$emit('open')
@@ -140,7 +164,7 @@ export default {
       const focusableElements = content.querySelectorAll(FOCUSABLE_SELECTOR)
 
       focusableElements.forEach(element => {
-        if (this.open) {
+        if (this.isOpen) {
           if (!Object.prototype.hasOwnProperty.call(element.dataset, 'accordionOriginalTabindex')) {
             return
           }

package/src/components/molecules/Asd20BodyAccordion/index.vue

@@ -5,9 +5,12 @@
   >
     <asd20-accordion
       v-for="item in normalizedItems"
-      :key="item.id"
+      :key="item.headingId || item.id"
       :heading="item.heading"
       :opened="item.opened"
+      :tag="item.headingTag || 'h3'"
+      :heading-id="item.headingId || ''"
+      :content-id="item.contentId || ''"
       class="asd20-body-accordion__item"
     >
       <div
@@ -30,13 +33,21 @@
 <script>
 import Asd20Accordion from '../Asd20Accordion'
 import Asd20TableauEmbed from '../Asd20TableauEmbed'
+import { buildBodyAccordionRenderModel } from '../../atoms/Asd20RichBodyContent/messageDocumentRenderer'
+import { publicationHeadingPlanKey } from '../../atoms/Asd20RichBodyContent/headingContext'
 
 export default {
   name: 'Asd20BodyAccordion',
 
   components: { Asd20Accordion, Asd20TableauEmbed },
 
+  inject: {
+    publicationHeadingPlan: { from: publicationHeadingPlanKey, default: null },
+  },
+
   props: {
+    headingLevelOffset: { type: Number, default: 0 },
+    headingIdPrefix: { type: String, default: '' },
     items: {
       type: Array,
       default: () => [],
@@ -45,10 +56,20 @@ export default {
 
   computed: {
     normalizedItems() {
-      return (Array.isArray(this.items) ? this.items : [])
+      const model = buildBodyAccordionRenderModel({
+        items: Array.isArray(this.items) ? this.items : [],
+        headingContext: {
+          levelOffset: this.headingLevelOffset, idPrefix: this.headingIdPrefix,
+          idPlan: this.publicationHeadingPlan?.(),
+        },
+      })
+      return model.items
         .map((item, index) => ({
           id: item?.id || `accordion-item-${index}`,
           heading: item?.heading || '',
+          headingTag: model.headingContextApplied ? item?.headingTag || '' : '',
+          headingId: model.headingContextApplied ? item?.headingId || '' : '',
+          contentId: model.headingContextApplied ? item?.contentId || '' : '',
           contentType: item?.contentType === 'tableau' ? 'tableau' : 'text',
           bodyHtml: item?.bodyHtml || '',
           opened: Boolean(item?.opened),

package/src/components/molecules/Asd20PrintContents/index.vue

@@ -0,0 +1,42 @@
+<template>
+  <nav
+    class="asd20-print-contents asd20-print-only"
+    :aria-label="label"
+  >
+    <p class="asd20-print-contents__label">
+      {{ label }}
+    </p>
+    <ol>
+      <li
+        v-for="heading in entries"
+        :key="heading.id"
+        :style="{ marginInlineStart: `${Math.max(0, heading.renderedLevel - 2)}em` }"
+      >
+        <a :href="`#${heading.id}`">
+          <span>{{ heading.label }}</span>
+          <span
+            class="asd20-print-contents__page"
+            :data-asd20-toc-target="heading.id"
+          />
+        </a>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+export default {
+  name: 'Asd20PrintContents',
+  props: {
+    headings: { type: Array, default: () => [] },
+    label: { type: String, default: 'Contents' },
+  },
+  computed: {
+    entries() { return this.headings.filter(heading => heading.id && heading.label) },
+  },
+}
+</script>
+
+<style>
+.asd20-print-only { display: none; }
+</style>

package/src/components/molecules/Asd20PrintHeader/index.vue

@@ -0,0 +1,54 @@
+<template>
+  <header class="asd20-print-header asd20-print-only">
+    <h1 v-if="title">
+      {{ title }}
+    </h1>
+    <p v-if="organizationTitle">
+      {{ organizationTitle }}
+    </p>
+    <p v-if="academicYear">
+      Academic year: {{ academicYear }}
+    </p>
+    <p v-if="editorialRevisedAt">
+      Content revised: {{ editorialRevisedAt }}
+    </p>
+    <p
+      data-asd20-print-generated-at
+      :data-asd20-print-fixed-generated-at="generatedAt || undefined"
+    >
+      Generated: {{ formattedGeneratedAt }}
+    </p>
+    <p v-if="canonicalUrl">
+      The online document remains authoritative:
+      <a :href="canonicalUrl">{{ canonicalUrl }}</a>
+    </p>
+  </header>
+</template>
+
+<script>
+export default {
+  name: 'Asd20PrintHeader',
+  props: {
+    // Leave empty when the host already owns its document H1.
+    title: { type: String, default: '' },
+    organizationTitle: { type: String, default: '' },
+    academicYear: { type: String, default: '' },
+    editorialRevisedAt: { type: String, default: '' },
+    generatedAt: { type: String, default: '' },
+    canonicalUrl: { type: String, default: '' },
+  },
+  computed: {
+    formattedGeneratedAt() {
+      if (!this.generatedAt) return ''
+      const date = new Date(this.generatedAt)
+      return Number.isNaN(date.getTime()) ? this.generatedAt : new Intl.DateTimeFormat('en-US', {
+        timeZone: 'America/Denver', dateStyle: 'medium', timeStyle: 'long',
+      }).format(date)
+    },
+  },
+}
+</script>
+
+<style>
+.asd20-print-only { display: none; }
+</style>