@reqquest/ui 1.16.0 → 1.18.0

package/app/src/internal/components/FieldNestedMultiselect.svelte

@@ -0,0 +1,270 @@
+<script lang="ts" context="module">
+  export interface NestedMultiselectChild {
+    value: any
+    label: string
+  }
+  export interface NestedMultiselectItem extends NestedMultiselectChild {
+    children?: NestedMultiselectChild[]
+  }
+</script>
+
+<script lang="ts">
+  import { Field, jsonDeserialize, jsonSerialize } from '@txstate-mws/svelte-forms'
+  import { Checkbox, FloatingPortal } from 'carbon-components-svelte'
+  import Add from 'carbon-icons-svelte/lib/Add.svelte'
+  import { onDestroy, tick } from 'svelte'
+  import { equal, randomid } from 'txstate-utils'
+
+  /**
+   * Path to the array in the form data.
+   * @type {string}
+   */
+  export let path: string
+
+  /**
+   * Label shown above the trigger. Also used as the accessible name of the popover.
+   * @type {string}
+   */
+  export let labelText: string
+
+  /**
+   * Text shown on the trigger button.
+   * @type {string}
+   * @default 'Choose one or more'
+   */
+  export let placeholder = 'Choose one or more'
+
+  /**
+   * Top-level options. Each may carry `children`, rendered indented beneath it. Children narrow their
+   * parent: the stored value holds only what should be matched, so
+   * - checking a child also shows its parent checked, and replaces the parent's own value with the child's
+   *   (Approved + Rescinded matches rescinded approvals only);
+   * - unchecking a parent's last checked child puts the parent's own value back, so the parent stays selected;
+   * - unchecking a parent removes it and all of its children;
+   * - a parent with no checked children stores, and matches, its own value.
+   * Items without children are plain checkboxes.
+   * @type {NestedMultiselectItem[]}
+   */
+  export let items: NestedMultiselectItem[] = []
+
+  /**
+   * Hide the visible label (it stays available as the popover's accessible name).
+   * @type {boolean}
+   * @default false
+   */
+  export let hideLabel = false
+
+  export let conditional = true
+  export let defaultValue: any[] = []
+  export let required = false
+  export let disabled = false
+
+  const id = randomid()
+  const panelId = randomid()
+
+  let open = false
+  let buttonRef: HTMLButtonElement | null = null
+  let portalRef: HTMLElement | null = null
+
+  // values are objects, so each entry is stored as JSON in the form state
+  // same loose typing as carbon-svelte's FieldMultiselect: Field's serialize/deserialize props are
+  // declared for scalars but the array form is what it actually exchanges for array fields
+  function arraySerialize (vals: any): any {
+    return vals?.map(jsonSerialize) ?? []
+  }
+  function arrayDeserialize (vals: any): any {
+    return vals?.map(jsonDeserialize) ?? []
+  }
+
+  function isSelected (value: any, rawValue: any[] | undefined) {
+    return (rawValue ?? []).some(v => equal(v, value))
+  }
+
+  // a parent reads as checked when its own value is stored or any of its children's values is
+  function isParentChecked (item: NestedMultiselectItem, rawValue: any[] | undefined) {
+    return isSelected(item.value, rawValue) || (item.children ?? []).some(c => isSelected(c.value, rawValue))
+  }
+
+  function without (list: any[], ...values: any[]) {
+    return list.filter(v => !values.some(x => equal(v, x)))
+  }
+
+  // These listen to the native change event, not carbon's `check` event: Checkbox also fires `check` when its
+  // `checked` prop changes from outside, which happens to a parent whenever a child is (un)checked, and that
+  // would be misread as the user clicking the parent.
+  function isChecked (e: Event) {
+    return (e.target as HTMLInputElement).checked
+  }
+
+  function toggleParent (item: NestedMultiselectItem, rawValue: any[] | undefined, setVal: (v: any[]) => void) {
+    return (e: Event) => {
+      const current = rawValue ?? []
+      const childValues = (item.children ?? []).map(c => c.value)
+      // checking adds the parent's own value; unchecking clears the parent and every child under it
+      setVal(isChecked(e) ? [...without(current, item.value), item.value] : without(current, item.value, ...childValues))
+    }
+  }
+
+  function toggleChild (item: NestedMultiselectItem, child: NestedMultiselectChild, rawValue: any[] | undefined, setVal: (v: any[]) => void) {
+    return (e: Event) => {
+      const current = rawValue ?? []
+      if (isChecked(e)) {
+        // the child narrows the parent, so the parent's broader value is dropped
+        setVal([...without(current, item.value, child.value), child.value])
+        return
+      }
+      const next = without(current, child.value)
+      const siblingsLeft = (item.children ?? []).some(c => isSelected(c.value, next))
+      // unchecking the last child leaves the parent selected on its own
+      setVal(siblingsLeft ? next : [...next, item.value])
+    }
+  }
+
+  function openPanel () {
+    if (disabled) return
+    open = true
+    void tick().then(() => {
+      (portalRef?.querySelector('input[type="checkbox"]') as HTMLInputElement | null)?.focus()
+    })
+  }
+
+  function closePanel (returnFocus = true) {
+    if (!open) return
+    open = false
+    if (returnFocus) buttonRef?.focus()
+  }
+
+  function onTriggerClick () {
+    if (open) closePanel()
+    else openPanel()
+  }
+
+  function onKeydown (e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+      e.preventDefault()
+      e.stopPropagation()
+      closePanel()
+    }
+  }
+
+  function onWindowMousedown (e: MouseEvent) {
+    if (!open) return
+    const target = e.target as Node | null
+    if (target && (portalRef?.contains(target) || buttonRef?.contains(target))) return
+    closePanel(false)
+  }
+
+  function onPanelFocusout (e: FocusEvent) {
+    const next = e.relatedTarget as Node | null
+    if (next && (portalRef?.contains(next) || buttonRef?.contains(next))) return
+    // focus is leaving the control entirely (tab out or click elsewhere); the mousedown handler
+    // already closed it in the click case, this covers keyboard navigation out of the panel
+    closePanel(false)
+  }
+
+  onDestroy(() => { open = false })
+</script>
+
+<!--
+  @component
+
+  A multi-select whose options form a shallow tree: top-level items may carry children rendered
+  indented beneath them. The popover is a carbon FloatingPortal anchored to the trigger. Values are
+  arbitrary objects (serialized to JSON in form state), so the field can hold API-shaped filter
+  entries directly.
+-->
+
+<svelte:window on:mousedown={onWindowMousedown} />
+
+<Field {path} notNull {conditional} {defaultValue} serialize={arraySerialize} deserialize={arrayDeserialize} let:invalid let:messages let:rawValue let:setVal let:onBlur>
+  {@const count = rawValue?.length ?? 0}
+  {@const errorText = messages.filter(m => m.type === 'error' || m.type === 'system').map(m => m.message).join('\n')}
+  <div class="bx--list-box__wrapper nested-multiselect cs-field" class:nested-multiselect--invalid={invalid}>
+    {#if !hideLabel}
+      <label class="bx--label" class:bx--label--disabled={disabled} for={id}>{labelText}{#if required}<span aria-hidden="true">{' '}*</span>{/if}</label>
+    {/if}
+    <div class="bx--multi-select bx--list-box" class:bx--multi-select--selected={count > 0} class:bx--list-box--expanded={open} class:bx--list-box--disabled={disabled}>
+      <button
+        bind:this={buttonRef}
+        {id}
+        type="button"
+        class="bx--list-box__field nested-multiselect__trigger"
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        aria-controls={open ? panelId : undefined}
+        aria-label={hideLabel ? labelText : undefined}
+        {disabled}
+        on:click={onTriggerClick}
+        on:keydown={onKeydown}
+        on:blur={() => { if (!open) onBlur() }}
+      >
+        {#if count > 0}
+          <!-- a span with Tag's classes rather than <Tag>, which renders a div (not allowed inside a button) -->
+          <span class="bx--tag bx--tag--high-contrast bx--tag--sm nested-multiselect__count">{count}</span>
+        {/if}
+        <span class="bx--list-box__label">{placeholder}</span>
+        <span class="bx--list-box__menu-icon nested-multiselect__icon" class:bx--list-box__menu-icon--open={open} aria-hidden="true"><Add /></span>
+      </button>
+    </div>
+    {#if errorText}
+      <div class="bx--form-requirement">{errorText}</div>
+    {/if}
+  </div>
+
+  <FloatingPortal anchor={buttonRef} {open} direction="bottom" bind:ref={portalRef}>
+    <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
+    <div id={panelId} role="dialog" aria-label={labelText} tabindex="-1" class="nested-multiselect__panel" on:keydown={onKeydown} on:focusout={onPanelFocusout}>
+      {#each items as item (jsonSerialize(item.value))}
+        <div class="nested-multiselect__item">
+          <Checkbox labelText={item.label} checked={isParentChecked(item, rawValue)} on:change={toggleParent(item, rawValue, setVal)} />
+        </div>
+        {#each item.children ?? [] as child (jsonSerialize(child.value))}
+          <div class="nested-multiselect__item nested-multiselect__item--child">
+            <Checkbox labelText={child.label} checked={isSelected(child.value, rawValue)} on:change={toggleChild(item, child, rawValue, setVal)} />
+          </div>
+        {/each}
+      {/each}
+    </div>
+  </FloatingPortal>
+</Field>
+
+<style>
+  .nested-multiselect__trigger {
+    width: 100%;
+    text-align: left;
+    cursor: pointer;
+  }
+  .nested-multiselect__trigger:disabled {
+    cursor: not-allowed;
+  }
+  .nested-multiselect :global(.nested-multiselect__count) {
+    margin-right: 0.5rem;
+  }
+  .nested-multiselect__icon {
+    /* carbon rotates the chevron when open; the plus should stay put */
+    transform: none;
+  }
+  .nested-multiselect--invalid .bx--list-box {
+    outline: 2px solid var(--cds-support-01, #da1e28);
+    outline-offset: -2px;
+  }
+  .nested-multiselect__panel {
+    background-color: var(--cds-field-01, #f4f4f4);
+    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
+    max-height: 15rem;
+    overflow-y: auto;
+    padding: 0.25rem 0;
+  }
+  .nested-multiselect__panel:focus {
+    outline: none;
+  }
+  .nested-multiselect__item {
+    padding: 0.125rem 1rem;
+  }
+  .nested-multiselect__item--child {
+    padding-left: 2.5rem;
+  }
+  .nested-multiselect__panel :global(.bx--checkbox:checked + .bx--checkbox-label::before) {
+    background-color: var(--maroon);
+  }
+</style>

package/app/src/internal/components/IntroPanel.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { TagSet } from '@txstate-mws/carbon-svelte'
+  import type { TagItem } from '@txstate-mws/carbon-svelte'
+
+  export let title = ''
+  export let subtitle = ''
+  export let tags: TagItem[] | undefined = undefined
+</script>
+
+<section class="bg-[var(--cds-ui-01)] py-4 px-[16px] text-2xl mb-2">
+  <div class="repel">
+    <div class="max-w-lg flex flex-col flex-wrap justify-start">
+      {#if title}
+        <div class="title-block [ flex gap-[12px] ] ">
+          <h2 class="text-[1.25rem] text-[var(--cds-text-01,#1A1A1A)] font-normal leading-7">
+            {title}
+          </h2>
+          {#if tags}
+            <TagSet tags={tags} />
+          {/if}
+        </div>
+        {#if subtitle}
+          <p class="text-sm text-[var(--cds-text-02)] leading-[18px] tracking-[0.16px] pt-2">
+            {subtitle}
+          </p>
+        {/if}
+      {/if}
+      <!-- Optional content slot below title/subtitle -->
+      {#if $$slots.default}
+        <div class="mt-2">
+          <slot />
+        </div>
+      {/if}
+    </div>
+    {#if $$slots['block-end']}
+    <div class="block-end-slot">
+      <slot name="block-end" />
+    </div>
+    {/if}
+  </div>
+</section>

package/app/src/internal/components/MissingDefinitionNotification.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+  /**
+   * Shown where a form or configuration component would go, when the API returned a key this UI
+   * has no definition for. The API and UI are deployed as separate images and can be built from
+   * different commits, so this is reachable in production no matter how good the build-time checks
+   * get. Naming the key here is the difference between "this page is broken" and a bug report an
+   * operator can act on.
+   */
+  import { InlineNotification } from 'carbon-components-svelte'
+
+  export let kind: 'prompt' | 'requirement' | 'program' = 'prompt'
+  export let definitionKey: string
+
+  // built here rather than inline: an attribute holding both `{definitionKey}` and a backtick
+  // reads as a template literal to the svelte parser
+  $: title = `This ${kind} is unavailable:`
+  $: subtitle = `No ${kind} component is registered for "${definitionKey}". This usually means the application was updated but this screen was not. Please contact support.`
+</script>
+
+<InlineNotification kind="error" {title} {subtitle} lowContrast hideCloseButton />

package/app/src/internal/components/PeriodPanel.svelte

@@ -0,0 +1,125 @@
+<script lang="ts">
+  import { ActionSet, Panel, TagSet } from '@txstate-mws/carbon-svelte'
+  import { Tab, TabContent, Tabs, Tag } from 'carbon-components-svelte'
+  import { SettingsEdit } from 'carbon-icons-svelte'
+  import { groupby, pluralize } from 'txstate-utils'
+  import { invalidate } from '$app/navigation'
+  import { page } from '$app/stores'
+  import { api } from '../api.js'
+  import type { UIRegistry } from '@reqquest/ui'
+
+  export let program: any
+  export let sharedProgramRequirements: any
+  /** program title by key, to name the program a shared requirement is listed under */
+  export let programTitles: Record<string, string> = {}
+  export let openModal: any
+  export let onClick: any
+  export let uiRegistry: UIRegistry
+
+  const disablePeriodProgram = (requirementKey: string) => async () => {
+    const res = await api.disablePeriodProgramRequirements($page.params.id!, requirementKey, true)
+    await invalidate('api:getPeriodConfigurations')
+  }
+
+  const enablePeriodProgram = (requirementKey: string) => async () => {
+    const res = await api.disablePeriodProgramRequirements($page.params.id!, requirementKey, false)
+    await invalidate('api:getPeriodConfigurations')
+  }
+
+  type PeriodRequirement = { key: string, title: string, type: string, enabled: boolean, configuration: { actions: { update: boolean } }, prompts: { key: string, title: string, configuration: { actions: { update: boolean } } }[] }
+  $: enabledRequirements = Object.entries(groupby(program.requirements.filter((r: PeriodRequirement) => r.enabled) as PeriodRequirement[], 'type'))
+  $: disabledRequirements = program.requirements.filter((r: PeriodRequirement) => !r.enabled) as PeriodRequirement[]
+
+  // configuration is stored once per period, not once per program
+  const sharedWith = (requirementKey: string): string[] => sharedProgramRequirements[requirementKey] ?? []
+  const configuredUnder = (requirementKey: string): string | undefined => {
+    const owners = sharedWith(requirementKey)
+    return owners.length > 1 && owners[0] !== program.key ? owners[0] : undefined
+  }
+</script>
+  <Panel title={program.title} expandable expanded noPrimaryAction actions={[{ label: 'Rename program', onClick: onClick('program', program), disabled: !program.configuration.actions.update }]}>
+    {#each enabledRequirements as requrementEntries, i (i)}
+    {@const type = requrementEntries[0]}
+    {@const requirements = requrementEntries[1]}
+    <Panel title='' expandable expanded>
+      <div style="display: content" slot="headerLeft">
+        <TagSet tags={[{ label: `Applicant: ${type}`, type: 'purple' }]} />
+      </div>
+      <div style="display: content" slot="headerRight">
+        <TagSet tags={[{ label: `${requirements.length} ${pluralize('requirement', requirements.length)}`, type: 'yellow' }]} />
+      </div>
+      <Tabs autoWidth>
+        <Tab label={`Enabled Requirements (${enabledRequirements.length})`} />
+        <Tab label={`Disabled Requirements (${disabledRequirements.length})`} />
+        <svelte:fragment slot='content'>
+          <TabContent>
+            {#each requirements as requirement (requirement.key)}
+              {@const reqDef = uiRegistry.getRequirement(requirement.key)}
+              {@const owner = configuredUnder(requirement.key)}
+              {#if owner}
+              <Panel title={requirement.title} noPrimaryAction actions={[{ label: 'Disable Requirement', onClick: disablePeriodProgram(requirement.key) }]}>
+                <div style="display: content" slot="headerLeft">
+                  <TagSet tags={[{ label: 'Requirement', type: 'yellow' }]} />
+                </div>
+                <div style="display: content" slot="headerRight">
+                  <TagSet tags={[{ label: `Shared with ${sharedWith(requirement.key).length - 1} other ${pluralize('program', sharedWith(requirement.key).length - 1)}`, onClick: openModal(requirement.key) }]} />
+                </div>
+                <p class="shared-note">Configured once for the period. Its prompts and settings are listed under {programTitles[owner] ?? owner}; changes made there apply here too.</p>
+              </Panel>
+              {:else}
+              <Panel title={requirement.title} expandable noPrimaryAction actions={[{ label: 'Configure requirement', onClick: onClick('requirement', requirement), disabled: reqDef?.configureComponent == null || !requirement.configuration.actions.update }, { label: 'Disable Requirement', onClick: disablePeriodProgram(requirement.key) }]}>
+                <div style="display: content" slot="headerLeft">
+                  <TagSet tags={[{ label: 'Requirement', type: 'yellow' }]} />
+                </div>
+                <!-- <Button on:click={onClick('requirement', requirement)} type="primary" size="small" icon={SettingsEdit} iconDescription="Edit Configuration" disabled={reqDef.configureComponent == null || !requirement.configuration.actions.update} />  -->
+              <div style="display: content" slot="headerRight">
+                {@const tags = sharedProgramRequirements[requirement.key]?.length > 1 ? [{ label: 'Shared', onClick: openModal(requirement.key) }] : []}
+                <TagSet tags={tags} />
+              </div>
+
+              <ul class="prompts">
+                  {#each requirement.prompts as prompt (prompt.key)}
+                  {@const promptDef = uiRegistry.getPrompt(prompt.key)}
+                  <li class="prompt justify-between">
+                    <span>
+                      <Tag type='green'>Prompt</Tag>{prompt.title}
+                    </span>
+                    <ActionSet
+                      actions={[
+                        // { label: 'View', icon: View },
+                        { label: 'settings', icon: SettingsEdit, disabled: promptDef?.configureComponent == null || !prompt.configuration.actions.update, onClick: onClick('prompt', prompt) }
+                      ]}
+                    />
+                  </li>
+                  {/each}
+                </ul>
+              </Panel>
+              {/if}
+            {/each}
+          </TabContent>
+          <TabContent>
+            {#each disabledRequirements as requirement (requirement.key)}
+              <Panel title={requirement.title} actions={[{ label: 'Enable Requirement', onClick: enablePeriodProgram(requirement.key) }]}>
+                Requirement: {requirement.title}
+                <ul class="prompts">
+                  {#each requirement.prompts as prompt (prompt.key)}
+                    <li class="prompt">
+                      Prompt: {prompt.title}
+                    </li>
+                  {/each}
+                </ul>
+              </Panel>
+            {/each}
+          </TabContent>
+        </svelte:fragment>
+      </Tabs>
+    </Panel>
+    {/each}
+  </Panel>
+
+<style>
+  .shared-note {
+    margin: 0;
+    color: var(--cds-text-secondary, #525252);
+  }
+</style>

package/app/src/internal/components/ProgramStatusCell.svelte

@@ -0,0 +1,134 @@
+<script lang="ts" context="module">
+  export interface ProgramStatusRow {
+    phase: string
+    closedAt?: string | null
+    applications: { programKey: string, title: string, status: string, rescindedStatus?: string | null }[]
+  }
+</script>
+
+<script lang="ts">
+  import { TagSet } from '@txstate-mws/carbon-svelte'
+  import { FloatingPortal, Tag } from 'carbon-components-svelte'
+  import { onDestroy } from 'svelte'
+  import { randomid } from 'txstate-utils'
+  import { enumAppRequestPhase } from '@reqquest/ui'
+  import { getApplicationStatusTags } from '../status-utils.js'
+
+  export let row: ProgramStatusRow
+  /** ColumnList passes the column definition too; unused here. */
+  export let col: unknown = undefined
+  /**
+   * When true and the request has more than `maxInline` programs, collapse to a single grey
+   * "N programs" tag whose tooltip lists each program with its status labels. The expanded
+   * row detail renders with rollup={false} to show the full list.
+  */
+  export let rollup = true
+  export let maxInline = 2
+
+  $: programs = row.applications.map(a => ({
+    key: a.programKey,
+    title: a.title,
+    tags: getApplicationStatusTags(a.status, row.phase, row.closedAt, a.rescindedStatus)
+  }))
+  $: collapsed = rollup && programs.length > maxInline
+  $: closed = row.closedAt != null && row.phase !== enumAppRequestPhase.STARTED
+  $: void col
+
+  const tooltipId = randomid()
+  let triggerRef: HTMLElement | null = null
+  let tooltipOpen = false
+  let closeTimer: ReturnType<typeof setTimeout> | undefined
+  function show () {
+    clearTimeout(closeTimer)
+    tooltipOpen = true
+  }
+  function hideSoon () {
+    clearTimeout(closeTimer)
+    closeTimer = setTimeout(() => { tooltipOpen = false }, 150)
+  }
+  function hideNow () {
+    clearTimeout(closeTimer)
+    tooltipOpen = false
+  }
+  function onKeydown (e: KeyboardEvent) {
+    if (e.key === 'Escape' && tooltipOpen) { e.stopPropagation(); hideNow() }
+  }
+  onDestroy(() => clearTimeout(closeTimer))
+</script>
+
+{#if collapsed}
+  <!-- focusable so keyboard users can reveal the tooltip; a <button> can't hold carbon's Tag (it renders a div) -->
+  <!-- svelte-ignore a11y-no-noninteractive-tabindex a11y-no-static-element-interactions -->
+  <span bind:this={triggerRef} class="program-rollup__trigger" tabindex="0" aria-describedby={tooltipOpen ? tooltipId : undefined}
+    on:mouseenter={show} on:mouseleave={hideSoon} on:focus={show} on:blur={hideNow} on:keydown={onKeydown}>
+    <Tag size="sm" type="gray">{programs.length} programs</Tag>
+  </span>
+  {#if closed}<TagSet small tags={[{ label: 'Closed', type: 'yellow' }]} class="program-closed" />{/if}
+  <FloatingPortal anchor={triggerRef} open={tooltipOpen} direction="bottom" intrinsicWidth intrinsicAlign="start" gapBottom={4}>
+    <!-- svelte-ignore a11y-no-static-element-interactions -->
+    <div id={tooltipId} role="tooltip" class="program-rollup__tooltip" on:mouseenter={show} on:mouseleave={hideSoon}>
+      <ul class="program-rollup-list">
+        {#each programs as program (program.key)}
+          <li><strong>{program.title}</strong>: {program.tags.map(t => t.label).join(', ')}</li>
+        {/each}
+      </ul>
+    </div>
+  </FloatingPortal>
+{:else}
+  <div class="program-list">
+    {#each programs as program (program.key)}
+      <div class="program">
+        <span class="program-title">{program.title}</span>
+        <TagSet small tags={program.tags} />
+      </div>
+    {/each}
+    {#if closed}<TagSet small tags={[{ label: 'Closed', type: 'yellow' }]} class="program-closed" />{/if}
+  </div>
+{/if}
+
+<style>
+  .program-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .program {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 0.25rem 0.5rem;
+  }
+  :global(.program-closed) {
+    display: inline-flex;
+    margin-left: 0.25rem;
+  }
+  .program-list :global(.program-closed) {
+    margin-left: 0;
+  }
+  .program-rollup__trigger {
+    display: inline-block;
+    cursor: default;
+  }
+  .program-rollup__trigger:focus-visible {
+    outline: 2px solid var(--cds-focus, #0f62fe);
+    outline-offset: 1px;
+  }
+  .program-rollup__tooltip {
+    background: var(--cds-inverse-02, #393939);
+    color: var(--cds-inverse-01, #ffffff);
+    padding: 1rem;
+    border-radius: 2px;
+    box-shadow: 0 2px 6px var(--cds-shadow, rgba(0, 0, 0, 0.3));
+    font-size: 0.875rem;
+    line-height: 1.25rem;
+    max-width: 28rem;
+  }
+  .program-rollup-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+</style>

package/app/src/internal/components/RenderDisplayComponent.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+  import { InlineNotification } from 'carbon-components-svelte'
+  import type { PromptDefinition } from '@reqquest/ui'
+  import type { StatusReason } from '@reqquest/ui'
+
+  export let def: PromptDefinition | undefined
+  export let appRequestId: string
+  export let appData: Record<string, any>
+  export let prompt: { key: string, answered: boolean, moot: boolean | null, invalidated: boolean | null, invalidatedReason: string | null }  
+  export let prestageData: Record<string, any>
+  export let configData: Record<string, any>
+  export let gatheredConfigData: Record<string, any>
+  export let showMoot = false
+  export let showInlineReviewNotification = false 
+  // requirement status reasons aimed at this prompt, forwarded to the display component
+  export let statusReasons: StatusReason[] = []
+
+</script>
+
+<svelte:boundary onerror={e => console.error(e)}>
+  {#if showMoot && prompt.moot}
+    <em>Already disqualified.</em>
+  {:else if !def?.displayComponent}
+    <em>No display component registered.</em>
+    <pre>{JSON.stringify(appData[prompt.key] ?? {}, null, 2)}</pre>
+  {:else}
+    <svelte:component this={def.displayComponent} {appRequestId} data={appData[prompt.key]} appRequestData={appData} {prestageData} {configData} {gatheredConfigData} invalidated={prompt.invalidated} invalidatedReason={prompt.invalidatedReason} {statusReasons} />
+  {/if}
+  {#if prompt.invalidated && (showMoot || !prompt.moot) && showInlineReviewNotification}
+    <InlineNotification class="mt-6 lg:mt-4" kind="warning" title="Applicant has made corrections:" subtitle={prompt.invalidatedReason ?? 'Requires review'} lowContrast hideCloseButton />
+  {/if}
+  {#snippet failed()}
+    <div class="error">
+      <div>Error Loading Component</div>
+      <p>There was an error loading the display component for this prompt.</p>
+    </div>
+  {/snippet}
+</svelte:boundary>
+
+<style>
+  .error div { font-weight: bold; }
+</style>