@asd20/ui-next 2.35.4 → 2.36.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+# [2.36.0](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.35.4...ui-next-v2.36.0) (2026-11-10)
+
+
+### Features
+
+* resolve public live message fields and team rosters ([09beb75](https://github.com/academydistrict20/asd20-ui-next/commit/09beb75f45ef323a65ecf718a3e21b71c3807869))
+
 ## [2.35.4](https://github.com/academydistrict20/asd20-ui-next/compare/ui-next-v2.35.3...ui-next-v2.35.4) (2026-11-09)
 
 

package/helpers.js

@@ -1,4 +1,5 @@
 export { default as arraySearch } from './src/helpers/arraySearch.js'
+export { LIVE_DATA_VERSION, LIVE_DATA_FIELDS, collectLiveDataReferences, resolveLiveDataDocument, fetchLiveDataSnapshot } from './src/helpers/liveMessageData.js'
 export { buildPublicationIntroduction } from './src/helpers/publicationIntroduction.js'
 export { prepareDocumentPrint, printDocument, installDocumentPrintLifecycle } from './src/helpers/documentPrint.js'
 export { default as buildFileSearchUrl } from './src/helpers/buildFileSearchUrl.js'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asd20/ui-next",
-  "version": "2.35.4",
+  "version": "2.36.0",
   "private": false,
   "description": "ASD20 UI component library for Vue 3.",
   "license": "MIT",

package/src/components/atoms/Asd20RichBodyContent/index.vue

@@ -5,6 +5,17 @@
     :data-message-document-status="renderModel.status"
     @click="onContentClick"
   >
+    <p
+      v-if="liveDataError && !liveDataProvider"
+      role="status"
+    >
+      {{ liveDataError }} <button
+        type="button"
+        @click="refreshLiveMessageData"
+      >
+        Retry
+      </button>
+    </p>
     <template v-for="(node, index) in renderNodes">
       <div
         v-if="node.type === 'html' && node.html"
@@ -50,11 +61,13 @@ import {
   containsBodyBlockPlaceholder,
 } from './messageDocumentRenderer'
 import { publicationHeadingPlanKey } from './headingContext'
+import { liveMessageDataMixin } from '../../../helpers/liveMessageDataRuntime'
 
 export default {
   name: 'Asd20RichBodyContent',
 
   components: { Asd20BodyAccordion, Asd20TableauEmbed },
+  mixins: [liveMessageDataMixin],
 
   inject: {
     publicationHeadingPlan: { from: publicationHeadingPlanKey, default: null },
@@ -74,10 +87,11 @@ export default {
   }),
 
   computed: {
+    liveDataDocuments() { return [this.bodyJson] },
     renderModel() {
       return buildRichBodyRenderModel({
         bodyContent: this.bodyContent,
-        bodyJson: this.bodyJson,
+        bodyJson: this.projectLiveMessageData(this.bodyJson),
         headingContext: {
           levelOffset: this.headingLevelOffset,
           idPrefix: this.headingIdPrefix,

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

@@ -4,6 +4,7 @@ import {
   contextualAccordionItemKey,
   normalizeHeadingContext,
 } from './headingContext.js'
+import { validateLiveDataReference, liveDataLabel } from '../../../helpers/liveMessageData.js'
 
 const MESSAGE_DOCUMENT_SCHEMA_VERSION = 1
 
@@ -24,8 +25,9 @@ export const MESSAGE_DOCUMENT_STATUS = Object.freeze({
 const LEGACY_PLACEHOLDER_PATTERN =
   /<div\b(?=[^>]*\bdata-cc-block=(['"])([^'"]+)\1)(?=[^>]*\bdata-block-id=(['"])([^'"]+)\3)[^>]*><\/div>/gi
 
-const INLINE_NODE_TYPES = new Set(['text', 'hardBreak'])
+const INLINE_NODE_TYPES = new Set(['text', 'hardBreak', 'liveDataField'])
 const STANDARD_BLOCK_NODE_TYPES = new Set([
+  'liveDataBlock',
   'paragraph',
   'heading',
   'blockquote',
@@ -94,6 +96,8 @@ const MARK_RENDER_ORDER = Object.freeze({
   superscript: 6,
 })
 const NODE_ATTRIBUTE_NAMES = Object.freeze({
+  liveDataField: ['source', 'sourceId', 'field'],
+  liveDataBlock: ['source', 'sourceId', 'field'],
   doc: ['schemaVersion'],
   text: [],
   hardBreak: [],
@@ -425,6 +429,9 @@ function validateNode(node, path) {
   }
   const attributeIssue = validateAttributeNames(node, path)
   if (attributeIssue) return attributeIssue
+  if (node.type === 'liveDataField' || node.type === 'liveDataBlock') {
+    return validateLiveDataReference(node) ? null : issue('invalid-live-data', path)
+  }
 
   if (node.type === 'doc') {
     if (node.attrs?.schemaVersion !== MESSAGE_DOCUMENT_SCHEMA_VERSION) {
@@ -799,6 +806,10 @@ function renderImage(attrs, className = '') {
 }
 
 function renderStandardNode(node, context, path, accordionItemId) {
+  if (node.type === 'liveDataField' || node.type === 'liveDataBlock') {
+    const tag = node.type === 'liveDataField' ? 'span' : 'div'
+    return `<${tag} class="asd20-live-data-unavailable">${escapeHtml(liveDataLabel(node.attrs))} is currently unavailable.</${tag}>`
+  }
   if (node.type === 'text') return renderMarkedText(node, context, path)
   if (node.type === 'hardBreak') return '<br>'
   if (node.type === 'paragraph') return `<p>${renderChildren(node, context, path, accordionItemId)}</p>`

package/src/components/templates/Asd20HandbookTemplate/index.vue

@@ -146,6 +146,17 @@
         aria-label="Handbook topics"
       >
         <slot name="sidebar-status" />
+        <p
+          v-if="liveDataError && !liveDataManaged"
+          role="status"
+        >
+          {{ liveDataError }} <button
+            type="button"
+            @click="refreshLiveMessageData"
+          >
+            Retry
+          </button>
+        </p>
         <button
           class="asd20-template-handbook__index-toggle"
           type="button"
@@ -287,6 +298,7 @@ import { installDocumentPrintLifecycle } from '../../../helpers/documentPrint'
 import { shouldHandleClientRoutingEvent } from '../../../helpers/linkPolicy'
 import pageTemplateMixin from '../../../mixins/pageTemplateMixin'
 import { publicationHeadingPlanKey } from '../../atoms/Asd20RichBodyContent/headingContext'
+import { liveMessageDataMixin, liveMessageDataProviderKey } from '../../../helpers/liveMessageDataRuntime'
 
 export default {
   name: 'Asd20HandbookTemplate',
@@ -303,11 +315,15 @@ export default {
     Asd20PrintHeader,
     Asd20PrintContents,
   },
-  mixins: [pageTemplateMixin],
+  mixins: [pageTemplateMixin, liveMessageDataMixin],
   provide() {
-    return { [publicationHeadingPlanKey]: () => this.publicationHeadings.idPlan }
+    return {
+      [publicationHeadingPlanKey]: () => this.publicationHeadings.idPlan,
+      [liveMessageDataProviderKey]: () => ({ snapshot: this.liveDataSnapshot }),
+    }
   },
   props: {
+    liveDataManaged: { type: Boolean, default: false },
     documentPrint: { type: Boolean, default: false },
     contentLanguageCode: { type: String, default: '' },
     contentDirection: { type: String, default: 'ltr' },
@@ -325,9 +341,11 @@ export default {
     fragmentEpoch: 0,
   }),
   computed: {
+    liveDataDocuments() { return this.messages.map(message => message.bodyJson || '') },
+    liveDataMessages() { return this.messages.map(message => ({ ...message, bodyJson: this.projectLiveMessageData(message.bodyJson) })) },
     handbookDocument() {
       return buildHandbookDocument({
-        messages: this.messages, metaDescription: this.metaDescription,
+        messages: this.liveDataMessages, metaDescription: this.metaDescription,
         documentId: this.publicationDocumentId, documentUrl: this.handbookDocumentUrl,
         reservedIds: this.publicationReservedIds,
       })

package/src/helpers/liveMessageData.js

@@ -0,0 +1,164 @@
+// Generated from CommCenter packages/message-document/liveData.js.
+/* global globalThis */
+
+// Canonical public live-data contract. The shared UI's copy is generated by
+// scripts/sync-live-message-data.mjs; never add arbitrary paths or queries here.
+const LIVE_DATA_VERSION = 1;
+const LIVE_DATA_FIELDS = Object.freeze({
+  organization: Object.freeze({
+    title: "School name",
+    address: "School address",
+    phone: "School main phone",
+    hours: "School office hours",
+    administrators: "School administrators",
+  }),
+  team: Object.freeze({
+    contactPhone: "Team contact phone",
+    officeHours: "Team office hours",
+    staff: "Team staff list",
+  }),
+});
+const UUID = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
+const LIVE_DATA_NODE_TYPES = new Set(["liveDataField", "liveDataBlock"]);
+
+function validateLiveDataReference(node) {
+  const attrs = node?.attrs;
+  if (!LIVE_DATA_NODE_TYPES.has(node?.type) || !attrs ||
+      Object.keys(attrs).some(key => !["source", "sourceId", "field"].includes(key)) ||
+      typeof attrs.source !== "string" || typeof attrs.field !== "string" ||
+      !Object.hasOwn(LIVE_DATA_FIELDS, attrs.source) ||
+      !Object.hasOwn(LIVE_DATA_FIELDS[attrs.source], attrs.field) ||
+      typeof attrs.sourceId !== "string" || !UUID.test(attrs.sourceId) || node.content?.length || node.marks?.length) {
+    return false;
+  }
+  const block = ["staff", "administrators"].includes(attrs.field);
+  return node.type === (block ? "liveDataBlock" : "liveDataField");
+}
+
+function liveDataLabel(attrs) {
+  return LIVE_DATA_FIELDS[attrs?.source]?.[attrs?.field] || "Live information";
+}
+
+function liveDataKey(attrs) {
+  return `${attrs.source}:${attrs.sourceId.toLowerCase()}:${attrs.field}`;
+}
+
+function collectLiveDataReferences(bodyJson) {
+  let value = bodyJson;
+  if (typeof bodyJson === "string") {
+    try { value = JSON.parse(bodyJson || "null"); }
+    catch { return []; } // Leave legacy/invalid JSON to the existing dual reader.
+  }
+  if (value?.type !== "doc") return [];
+  const references = new Map();
+  let count = 0;
+  function visit(node, depth = 0) {
+    if (++count > 50000 || depth > 100) throw new Error("Message data exceeds document limits.");
+    if (!node || typeof node !== "object") return;
+    if (LIVE_DATA_NODE_TYPES.has(node.type)) {
+      if (!validateLiveDataReference(node)) throw new Error("Invalid live data reference.");
+      references.set(liveDataKey(node.attrs), { ...node.attrs });
+    }
+    if (Array.isArray(node.content)) node.content.forEach(child => visit(child, depth + 1));
+  }
+  visit(value);
+  if (references.size > 100) throw new Error("Too many live data references.");
+  return [...references.values()];
+}
+
+const dataText = value => typeof value === "string" ? value.trim().slice(0, 12000) : "";
+const textNode = text => ({ type: "text", text });
+const paragraph = text => ({ type: "paragraph", content: [textNode(text)] });
+
+function liveDataContent(attrs, snapshot) {
+  const collection = attrs.source === "organization" ? snapshot?.organizations : snapshot?.teams;
+  const source = collection?.find(item => item.id?.toLowerCase() === attrs.sourceId.toLowerCase());
+  if (!source || (attrs.source === "organization" && source.status !== "Published") ||
+      (attrs.source === "team" && (source.isPublic !== true || source.ownerOrganization?.status !== "Published"))) return null;
+  if (attrs.field === "address") {
+    const address = source.address || {};
+    const value = [dataText(address.street1),
+      [dataText(address.city), dataText(address.state)].filter(Boolean).join(", "),
+      dataText(address.zip)].filter(Boolean).join(" · ");
+    return value ? [textNode(value)] : null;
+  }
+  if (["staff", "administrators"].includes(attrs.field)) {
+    const people = attrs.field === "staff"
+      ? (source.people || []).map(item => item.person).filter(person => person?.isPublic === true)
+      : source.administrators;
+    if (!Array.isArray(people) || people.length > 100) return null;
+    const unique = new Map();
+    people.forEach(person => {
+      const name = dataText(person?.displayName) || [dataText(person?.firstName), dataText(person?.lastName)].filter(Boolean).join(" ");
+      if (!name) return;
+      const line = [name, dataText(person.title), dataText(person.phone)].filter(Boolean).join(" — ");
+      unique.set(person.id || line, line);
+    });
+    const lines = [...unique.values()].sort((a, b) => a < b ? -1 : a > b ? 1 : 0);
+    return lines.length ? [{ type: "bulletList", content: lines.map(line => ({ type: "listItem", content: [paragraph(line)] })) }] : null;
+  }
+  const value = dataText(source[attrs.field]);
+  return value ? [textNode(value)] : null;
+}
+
+// Materialization returns a copy containing only ordinary document nodes.
+// Persist the authored references, never this presentation projection.
+function resolveLiveDataDocument(bodyJson, snapshot, { strict = true } = {}) {
+  collectLiveDataReferences(bodyJson);
+  const value = typeof bodyJson === "string" ? JSON.parse(bodyJson || "null") : bodyJson;
+  const diagnostics = [];
+  function resolve(node) {
+    if (LIVE_DATA_NODE_TYPES.has(node?.type)) {
+      const content = liveDataContent(node.attrs, snapshot);
+      if (content) return content;
+      diagnostics.push({ code: "live-data-unavailable", reference: liveDataKey(node.attrs) });
+      const message = `${liveDataLabel(node.attrs)} is currently unavailable.`;
+      return node.type === "liveDataBlock" ? [paragraph(message)] : [textNode(message)];
+    }
+    if (!node || typeof node !== "object") return [node];
+    return [{ ...node, ...(node.attrs ? { attrs: { ...node.attrs } } : {}),
+      ...(Array.isArray(node.content) ? { content: node.content.flatMap(resolve) } : {}) }];
+  }
+  const document = resolve(value)[0];
+  if (strict && diagnostics.length) throw new Error("Required live information is unavailable. Review the message data sources.");
+  return { document, diagnostics };
+}
+
+// One anonymous query captures every dependency for a document batch. No admin
+// secret, user session, arbitrary field names, or private employee data is used.
+async function fetchLiveDataSnapshot(documents, { endpoint, fetchImpl = globalThis.fetch, signal } = {}) {
+  const references = new Map();
+  documents.forEach(document => collectLiveDataReferences(document).forEach(attrs => references.set(liveDataKey(attrs), attrs)));
+  const organizationIds = [...new Set([...references.values()].filter(ref => ref.source === "organization").map(ref => ref.sourceId.toLowerCase()))].sort();
+  const teamIds = [...new Set([...references.values()].filter(ref => ref.source === "team").map(ref => ref.sourceId.toLowerCase()))].sort();
+  if (organizationIds.length + teamIds.length > 50 || references.size > 100) throw new Error("Too many live data sources.");
+  if (!references.size) return { version: LIVE_DATA_VERSION, organizations: [], teams: [] };
+  if (!endpoint) throw new Error("Public message data is not configured.");
+  const response = await fetchImpl(endpoint, {
+    method: "POST", credentials: "omit", redirect: "error", cache: "no-store", signal,
+    headers: { "Content-Type": "application/json", "Cache-Control": "no-cache" },
+    body: JSON.stringify({
+      query: `query liveMessageData($organizationIds: [uuid!]!, $teamIds: [uuid!]!) {
+        organizations(where: {id: {_in: $organizationIds}, status: {_eq: "Published"}}) {
+          id status title address phone hours administrators
+        }
+        teams: groups(where: {id: {_in: $teamIds}, isPublic: {_eq: true}, ownerOrganization: {status: {_eq: "Published"}}}) {
+          id title isPublic contactPhone officeHours ownerOrganization { status }
+          people(where: {person: {isPublic: {_eq: true}}}, order_by: {person: {id: asc}}, limit: 101) {
+            person { id displayName firstName lastName title phone isPublic }
+          }
+        }
+      }`, variables: { organizationIds, teamIds },
+    }),
+  });
+  if (!response.ok) throw new Error("Public message data is unavailable.");
+  const result = await response.json();
+  if (result.errors || !Array.isArray(result.data?.organizations) || !Array.isArray(result.data?.teams)) throw new Error("Public message data is unavailable.");
+  return { version: LIVE_DATA_VERSION, organizations: result.data.organizations, teams: result.data.teams };
+}
+
+export {
+  LIVE_DATA_VERSION, LIVE_DATA_FIELDS, LIVE_DATA_NODE_TYPES,
+  validateLiveDataReference, liveDataLabel, liveDataKey,
+  collectLiveDataReferences, resolveLiveDataDocument, fetchLiveDataSnapshot,
+};

package/src/helpers/liveMessageDataRuntime.js

@@ -0,0 +1,57 @@
+import { collectLiveDataReferences, fetchLiveDataSnapshot, resolveLiveDataDocument } from './liveMessageData'
+import { resolveRuntimeConfigValue } from './runtimeConfig'
+
+export const liveMessageDataEndpointKey = 'liveMessageDataEndpoint'
+export const liveMessageDataProviderKey = 'liveMessageDataProvider'
+
+// The host supplies liveDataDocuments and may provide a batch snapshot to its
+// descendants. Only references trigger a request; ordinary messages are inert.
+export const liveMessageDataMixin = {
+  inject: {
+    liveDataEndpoint: { from: liveMessageDataEndpointKey, default: '' },
+    liveDataProvider: { from: liveMessageDataProviderKey, default: null },
+  },
+  data: () => ({ liveDataSnapshot: null, liveDataLoading: false, liveDataError: '', liveDataEpoch: 0, liveDataMounted: false, liveDataController: null }),
+  computed: {
+    liveDataReferencesKey() {
+      try { return JSON.stringify(this.liveDataDocuments.flatMap(doc => collectLiveDataReferences(doc))) }
+      catch { return '' }
+    },
+    effectiveLiveDataSnapshot() { return this.liveDataProvider ? this.liveDataProvider().snapshot : this.liveDataSnapshot },
+  },
+  watch: { liveDataReferencesKey() { if (this.liveDataMounted) this.refreshLiveMessageData() } },
+  mounted() { this.liveDataMounted = true; this.refreshLiveMessageData() },
+  beforeUnmount() { this.liveDataMounted = false; this.liveDataEpoch++; this.liveDataController?.abort() },
+  methods: {
+    async refreshLiveMessageData() {
+      const epoch = ++this.liveDataEpoch
+      this.liveDataController?.abort()
+      this.liveDataSnapshot = null
+      this.liveDataError = ''
+      this.liveDataLoading = false
+      if (this.liveDataProvider || this.liveDataManaged || !this.liveDataReferencesKey || this.liveDataReferencesKey === '[]') return
+      const controller = new AbortController()
+      this.liveDataController = controller
+      const timeout = setTimeout(() => controller.abort(), 15000)
+      this.liveDataLoading = true
+      try {
+        const snapshot = await fetchLiveDataSnapshot(this.liveDataDocuments, {
+          endpoint: this.liveDataEndpoint || resolveRuntimeConfigValue({ runtimeConfig: this.$config, runtimeConfigKeys: ['graphqlEndpoint'] }),
+          signal: controller.signal,
+        })
+        // Validate availability before accepting a partial capture.
+        this.liveDataDocuments.forEach(doc => {
+          if (collectLiveDataReferences(doc).length) resolveLiveDataDocument(doc, snapshot)
+        })
+        if (epoch === this.liveDataEpoch) this.liveDataSnapshot = snapshot
+      } catch { if (epoch === this.liveDataEpoch) this.liveDataError = 'Live information is currently unavailable.' }
+      finally { clearTimeout(timeout); if (epoch === this.liveDataEpoch) this.liveDataLoading = false }
+    },
+    projectLiveMessageData(bodyJson) {
+      try {
+        if (!collectLiveDataReferences(bodyJson).length) return bodyJson
+        return resolveLiveDataDocument(bodyJson, this.effectiveLiveDataSnapshot, { strict: false }).document
+      } catch { return bodyJson }
+    },
+  },
+}