@reqquest/ui 1.16.0 → 1.18.0

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

@@ -0,0 +1,136 @@
+<script lang="ts">
+  /**
+   * This page collects prompt data from the applicant. Only one route exists per
+   * prompt, even if the prompt is shared between multiple applications. We should
+   * be able to figure out which application we are in based on the full state of
+   * the app request since the prompt should only be visible in a single spot.
+   */
+
+  import { Form, FormInlineNotification, confirmationStore } from '@txstate-mws/carbon-svelte'
+  import type { FormStore } from '@txstate-mws/svelte-forms'
+  import { Button, InlineNotification } from 'carbon-components-svelte'
+  import { getContext } from 'svelte'
+  import { get, type Writable } from 'svelte/store'
+  import { goto, invalidate } from '$app/navigation'
+  import type { ResolvedPathname } from '$app/types'
+  import { statusReasonsToFeedback, type StatusReason } from '@reqquest/ui'
+  import { uiRegistry } from '$local'
+  import { api } from '../api.js'
+  import type { PageData } from '../../routes/requests/[id]/apply/[promptId]/$types.js'
+  import ButtonLoadingIcon from './ButtonLoadingIcon.svelte'
+  import MissingDefinitionNotification from './MissingDefinitionNotification.svelte'
+
+
+  export let data: Awaited<PageData['applicantPromptPromise']> & { dataVersion: number }
+  export let statusReasons: StatusReason[] = []
+  $: ({ prompt, appRequest: appRequestForExport, dataVersion } = data)
+  $: def = uiRegistry.getPrompt(prompt.key)
+  $: statusFeedback = statusReasonsToFeedback(statusReasons, { blamedOnly: true, statuses: uiRegistry.statusReasonNotificationStatuses(prompt.key, 'applicant') })
+  const nextHref = getContext<Writable<{ nextHref: ResolvedPathname, prevHref: ResolvedPathname | undefined }>>('nextHref')
+
+  let store: FormStore | undefined
+  let continueAfterSave = false
+  $: hasPreviousPrompt = $nextHref.prevHref != null
+
+  async function handleBack () {
+    const previousHref = $nextHref.prevHref
+    if (previousHref) {
+      // eslint-disable-next-line svelte/no-navigation-without-resolve -- already resolved
+      await goto(previousHref)
+    }
+  }
+
+ async function onSubmit (data: any) {
+    const { success, messages, data: newData } =  await api.updatePrompt(prompt.id, data, false, dataVersion, await confirmInvalidatedOverride())
+    return {
+      success,
+      messages,
+      data: newData[prompt.key]
+    }
+  }
+
+  async function onValidate (data: any) {
+    const { messages } = await api.updatePrompt(prompt.id, data, true, dataVersion)
+    return messages
+  }
+
+  async function onSaved () {
+    if (continueAfterSave) {
+      // Bug issue that became apparent with loaders. 
+      // only refresh nav/answered state, not this prompt page. read the store directly with
+      // get() rather than $nextHref/prompt.answered because its stale until reload reactive updates.
+      await invalidate('request:apply:nav')
+      // eslint-disable-next-line svelte/no-navigation-without-resolve -- already resolved
+      await goto(get(nextHref).nextHref)
+    } else {
+      await invalidate('request:apply')
+    }
+  }
+
+  async function confirmInvalidatedOverride() {
+   return (prompt.invalidated && !$store?.hasUnsavedChanges) 
+    ? await confirmationStore.confirm(
+        'Corrections are required, but no changes have been made.  Can you confirm that all data is correct, and does not require changes?',
+        {
+          title: 'Confirm data is correct',
+          yesText: 'Yes',
+          noText: 'No'
+        }
+      )
+    : false 
+  }
+
+  let lastPromptId: string | undefined
+  $: if (prompt.id !== lastPromptId) {
+    lastPromptId = prompt.id
+    store = undefined
+  }
+</script>
+
+{#key prompt.id}
+  <div class="prompt-intro flow max-w-screen-md mx-auto pt-10 px-6">
+    <!-- svelte-ignore a11y_autofocus -->
+    <h2 id="prompt-title" tabindex="-1" autofocus class="font-bold text-2xl leading-normal text-center">{prompt.title}</h2>
+    <p class="text-center"> {prompt.description}</p>
+  </div>
+  {#if def == null}
+    <div class="max-w-screen-md mx-auto px-6 pt-6">
+      <MissingDefinitionNotification kind="prompt" definitionKey={prompt.key} />
+      {#if hasPreviousPrompt}
+        <Button kind="ghost" on:click={handleBack}>Back</Button>
+      {/if}
+    </div>
+  {:else}
+  <Form class={def.applicantPromptPage?.formClass ?? uiRegistry.config.applicantPromptPage?.formClass} bind:store hideFallbackMessage unsavedWarning submit={onSubmit} validate={onValidate} preloadAsDraft={!prompt.hasSavedData} preload={prompt.preloadData} on:saved={onSaved} let:data>
+    <svelte:component this={def.formComponent} {data} appRequestId={appRequestForExport.id} appRequestData={appRequestForExport.data} prestageData={{latest: prompt.prestageData, current: appRequestForExport.data[prompt.key]?.__prestage}} fetched={prompt.fetchedData} configData={prompt.configurationData} gatheredConfigData={prompt.gatheredConfigData}  invalidated={prompt.invalidated} invalidatedReason={prompt.invalidatedReason} {statusReasons} />
+    {#if statusFeedback.length}
+      <div class={def.applicantPromptPage?.statusReasonInlineNotificationClass ?? uiRegistry.config.applicantPromptPage?.statusReasonInlineNotificationClass}>
+        {#each statusFeedback as message}
+          <FormInlineNotification {message} />
+        {/each}
+      </div>
+    {/if}
+    <svelte:fragment slot="submit" let:submitting>
+      <div class='form-submit flex gap-12 justify-center mt-16'>
+        {#if hasPreviousPrompt}
+          <Button kind="ghost" on:click={handleBack}>Back</Button>
+        {/if}
+        <Button icon={submitting && !continueAfterSave ? ButtonLoadingIcon : null} type="submit" kind="secondary" disabled={submitting} on:click={() => { continueAfterSave = false }}>Save</Button>
+        <Button icon={submitting && !continueAfterSave ? ButtonLoadingIcon : null} type="submit" disabled={submitting} on:click={() => { continueAfterSave = true }}>Continue</Button>
+      </div>
+    </svelte:fragment>    
+      <!-- Correction inline prompt notification -->
+    {#if prompt.invalidated && !$store?.hasUnsavedChanges}
+      <InlineNotification
+        class={def.applicantPromptPage?.invalidatedInlineNotificationClass ?? uiRegistry.config.applicantPromptPage?.invalidatedInlineNotificationClass}
+        kind="warning-alt"
+        title='Corrections needed'
+        hideCloseButton={true}
+        lowContrast
+        subtitle={prompt.invalidatedReason ?? 'Must update form data before continuing'}
+      />
+    {/if}    
+  </Form>  
+  {/if}
+{/key}
+

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import { SkeletonText } from 'carbon-components-svelte'
+</script>
+<div class="gap-4 flex flex-col mt-10">
+  <SkeletonText />
+  <SkeletonText />
+  <SkeletonText />
+  <div style="width:100%" class="[ flex flex-row gap-20 justify-center ]">
+    <div class="still-skeleton bx--skeleton__text" style="height: 48px; width: 90px;" />
+    <div class="still-skeleton bx--skeleton__text" style="height: 48px; width: 90px;" />
+  </div>
+</div>

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

@@ -0,0 +1,369 @@
+<script lang="ts">
+  import { getAppRequestStatusInfo, getApplicationStatusInfo, applicantRequirementTypes, reviewRequirementTypes } from '../status-utils.js'
+  import { DEFAULT_APPLICANT_NO_PROGRAMS_MESSAGE, isHiddenFromApplicant, isIneligibleByApplicantRequirement } from '../appreq-utils.js'
+  import { Panel, TagSet } from '@txstate-mws/carbon-svelte'
+  import { Button, InlineNotification, Tooltip } from 'carbon-components-svelte'
+  import Edit from 'carbon-icons-svelte/lib/Edit.svelte'
+  import type { AnsweredPrompt, PromptSection, AppRequestForDetails, ApplicationForDetails, Scalars } from '@reqquest/ui'
+  import { enumRequirementType } from '@reqquest/ui'
+  import type { UIRegistry } from '@reqquest/ui'
+  import RenderDisplayComponent from './RenderDisplayComponent.svelte'
+  import ApplicantProgramList from './ApplicantProgramList.svelte'
+  import WarningIconYellow from './WarningIconYellow.svelte'
+
+  // TODO: design alignement could reduce props here
+  export let appRequest: AppRequestForDetails
+  export let applications: ApplicationForDetails[]
+  export let appData: Scalars['JsonData'] = {}
+  export let prequalPrompts: AnsweredPrompt[] | undefined = undefined
+  export let postqualPrompts: AnsweredPrompt[] | undefined = undefined
+  export let loading = false
+  export let uiRegistry: UIRegistry
+  export let title = `View your ${uiRegistry.getWord('appRequest').toLowerCase()}`
+  export let subtitle = 'Select document names to preview them.'
+  export let expandable = true
+  export let showWarningsInline = false
+  export let showCorrectionsInline = false
+  export let showAppRequestStatus = true
+  export let statusDisplay: 'tags' | 'icons' = 'tags'
+  export let showTooltipsAsText = false
+  /** Apply print-export styles: hide app chrome and paginate by prompt row rather than by panel. */
+  export let printMode = false
+
+  const CORRECTABLE_STATUSES = ['STARTED', 'READY_TO_SUBMIT', 'DISQUALIFIED']
+
+  $: canMakeCorrections = CORRECTABLE_STATUSES.includes(appRequest.status)
+  $: eligibleApplications = applications.filter(a => a.ineligiblePhase == null)
+  $: ineligibleApplications = applications.filter(a => isIneligibleByApplicantRequirement(a) && !isHiddenFromApplicant(a))
+  $: noProgramsToList = !eligibleApplications.length && !ineligibleApplications.length && applications.some(isHiddenFromApplicant)
+
+  // Group prompts by sections, with reviewer prompts nested within application sections
+  $: sections = (() => {
+    const sections: PromptSection[] = []
+
+    // General Questions === PREQUAL prompts
+    if (prequalPrompts?.length) {
+      sections.push({ title: 'Eligibility screening questions', prompts: prequalPrompts })
+    }
+
+    // Application-Specific Questions with nested Reviewer Questions
+    for (const application of applications) {
+      const applicantPrompts = application.requirements
+        .filter(r => applicantRequirementTypes.has(r.type))
+        .flatMap(r => r.prompts).filter(p => !p.optOut)
+      const reviewerPrompts = application.requirements
+        .filter(r => reviewRequirementTypes.has(r.type))
+        .flatMap(r => r.prompts)
+      const workflowPrompts = application.requirements
+        .filter(r => r.type === enumRequirementType.WORKFLOW)
+        .flatMap(r => r.prompts)
+
+      if (applicantPrompts.length || reviewerPrompts.length || workflowPrompts.length) {
+        const subsections: PromptSection[] = []
+        if (reviewerPrompts.length) subsections.push({ title: 'Reviewer Questions', prompts: reviewerPrompts })
+        if (workflowPrompts.length) subsections.push({ title: 'Workflow Questions', prompts: workflowPrompts })
+        sections.push({
+          title: application.title,
+          prompts: applicantPrompts,
+          subsections,
+          applicationStatus: application.status,
+          applicationRescindedStatus: application.rescindedStatus
+        })
+      }
+    }
+
+    // Additional Questions === POSTQUAL prompts
+    if (postqualPrompts?.length) {
+      sections.push({ title: 'Additional Questions', prompts: postqualPrompts })
+    }
+
+    return sections
+  })()
+
+  function hasWarning (prompt: AnsweredPrompt) {
+    return prompt.statusReasons.some(r => r.status === 'WARNING' || r.status === 'DISQUALIFYING')
+  }
+
+  function getWarnings (prompt: AnsweredPrompt) {
+    return prompt.statusReasons.filter(r => r.status === 'WARNING' || r.status === 'DISQUALIFYING')
+  }
+
+  function needsCorrection (prompt: AnsweredPrompt) {
+    return prompt.invalidated && prompt.invalidatedReason
+  }
+</script>
+
+{#if appRequest}
+  <div class="[ my-6 ] application-details flow" class:print-mode={printMode}>
+    <!-- Application Status Panel -->
+    <header class="[ mb-12 ] app-view-intro text-center">
+      <h2 class="[ text-2xl mb-3 font-bold ]">{title}</h2>
+      <p class="app-view-subtitle mb-3">{subtitle}</p>
+    </header>
+    <section class="prompt-section">
+      <div class="status-content">
+        {#if showAppRequestStatus}
+          <dl class="status-list-item [ flex items-center justify-between px-2 py-3 border-b ]">
+            <dt class="status-list-label font-medium">{uiRegistry.getWord('appRequest')} Status</dt>
+            <dd class="px-2">
+              <TagSet tags={getAppRequestStatusInfo(appRequest.status, appRequest.phase, appRequest.closedAt).tags} />
+            </dd>
+          </dl>
+        {/if}
+
+        <!-- Application Status List -->
+        {#if eligibleApplications.length > 0}
+          <ApplicantProgramList applications={eligibleApplications} {appRequest} viewMode={statusDisplay === 'tags'} {showTooltipsAsText} />
+        {/if}
+        <!-- Ineligible Status List -->
+         {#if ineligibleApplications.length > 0}
+            <Panel title="Ineligible benefits" expandable={true} expanded={(eligibleApplications.length === 0)}>
+              <ApplicantProgramList applications={ineligibleApplications} {appRequest} viewMode={statusDisplay === 'tags'} {showTooltipsAsText} />
+            </Panel>
+         {/if}
+        {#if noProgramsToList}
+          <p class="text-center">{uiRegistry.config.applicantNoProgramsMessage ?? DEFAULT_APPLICANT_NO_PROGRAMS_MESSAGE}</p>
+        {/if}
+      </div>
+    </section>
+
+    <!-- Prompt Sections -->
+    {#if loading}
+      <Panel title="Loading...">
+        <p>Loading prompt data...</p>
+      </Panel>
+    {:else if sections.length > 0}
+      {#each sections as section (section.title)}
+        {@const applicationStatusInfo = section.applicationStatus ? getApplicationStatusInfo(section.applicationStatus, appRequest.phase, appRequest.closedAt, section.applicationRescindedStatus) : undefined}
+        <Panel title={section.title} {expandable} expanded>
+          {#if section.prompts.length}
+            <dl class="prompt-list">
+              {#each section.prompts as prompt (prompt.id)}
+                {@const def = uiRegistry.getPrompt(prompt.key)}
+                <dt class="prompt-term [ font-medium ]">
+                  {#if showWarningsInline && hasWarning(prompt)}
+                    <Tooltip align="start">
+                      <div class="icon" slot="icon">
+                        <WarningIconYellow size={16} />
+                      </div>
+                      {#each getWarnings(prompt) as r, i (i)}
+                        <p>
+                          {r.status === 'WARNING' ? 'Warning' : 'Disqualifying'}{#if section.title !== r.programName}&nbsp;for {r.programName}{/if}<br>
+                          {r.statusReason}
+                        </p>
+                      {/each}
+                    </Tooltip>
+                  {/if}
+                  {#if showCorrectionsInline && canMakeCorrections && needsCorrection(prompt)}
+                    <Tooltip align="start">
+                      <div class="icon" slot="icon">
+                        <WarningIconYellow size={16} />
+                      </div>
+                      <p>Corrections needed<br>{prompt.invalidatedReason}</p>
+                    </Tooltip>
+                  {/if}
+                  {prompt.title}
+                </dt>
+                <dd class="prompt-answer flow" class:large={def?.displayMode === 'large'}>
+                  <RenderDisplayComponent {def} appRequestId={appRequest.id} appData={appData} prompt={prompt} prestageData={{latest: prompt.prestageData, current: appRequest.data[prompt.key]?.__prestage}} configData={prompt.configurationData} gatheredConfigData={prompt.gatheredConfigData} statusReasons={prompt.statusReasons} />
+                  {#if showCorrectionsInline && canMakeCorrections && needsCorrection(prompt)}
+                    <div class="correction-notice">
+                      <Button kind="ghost" size="small" icon={Edit} iconDescription="Edit this answer" href={`/requests/${appRequest.id}/apply/${prompt.id}`} class="edit-button" />
+                      <InlineNotification kind="warning-alt" title="Corrections needed" subtitle={prompt.invalidatedReason ?? ''} hideCloseButton lowContrast />
+                    </div>
+                  {/if}
+                </dd>
+              {/each}
+            </dl>
+          {/if}
+
+          <!-- Nested subsections (e.g., Reviewer Questions) -->
+          {#if section.subsections}
+            {#each section.subsections as subsection (subsection.title)}
+              <Panel title={subsection.title} {expandable} expanded>
+                <dl class="prompt-list">
+                  {#each subsection.prompts as prompt (prompt.id)}
+                    {@const def = uiRegistry.getPrompt(prompt.key)}
+                    <dt class="prompt-term [ font-medium ]">
+                      {#if showWarningsInline && hasWarning(prompt)}
+                        <Tooltip align="start">
+                          <div class="icon" slot="icon">
+                            <WarningIconYellow size={16} />
+                          </div>
+                          {#each getWarnings(prompt) as r, i (i)}
+                            <p>
+                              {r.status === 'WARNING' ? 'Warning' : 'Disqualifying'}{#if section.title !== r.programName}&nbsp;for {r.programName}{/if}<br>
+                              {r.statusReason}
+                            </p>
+                          {/each}
+                        </Tooltip>
+                      {/if}
+                      {#if showCorrectionsInline && canMakeCorrections && needsCorrection(prompt)}
+                        <Tooltip align="start">
+                          <div class="icon" slot="icon">
+                            <WarningIconYellow size={16} />
+                          </div>
+                          <p>Corrections needed<br>{prompt.invalidatedReason}</p>
+                        </Tooltip>
+                      {/if}
+                      {prompt.title}
+                    </dt>
+                    <dd class="prompt-answer flow" class:large={def?.displayMode === 'large'}>
+                      <RenderDisplayComponent {def} appRequestId={appRequest.id} appData={appData} prompt={prompt} prestageData={{latest: prompt.prestageData, current: appRequest.data[prompt.key]?.__prestage}} configData={prompt.configurationData} gatheredConfigData={prompt.gatheredConfigData} statusReasons={prompt.statusReasons} />
+                      {#if showCorrectionsInline && canMakeCorrections && needsCorrection(prompt)}
+                        <Button kind="ghost" size="small" icon={Edit} iconDescription="Edit this answer" href={`/requests/${appRequest.id}/apply/${prompt.id}`} class="edit-button" />
+                      {/if}
+                    </dd>
+                    {#if showCorrectionsInline && canMakeCorrections && needsCorrection(prompt)}
+                      <div class="correction-notice">
+                        <InlineNotification kind="warning-alt" title="Corrections needed" subtitle={prompt.invalidatedReason ?? ''} hideCloseButton lowContrast />
+                      </div>
+                    {/if}
+                  {/each}
+                </dl>
+              </Panel>
+            {/each}
+          {/if}
+        </Panel>
+      {/each}
+    {:else}
+      <Panel title="Prompts and Answers">
+        <p>No prompts available for this {uiRegistry.getWord('appRequest').toLowerCase()}.</p>
+      </Panel>
+    {/if}
+
+    <slot name="footer" />
+  </div>
+{:else}
+  <p>No {uiRegistry.getWord('appRequest').toLowerCase()} selected</p>
+{/if}
+
+<style>
+  .app-view-subtitle {
+    color: var(--cds-text-02);
+    font-size: 0.9rem;
+    /* margin-top: -0.5rem; */
+    margin-bottom: 1rem;
+  }
+
+  .status-list-item {
+    border-bottom: 1px solid var(--cds-border-subtle);
+  }
+
+  .prompt-answer :global(dl:not(.prompt-display-grid)) {
+    padding-block-start:1em;
+    display:grid;
+    grid-template-columns: 1fr 1fr;
+    row-gap:0.5rem;
+  }
+
+  .status-content dl {
+    padding-block-start:1em;
+    display:grid;
+    grid-template-columns: 1fr 1fr;
+    row-gap:0.5rem;
+  }
+
+  .status-content :global(.programs-container) {
+    grid-template-columns: 1fr 1fr;
+  }
+
+  .status-list-item {
+    border-color: var(--cds-border-subtle);
+  }
+
+  .status-list-label {
+    color: var(--cds-text-01);
+  }
+
+  .prompt-list {
+    display: grid;
+    grid-template-columns: var(--prompt-list-columns, 1fr 1fr);
+    align-items: stretch;
+    row-gap: 0.5rem;
+    background-color: #F2F2F2;
+    padding-top: 0.5rem;
+  }
+  .prompt-list dt, .prompt-list dd {
+    padding-top: 0.25rem;
+  }
+
+  .prompt-term {
+    display: flex;
+    gap:1em;
+    color: var(--cds-text-01);
+    border-bottom: 1px solid var(--cds-border-subtle);
+    padding: 0.5rem 10px;
+  }
+  .prompt-term:has(+ .prompt-answer.large) {
+    border-bottom: none;
+  }
+
+  .prompt-answer {
+    color: var(--cds-text-02);
+    border-bottom: 1px solid var(--cds-border-subtle);
+    padding: 0.5rem 10px;
+  }
+  .prompt-answer.large {
+    grid-column: span 2;
+  }
+  /* When a display component's root is a PromptDisplayGrid, hand it our column tracks
+     via subgrid so its challenge/response rows align with the real prompt rows. */
+  .prompt-answer.large:has(> :global(.prompt-display-grid)) {
+    display: grid;
+    grid-template-columns: subgrid;
+    align-content: start;
+    padding: 0;
+    border-bottom: none;
+    --prompt-display-subgrid: subgrid;
+    --prompt-display-columns: var(--prompt-list-columns, 1fr 1fr);
+    --prompt-display-row-padding: 0.5rem 10px;
+    --prompt-display-challenge-padding-left: 10px;
+    --prompt-display-row-gap: 0.5rem;
+  }
+  .prompt-answer.large:has(> :global(.prompt-display-grid)) > :global(*) {
+    grid-column: 1 / -1;
+  }
+  .prompt-answer.large :global(.prompt-display-challenge) {
+    font-weight: 500;
+    color: var(--cds-text-01);
+  }
+
+  .correction-notice {
+    grid-column: span 2;
+    margin-bottom: 0.5rem;
+  }
+
+  .correction-notice :global(.bx--inline-notification) {
+    max-width: 100%;
+  }
+
+  .prompt-answer :global(.edit-button) {
+    float: right;
+    margin-top: -0.5rem;
+    --cds-icon-01: var(--cds-link-01);
+  }
+
+  @media print {
+    :global(body:has(.application-details.print-mode) .bx--header),
+    :global(body:has(.application-details.print-mode) .breadcrumbs) {
+      display: none !important;
+    }
+
+    /* Never mark the whole view or a whole panel break-inside: avoid — when either is
+       taller than the space left on a page, the browser pushes it to the next page and
+       leaves the first page nearly blank. Keep only small units together instead. */
+    .print-mode :global(.panel) {
+      margin-bottom: 1rem !important;
+    }
+
+    .print-mode :global(.panel-header) {
+      break-after: avoid;
+    }
+
+    .print-mode .prompt-term,
+    .print-mode .prompt-answer:not(.large) {
+      break-inside: avoid;
+    }
+  }
+</style>

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

@@ -0,0 +1,28 @@
+<script lang="ts">
+  import { ScreenReaderOnly } from '@txstate-mws/svelte-components'
+</script>
+
+<svg style:display="none"></svg>
+<span {...$$restProps} class="{$$restProps.class} loader" aria-hidden="false"><ScreenReaderOnly>loading</ScreenReaderOnly></span>
+
+<style>
+  .loader {
+    width: 16px;
+    height: 16px;
+    border: 3px solid #FFF;
+    border-bottom-color: transparent;
+    border-radius: 50%;
+    display: inline-block;
+    box-sizing: border-box;
+    animation: rotation 1s linear infinite;
+  }
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

package/{dist → app/src/internal}/components/DelayedSkeleton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  import type { Loader } from "../registry"
-  import ApplicantPromptSkeleton from "../../internal/components/ApplicantPromptSkeleton.svelte"
+  import type { Loader } from "@reqquest/ui"
+  import ApplicantPromptSkeleton from "$internal/components/ApplicantPromptSkeleton.svelte"
 
   export let loader: Loader