@reqquest/ui 1.14.0 → 1.15.0

package/dist/components/QuestionnairePrompt.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-    import Button from "carbon-components-svelte/src/Button/Button.svelte";import Launch from 'carbon-icons-svelte/lib/Launch.svelte'
+    import Button from "carbon-components-svelte/src/Button/Button.svelte";
+    import Launch from 'carbon-icons-svelte/lib/Launch.svelte'
 
     /**
      * Array of external links to show above the form.

package/dist/components.md

@@ -10,10 +10,10 @@ Versions this describes (the versions a downstream project resolves through `@re
 
 | package | version |
 |---|---|
-| `@reqquest/ui` | 1.12.1 |
-| `@txstate-mws/carbon-svelte` | 1.11.0 |
+| `@reqquest/ui` | 1.14.1 |
+| `@txstate-mws/carbon-svelte` | 1.12.1 |
 | `@txstate-mws/svelte-forms` | 2.1.9 |
-| `carbon-components-svelte` | 0.110.2 |
+| `carbon-components-svelte` | 0.111.1 |
 | `carbon-icons-svelte` | 13.15.0 |
 | `svelte` | 5.x, **no runes** |
 
@@ -108,6 +108,7 @@ Both members of the pair are mounted with `<svelte:component>`, so they are unty
 | `gatheredConfigData` | yes | yes | configuration gathered from related definitions. |
 | `invalidated` / `invalidatedReason` | yes | yes | set when a reviewer sent the prompt back for correction. |
 | `appRequestId` | **sometimes** | yes | present on the applicant page, the opt-out modal, the display path, and the `formMode: 'full'` modal - but **not** on the reviewer's inline edit form. Guard it, or register `formMode: 'full'` if you truly need it. |
+| `statusReasons` | yes | yes | `{ status, statusReason, programName, blamed }[]` - every requirement status and reason aimed at this prompt, across programs. `blamed` is true when the requirement's `resolve` named this prompt in `blame` (it may be a requirement other than this prompt's own, e.g. a reviewer requirement blaming an applicant answer); false when it named no prompt and the entry is the fallback attached to all of that requirement's prompts. The framework already renders the **blamed** entries below every edit form as inline notifications (see `statusReasonNotifications` below), so a form component normally needs nothing. Display components receive the same list and render nothing by default; call `statusReasonsToFeedback(statusReasons, { blamedOnly, statuses })` from `@reqquest/ui` to get `Feedback` objects for `FormInlineNotification`, passing `uiRegistry.statusReasonNotificationStatuses(key, 'applicant' | 'reviewer')` as `statuses` to follow the project's `statusReasonNotifications` configuration. Applicants get an empty list for reviewer-phase requirements the API redacts. |
 
 `prestageData` has a trap worth knowing before you hit it. Read the **prop**, not the mutation:
 
@@ -205,9 +206,28 @@ export const uiRegistry = new UIRegistry(config)
   `fetched` only.
 - **`icon`** `Component` - navigation icon.
 - **`loader`** `{ skeletonComponent, delay? } | boolean` (default `false`) - see the snippet above.
-- **`applicantPromptPage`** `{ formClass?, invalidatedInlineNotificationClass? }` - per-prompt
-  override of the CSS applied to the framework `Form` that wraps applicant prompts. The global
-  version of the same setting lives on `UIConfig`.
+- **`applicantPromptPage`** `{ formClass?, invalidatedInlineNotificationClass?, statusReasonInlineNotificationClass? }` -
+  per-prompt override of the CSS applied to the framework `Form` that wraps applicant prompts, the
+  corrections notice, and the wrapper around the status reason notices. The global version of the
+  same setting lives on `UIConfig`.
+- **`statusReasonNotifications`** `boolean | { <STATUS>?: boolean | { applicant?, reviewer? } }` -
+  which requirement status reasons that `blame` this prompt the framework renders as inline
+  notifications below its form component, and to whom. The audience is the UI surface, not the
+  viewer's role: `applicant` is the applicant prompt page, the accept page and the opt-out modal;
+  `reviewer` is the reviewer's inline and modal forms. Notices are styled like svelte-forms
+  validation messages, keyed by status (DISQUALIFYING error, WARNING warning, PENDING info, MET
+  success), describe the last *saved* answer and refresh after each save. A boolean switches every
+  status for both audiences; an object names statuses, each as a boolean (both audiences) or
+  `{ applicant?, reviewer? }` for one side. Resolution is layered **per status and per audience**:
+  the built-in default (everything **except PENDING**, both audiences), then
+  `UIConfig.statusReasonNotifications`, then this prompt's value - each layer changes only what it
+  names. So `UIConfig: { PENDING: { reviewer: true } }` shows PENDING instructions to reviewers only,
+  and a prompt with `{ DISQUALIFYING: { applicant: false } }` hides that one notice from the applicant
+  while reviewers and every other status follow the global choice. `false` at either level renders
+  nothing (for that prompt, or everywhere) - use the `statusReasons` prop in your own form component
+  instead. `statusReasonsToFeedback(statusReasons, { blamedOnly, statuses })` from `@reqquest/ui`
+  applies the same filters; pass `uiRegistry.statusReasonNotificationStatuses(key, audience)` as
+  `statuses` if a display component should follow the project's configuration.
 
 ### Keys, and how they stay honest
 
@@ -1757,6 +1777,20 @@ Import: `import { CardSkeleton } from '@txstate-mws/carbon-svelte'`
 
 - **`width`** (default: `300`) - The width of the card in pixels
 
+### ExpandCollapseAll
+
+> One ghost button that opens or closes every member of a collapsible set at once, labelled to describe what the next activation will do. `members` is the whole input: the label is derived from it, and an empty set renders nothing. `PanelGroup` and `ColumnList` each own their set and can render this already wired, so most pages never build the array themselves. The **root element is a wrapper `div`, not the Button**, and `class` is the only prop forwarded to it. That is what lets a caller position the control without colliding with carbon's button classes. In a flex row the wrapper is exactly the Button's height, so it costs no layout. @example ```svelte <script lang="ts"> import { ExpandCollapseAll, PanelGroup, Panel } from '@txstate-mws/carbon-svelte' </script> <PanelGroup let:members let:expandAll let:collapseAll> <ExpandCollapseAll class="[ flex justify-end mb-2 ]" {members} on:expand={expandAll} on:collapse={collapseAll} /> <Panel expandable title="Petition">…</Panel> <Panel expandable title="Supporting documents">…</Panel> <Panel expandable title="Advisor recommendation">…</Panel> <Panel expandable title="Course substitutions">…</Panel> <Panel expandable title="Decision history">…</Panel> </PanelGroup> ```
+
+Import: `import { ExpandCollapseAll } from '@txstate-mws/carbon-svelte'`
+
+<!-- no upstream doc at this version; props extracted from the component source -->
+
+#### Props
+
+- **`members`** `boolean[]` **(required)** - The expanded state of every member of the collapsible set, one boolean each. The label reads "Collapse all" only while every member is expanded, and an empty array renders nothing. Inside a `PanelGroup` this is the group's `let:members`; `ColumnList` builds it from its expandable rows; any other set (e.g. carbon `Accordion`, your own markup) builds it itself.
+- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) - Button size.
+- **`describedById`** `string | undefined` (default: `undefined`) - Id of an element naming the set this button acts on, applied to the Button as `aria-describedby`.
+
 ### FilterUISkeleton
 
 Import: `import { FilterUISkeleton } from '@txstate-mws/carbon-svelte'`
@@ -1773,6 +1807,29 @@ Import: `import { GeneralTextSkeleton } from '@txstate-mws/carbon-svelte'`
 
 <!-- no upstream doc at this version; props extracted from the component source -->
 
+### Image
+
+> A single presentational image, rendered as exactly one img element with no wrapper. Three layout modes: `aspect` locks a ratio and cover-crops; `cropHeight` crops to a fixed CSS height at whatever width the container gives; with neither, the image renders at its intrinsic ratio, never upscaling past its natural width. `anchor` picks the visible region in both crop modes. While the file downloads the box is reserved empty space. Give intrinsic images `width` and `height` so the browser can reserve it before the file arrives. `class`, `style` and any other undeclared attribute (fetchpriority, crossorigin, id, ...) all land on the img. Purely presentational: a consumer who needs a linked image wraps it in an anchor. @example ```svelte <script lang="ts"> import { Image } from '@txstate-mws/carbon-svelte' </script> <Image src="/photo.jpg" aspect="widescreen" anchor={{ x: 75, y: 25 }} /> ``` A banner cropped to a fixed height at fluid width: ```svelte <Image src="/photo.jpg" cropHeight="180px" anchor="object-bottom" /> ``` Intrinsic ratio with the box reserved from the file's real pixel dimensions: ```svelte <Image src="/photo.jpg" width={1600} height={900} /> ```
+
+Import: `import { Image } from '@txstate-mws/carbon-svelte'`
+
+<!-- no upstream doc at this version; props extracted from the component source -->
+
+#### Props
+
+- **`src`** `string | undefined` (default: `undefined`) - Image source URL. Optional so async data can be passed directly: with `src` undefined the component renders nothing.
+- **`alt`** (default: `''`) - Alt text for accessibility. Defaults to empty string: images are decorative by default. When `alt` describes specific content and the image is cropped (`aspect` or `cropHeight`), choose `anchor` appropriately so cover-cropping doesn't cut away what the alt text describes.
+- **`srcset`** `string | undefined` (default: `undefined`) - Native srcset attribute, passed through to the img element: the same image at several widths ('/photo-400.jpg 400w, /photo-800.jpg 800w'), letting the browser download the smallest file that will still look sharp. Pairs with `sizes`.
+- **`sizes`** `string | undefined` (default: `undefined`) - Native `sizes` attribute. Passed through as given, but a lazy image that has a `srcset` and no `sizes` gets `'auto'` by default, so the browser picks a candidate sized to the laid-out box instead of assuming 100vw.
+- **`loading`** `'lazy' | 'eager'` (default: `'lazy'`) - Native loading attribute for the img element. Defaults to 'lazy': the file is not fetched until the image is about to scroll into view.
+- **`width`** `number | undefined` (default: `undefined`) - The image file's intrinsic width in pixels, passed through as the native `width` attribute. Set it together with `height` in intrinsic mode: the browser derives an aspect ratio from the pair and reserves the box before the file arrives, which prevents layout shift. Ignored for layout in the crop modes (`aspect` or `cropHeight`), since CSS already gives the box. These are pixel counts, not CSS lengths.
+- **`height`** `number | undefined` (default: `undefined`) - The image file's intrinsic height in pixels, passed through as the native `height` attribute. See `width`.
+- **`anchor`** `ImageAnchor` (default: `'object-center'`) - Which part of the image stays visible when it is cover-cropped: one of the nine `object-*` position shorthands, or an `{ x, y }` focal point in percentages. Live in both crop modes (`aspect` or `cropHeight`); inert in intrinsic mode. A focal point keeps its relative position in the crop (CSS `object-position` semantics); it is never pulled to the center.
+- **`aspect`** `ImageAspect | undefined` (default: `undefined`) - Locks the image to an aspect ratio, cropping via cover-fit: 'square' (1:1), 'widescreen' (16:9), 'standard' (4:3), any CSS ratio string like '21/9', or a bare width/height number like 1.7778. Ratio strings use the CSS slash form; a colon form like '4:5' is invalid CSS and the browser silently drops it, leaving the image uncropped. When omitted the image renders at its intrinsic ratio with no cropping, unless `cropHeight` is set.
+- **`cropHeight`** `string | undefined` (default: `undefined`) - Crops the image to an explicit CSS height ('180px', '50vh', '100%') at whatever width the container gives, via cover-fit, which also upscales a file smaller than the box. This is the unlocked mode, for banners and fills where the ratio can't be known ahead of time. Percentage heights resolve against the parent, which must be sized; against an unsized parent they silently behave as auto. Ignored when `aspect` is set.
+- **`className`** (default: `''`) - Extra classes for the img, the hook for placing and sizing the component from outside.
+- **`style`** `string | undefined` (default: `undefined`) - Inline styles for the img. The component's own style directives reserve `aspect-ratio`, `height` and `object-position` in every mode, so Svelte drops those properties from this string. The `aspect`, `cropHeight` and `anchor` props are the way to set them.
+
 ### LoadingIcon
 
 Import: `import { LoadingIcon } from '@txstate-mws/carbon-svelte'`
@@ -1798,6 +1855,18 @@ Import: `import { PanelDialog } from '@txstate-mws/carbon-svelte'`
 - **`loadingSubmit`** (default: `false`) - Show a loading spinner on the submit button and disable it when true.
 - **`size`** `'small' | 'large'` (default: `'small'`) - Size of the dialog. 'small' is 32rem wide, 'large' is 64rem wide and centered.
 
+### PanelGroup
+
+Import: `import { PanelGroup } from '@txstate-mws/carbon-svelte'`
+
+<!-- no upstream doc at this version; props extracted from the component source -->
+
+#### Props
+
+- **`showExpandAll`** (default: `false`) - One Panel's handle on the group. / export interface PanelMembership { /** This Panel's state, narrowed to one boolean. / expanded: Readable<boolean> /** This Panel pushing its own change up: a header click, or an app writing `expanded`. */ report: (expanded: boolean) => void /** Call on destroy. Drops the key from the mounted set and keeps its state. */ leave: () => void } export interface PanelGroupContextValue { /** Called by an expandable Panel as it mounts. Seeds state on first sight only, so a Panel remounting under the same key reads back the state it left. / join: (finalKey: string, initial: boolean) => PanelMembership } /** Module scope on purpose: an instance-scope key is a fresh object per instance. / export const PANEL_GROUP_CONTEXT = {} </script> <script lang="ts"> import { dev } from '$app/environment' import { setContext } from 'svelte' import { derived, writable } from 'svelte/store' import ExpandCollapseAll from './ExpandCollapseAll.svelte' /** Render an expand-all control above the group's Panels, right aligned. Leave it off and wire your own `ExpandCollapseAll` from the `let:` slot props when the control belongs in a toolbar you already have.
+- **`expandAllSize`** `'small' | 'medium' | 'large'` (default: `'medium'`) - Size of the built-in expand-all control. Only used when `showExpandAll` is set; a control you place yourself takes its own `size` prop.
+- **`describedById`** `string | undefined` (default: `undefined`) - Id of an element naming this group, forwarded to the built-in "Expand all" control as `aria-describedby` so a screen reader user can tell two "Expand all" buttons apart when a screen has more than one set.
+
 ### ScrollOverflow
 
 Import: `import { ScrollOverflow } from '@txstate-mws/carbon-svelte'`
@@ -3400,7 +3469,7 @@ Import: `import { FieldMultiselectPills } from '@txstate-mws/carbon-svelte'`
 - **`id`** (default: `randomid()`)
 - **`labelText`** `string` (default: `''`)
 - **`placeholder`** (default: `''`) - Text to display in the text input when it's empty.
-- **`disabled`** (default: `false`) - When there are no items (e.g. it's a filtered search and there were no results), we still display one disabled item in the menu to let the user know what is going on. Use this prop to specify the message.
+- **`disabled`** `boolean | undefined` (default: `undefined`) - When there are no items (e.g. it's a filtered search and there were no results), we still display one disabled item in the menu to let the user know what is going on. Use this prop to specify the message. */ /** Indicates if the field is disabled.
 - **`defaultValue`** `string[]` (default: `[]`)
 - **`conditional`** `boolean | undefined` (default: `undefined`)
 - **`required`** (default: `false`)

package/dist/index.d.ts

@@ -2,5 +2,6 @@ export type * from './api.js';
 export * from './components/index.js';
 export * from './keys.js';
 export * from './registry.js';
+export * from './status-reasons.js';
 export * from './types.js';
 export * from './typed-client/index.js';

package/dist/index.js

@@ -1,5 +1,6 @@
 export * from './components/index.js';
 export * from './keys.js';
 export * from './registry.js';
+export * from './status-reasons.js';
 export * from './types.js';
 export * from './typed-client/index.js';

package/dist/registry.d.ts

@@ -1,6 +1,7 @@
 import type { LayoutStructureNode, LayoutStructureNodeRoot, ShellItem, UserProfile } from '@txstate-mws/carbon-svelte';
 import type { Component } from 'svelte';
 import type { ProgramKey, PromptKey, RequirementKey } from './keys.js';
+import type { RequirementStatus } from './typed-client/index.js';
 export interface PromptLoader {
     skeletonComponent: Component<any>;
     /**
@@ -148,9 +149,46 @@ export interface PromptDefinition {
     /**
      * This is the same applicantPromptPage CSS configurations that exist at the UIConfig (global applicant page prompt) level.  Used in a situation where a specific prompt
      * requires a specific layout that doesn't match default.  This will override global configuration
+     * (`formClass`, `invalidatedInlineNotificationClass`, `statusReasonInlineNotificationClass`).
      */
     applicantPromptPage?: ApplicantPromptPageDefinition;
+    /**
+     * Which requirement status reasons the framework renders as inline notifications below this prompt's
+     * form component, and to whom. Only reasons whose requirement explicitly `blame`s this prompt are
+     * rendered. The audience is the UI surface: `applicant` is the applicant prompt page, the accept page and
+     * the opt-out modal; `reviewer` is the reviewer's inline and modal forms.
+     *
+     * A boolean switches every status for both audiences. An object names statuses; each status takes a
+     * boolean (both audiences) or `{ applicant?, reviewer? }` to set one side only, e.g.
+     * `{ PENDING: { reviewer: true }, DISQUALIFYING: { applicant: false } }`. Resolution is layered per status
+     * and per audience: the built-in default (`DEFAULT_STATUS_REASON_NOTIFICATIONS`, everything except
+     * PENDING), then the global `UIConfig.statusReasonNotifications`, then this value - each layer changes only
+     * what it names. Set false to render nothing here and handle the `statusReasons` prop inside your own form
+     * component instead.
+     */
+    statusReasonNotifications?: StatusReasonNotificationConfig;
 }
+/**
+ * Who sees a status's reasons: the applicant-facing edit forms, the reviewer-facing edit forms, or both.
+ * Leave a side out to inherit it from the layer below.
+ */
+export interface StatusReasonViewableBy {
+    applicant?: boolean;
+    reviewer?: boolean;
+}
+export type StatusReasonAudience = keyof StatusReasonViewableBy;
+/**
+ * Per-status, per-audience switch for the framework's inline status-reason notifications: a boolean for
+ * every status and both audiences, or an object naming only the statuses to change, each as a boolean (both
+ * audiences) or a `StatusReasonViewableBy` (one side at a time).
+ */
+export type StatusReasonNotificationConfig = boolean | Partial<Record<RequirementStatus, boolean | StatusReasonViewableBy>>;
+/**
+ * What the framework renders when neither `UIConfig` nor the prompt says otherwise: every status except
+ * PENDING, whose reasons are usually instructions ("Reviewer must assess...") rather than findings, for
+ * applicants and reviewers alike.
+ */
+export declare const DEFAULT_STATUS_REASON_NOTIFICATIONS: Record<RequirementStatus, Required<StatusReasonViewableBy>>;
 /**
  * Applicant prompts are wrapped by the default CL Form component, so any styling applied within the svelte prompt
  * is independent (does not influence) of the layout of form elements that exist as part of the CL Form (eg. Validation notices).
@@ -167,6 +205,11 @@ export interface ApplicantPromptPageDefinition {
      * CSS class settings specific to the corrections inline notification within the Form
      */
     invalidatedInlineNotificationClass?: string;
+    /**
+     * CSS class applied to the wrapper around the requirement status reason notifications rendered below the
+     * prompt's form component.
+     */
+    statusReasonInlineNotificationClass?: string;
 }
 export interface Terminologies {
     /**
@@ -254,6 +297,16 @@ export interface UIConfig<PK extends string = PromptKey, RK extends string = Req
    * individual prompt level if specific prompts desire specific layouts
    */
     applicantPromptPage?: ApplicantPromptPageDefinition;
+    /**
+     * Global layer of `PromptDefinition.statusReasonNotifications`: which requirement status reasons the
+     * framework's edit forms render as inline notifications below a prompt's form component, and to which
+     * audience (`applicant` = applicant prompt page, accept page, opt-out modal; `reviewer` = the reviewer's
+     * inline and modal forms). A boolean sets every status for both audiences; an object such as
+     * `{ PENDING: { reviewer: true } }` changes only what it names on top of the built-in default (everything
+     * except PENDING). A prompt's own value then overrides this one, per status and per audience. Set false to
+     * render nothing anywhere and handle the `statusReasons` prop inside your own form components.
+     */
+    statusReasonNotifications?: StatusReasonNotificationConfig;
     /**
      * Applicant Review submission page title and subtitle text.
      */
@@ -375,6 +428,8 @@ export declare class UIRegistry {
     getWord(key: keyof Terminologies, count?: number, inclusive?: boolean): string;
     getPlural(key: keyof Terminologies): string;
     getPrompt(key: string): PromptDefinition | undefined;
+    protected statusReasonStatusCache: Map<string, Set<RequirementStatus>>;
+    statusReasonNotificationStatuses(key: string, audience: StatusReasonAudience): Set<RequirementStatus>;
     getRequirement(key: string): RequirementDefinition | undefined;
     getProgram(key: string): ProgramDefinition | undefined;
     /**

package/dist/registry.js

@@ -1,5 +1,17 @@
 import { plural } from 'txstate-utils';
 const reviewDefaultSections = ['GENERAL', 'PROGRAM', 'REVIEWER', 'ACCEPTANCE'];
+/**
+ * What the framework renders when neither `UIConfig` nor the prompt says otherwise: every status except
+ * PENDING, whose reasons are usually instructions ("Reviewer must assess...") rather than findings, for
+ * applicants and reviewers alike.
+ */
+export const DEFAULT_STATUS_REASON_NOTIFICATIONS = {
+    DISQUALIFYING: { applicant: true, reviewer: false },
+    WARNING: { applicant: true, reviewer: false },
+    MET: { applicant: false, reviewer: false },
+    NOT_APPLICABLE: { applicant: false, reviewer: false },
+    PENDING: { applicant: false, reviewer: false }
+};
 /**
  * Accepts either shape of a definition list and returns a key -> definition map. The keyed form
  * carries its key in the object key, so it is grafted back on to keep every consumer's
@@ -92,6 +104,41 @@ export class UIRegistry {
     getPrompt(key) {
         return this.warnIfMissing('prompt', key, this.promptMap[key]);
     }
+    statusReasonStatusCache = new Map();
+    // The statuses whose requirement reasons the framework renders below this prompt's edit form for the given
+    statusReasonNotificationStatuses(key, audience) {
+        const cacheKey = `${audience}:${key}`;
+        let statuses = this.statusReasonStatusCache.get(cacheKey);
+        if (statuses)
+            return statuses;
+        const allStatuses = Object.keys(DEFAULT_STATUS_REASON_NOTIFICATIONS);
+        const resolved = Object.fromEntries(allStatuses.map(status => [status, { ...DEFAULT_STATUS_REASON_NOTIFICATIONS[status] }]));
+        const setBoth = (status, on) => { resolved[status] = { applicant: on, reviewer: on }; };
+        for (const layer of [this.config.statusReasonNotifications, this.promptMap[key]?.statusReasonNotifications]) {
+            if (layer == null)
+                continue;
+            if (typeof layer === 'boolean') {
+                for (const status of allStatuses)
+                    setBoth(status, layer);
+                continue;
+            }
+            for (const [status, value] of Object.entries(layer)) {
+                if (value == null)
+                    continue;
+                if (typeof value === 'boolean')
+                    setBoth(status, value);
+                else {
+                    if (value.applicant != null)
+                        resolved[status].applicant = value.applicant;
+                    if (value.reviewer != null)
+                        resolved[status].reviewer = value.reviewer;
+                }
+            }
+        }
+        statuses = new Set(allStatuses.filter(status => resolved[status][audience]));
+        this.statusReasonStatusCache.set(cacheKey, statuses);
+        return statuses;
+    }
     getRequirement(key) {
         return this.warnIfMissing('requirement', key, this.requirementMap[key]);
     }

package/dist/status-reasons.d.ts

@@ -0,0 +1,19 @@
+import type { Feedback } from '@txstate-mws/svelte-forms';
+import type { StatusReason } from './types.js';
+/**
+ * Turn a prompt's `statusReasons` into the `Feedback` objects `FormInlineNotification` renders, so a
+ * requirement's reason looks exactly like a svelte-forms validation message.
+ *
+ * Entries with no reason text are dropped. Identical type+message pairs (the same requirement reached
+ * through several programs) collapse into one notification; when the prompt's entries span more than one
+ * program, each notification is titled with the program(s) it came from.
+ *
+ * `blamedOnly` keeps only entries whose requirement explicitly named this prompt in `blame`, and `statuses`
+ * keeps only entries with one of those statuses - the framework's edit forms pass both, with `statuses` from
+ * `uiRegistry.statusReasonNotificationStatuses(promptKey)`. A display component may do the same to follow
+ * the project's configuration, or pass neither to show everything it was handed.
+ */
+export declare function statusReasonsToFeedback(statusReasons?: StatusReason[] | null, opts?: {
+    blamedOnly?: boolean;
+    statuses?: Iterable<string>;
+}): Feedback[];

package/dist/status-reasons.js

@@ -0,0 +1,45 @@
+/**
+ * Requirement status -> svelte-forms Feedback type. A status missing from this map is never surfaced as a
+ * notification, so this is the one place to narrow which statuses show.
+ */
+const statusFeedbackType = {
+    PENDING: 'info',
+    WARNING: 'warning',
+    DISQUALIFYING: 'error',
+    MET: 'success',
+    NOT_APPLICABLE: 'info'
+};
+/**
+ * Turn a prompt's `statusReasons` into the `Feedback` objects `FormInlineNotification` renders, so a
+ * requirement's reason looks exactly like a svelte-forms validation message.
+ *
+ * Entries with no reason text are dropped. Identical type+message pairs (the same requirement reached
+ * through several programs) collapse into one notification; when the prompt's entries span more than one
+ * program, each notification is titled with the program(s) it came from.
+ *
+ * `blamedOnly` keeps only entries whose requirement explicitly named this prompt in `blame`, and `statuses`
+ * keeps only entries with one of those statuses - the framework's edit forms pass both, with `statuses` from
+ * `uiRegistry.statusReasonNotificationStatuses(promptKey)`. A display component may do the same to follow
+ * the project's configuration, or pass neither to show everything it was handed.
+ */
+export function statusReasonsToFeedback(statusReasons, opts) {
+    const allowed = opts?.statuses ? new Set(opts.statuses) : undefined;
+    const entries = (statusReasons ?? []).filter(r => (!opts?.blamedOnly || r.blamed) && (allowed == null || allowed.has(r.status)));
+    const programs = new Set(entries.map(r => r.programName));
+    const grouped = new Map();
+    for (const r of entries) {
+        const type = statusFeedbackType[r.status];
+        const message = r.statusReason?.trim();
+        if (!type || !message)
+            continue;
+        const key = `${type}\u0000${message}`;
+        const entry = grouped.get(key) ?? { type, message, programs: new Set() };
+        entry.programs.add(r.programName);
+        grouped.set(key, entry);
+    }
+    return [...grouped.values()].map(e => ({
+        type: e.type,
+        message: e.message,
+        extra: programs.size > 1 ? { title: [...e.programs].join(', ') } : undefined
+    }));
+}

package/dist/types.d.ts

@@ -14,11 +14,13 @@ export interface AnsweredPrompt {
     prestageData: Record<string, any>;
     configurationData: Record<string, any>;
     gatheredConfigData: Record<string, any>;
-    statusReasons: {
-        status: string;
-        statusReason: string | null;
-        programName: string;
-    }[];
+    statusReasons: StatusReason[];
+}
+export interface StatusReason {
+    status: string;
+    statusReason: string | null;
+    programName: string;
+    blamed: boolean;
 }
 export interface PromptSection {
     title: string;
@@ -70,8 +72,9 @@ export type OptOutApplication = ApplicationForDetails & {
 };
 export declare enum PromptIndicators {
     AUTOMATION = 1,
-    WARNING = 2,
-    DISQUALIFYING = 3
+    PENDING = 2,
+    WARNING = 3,
+    DISQUALIFYING = 4
 }
 export declare const translateMutations: {
     submitAppRequest: string;

package/dist/types.js

@@ -2,8 +2,9 @@ export const phaseChangeMutations = ['submitAppRequest', 'returnToApplicant', 'c
 export var PromptIndicators;
 (function (PromptIndicators) {
     PromptIndicators[PromptIndicators["AUTOMATION"] = 1] = "AUTOMATION";
-    PromptIndicators[PromptIndicators["WARNING"] = 2] = "WARNING";
-    PromptIndicators[PromptIndicators["DISQUALIFYING"] = 3] = "DISQUALIFYING";
+    PromptIndicators[PromptIndicators["PENDING"] = 2] = "PENDING";
+    PromptIndicators[PromptIndicators["WARNING"] = 3] = "WARNING";
+    PromptIndicators[PromptIndicators["DISQUALIFYING"] = 4] = "DISQUALIFYING";
 })(PromptIndicators || (PromptIndicators = {}));
 export const translateMutations = {
     submitAppRequest: 'submitted request for review.',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reqquest/ui",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "overrides": {
     "esrap": "2.3.2"
   },