@antelopejs/dms 0.6.1 → 0.7.0

package/frontend-vue/layers/dms-ui/app/components/activity-feed/ActivityFeed.vue

@@ -36,6 +36,11 @@ interface ActivityFeedProps extends Partial<DefaultComponentProps> {
   groupByDay?: boolean;
   /** Shows at most this many entries. */
   maxItems?: number;
+  /**
+   * Fills its grid cell instead of growing with its entries, which scroll
+   * under the fixed head: the cards beside it set the row's height.
+   */
+  fillHeight?: boolean;
   /**
    * Placeholder rows while `fetchUrl` loads: the length the source usually
    * answers, never more than `maxItems`. Optional. Defaults to `maxItems`,
@@ -59,6 +64,7 @@ const props = withDefaults(defineProps<ActivityFeedProps>(), {
   fetchUrlMethod: undefined,
   groupByDay: true,
   maxItems: undefined,
+  fillHeight: false,
   skeletonCount: undefined,
   actions: () => [],
   empty: undefined,
@@ -137,6 +143,32 @@ const skeletonDays = computed<number[][]>(() => {
   }
   return days;
 });
+
+// Filling its cell, the body is the scroll area: sized to nothing
+// (`contain: size`), it leaves the row's height to the cards beside it and
+// stretches to it. Once the grid stacks its cells (`--dms-grid-tracks: 1`,
+// see grid/columns.ts) no neighbour sets that height: the list takes its own,
+// capped like a top-list card's (24rem, about six entries under their day
+// separators). Focusable, so the keyboard scrolls it too; its ring is drawn
+// inside, where the card's clipped edge cannot hide it.
+const scrollArea = computed(() =>
+  props.fillHeight
+    ? {
+        class:
+          "h-full overflow-y-auto overscroll-contain [scrollbar-width:thin] contain-size focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-(--dms-accent-line) [@container_style(--dms-grid-tracks:1)]:h-auto [@container_style(--dms-grid-tracks:1)]:max-h-[24rem] [@container_style(--dms-grid-tracks:1)]:contain-none",
+        role: "region",
+        tabindex: 0,
+        "aria-label": props.title
+          ? processI18n(props.title)
+          : t("dms.activity_feed.list_label"),
+      }
+    : {},
+);
+// Inside the scroll area, a day's separator stays on top of its entries.
+const dayHeadClass = computed(
+  () => props.fillHeight && "sticky top-0 z-[1] bg-(--dms-surface-card)",
+);
+
 const Wrapper = props.card ? resolveComponent("DmsCard") : "div";
 const wrapperProps = computed(() =>
   props.card
@@ -161,91 +193,94 @@ const wrapperProps = computed(() =>
       />
     </template>
 
-    <!-- Rows at the loaded rows' boxes (a 18px title line over a 16px meta
-         line beside the 30px well), split by the same hairlines. -->
-    <div v-if="isFirstLoad" class="py-1" aria-busy="true">
-      <div v-for="(day, dayIndex) in skeletonDays" :key="dayIndex">
-        <div
-          v-if="props.groupByDay"
-          class="flex items-center gap-2.5 px-[18px] pt-3.5 pb-1.5 after:h-px after:flex-1 after:bg-(--ui-border-muted)"
-        >
-          <USkeleton class="my-[1.5px] h-2.5 w-24" />
-        </div>
-        <div class="divide-y divide-(--ui-border-muted)">
-          <DmsRowSkeleton
-            v-for="row in day"
-            :key="row"
-            class="px-[18px] py-2.5"
-            well="size-[30px] rounded-lg"
-            :lines="[
-              `my-[3px] h-3 ${SKELETON_TITLE_WIDTHS[row % SKELETON_TITLE_WIDTHS.length]}`,
-              'my-[3px] h-2.5 w-1/3',
-            ]"
-            lines-class="grid gap-px"
-          />
+    <div v-bind="scrollArea">
+      <!-- Rows at the loaded rows' boxes (a 18px title line over a 16px meta
+           line beside the 30px well), split by the same hairlines. -->
+      <div v-if="isFirstLoad" class="py-1" aria-busy="true">
+        <div v-for="(day, dayIndex) in skeletonDays" :key="dayIndex">
+          <div
+            v-if="props.groupByDay"
+            class="flex items-center gap-2.5 px-[18px] pt-3.5 pb-1.5 after:h-px after:flex-1 after:bg-(--ui-border-muted)"
+          >
+            <USkeleton class="my-[1.5px] h-2.5 w-24" />
+          </div>
+          <div class="divide-y divide-(--ui-border-muted)">
+            <DmsRowSkeleton
+              v-for="row in day"
+              :key="row"
+              class="px-[18px] py-2.5"
+              well="size-[30px] rounded-lg"
+              :lines="[
+                `my-[3px] h-3 ${SKELETON_TITLE_WIDTHS[row % SKELETON_TITLE_WIDTHS.length]}`,
+                'my-[3px] h-2.5 w-1/3',
+              ]"
+              lines-class="grid gap-px"
+            />
+          </div>
         </div>
       </div>
-    </div>
 
-    <DmsEmptyState
-      v-else-if="hasError"
-      variant="error"
-      size="sm"
-      :title="t('dms.activity_feed.error_title')"
-      :description="t('dms.activity_feed.error_description')"
-      :actions="[
-        {
-          label: t('dms.activity_feed.retry'),
-          icon: 'i-ph-arrow-clockwise',
-          color: 'neutral',
-          variant: 'outline',
-          onClick: () => refresh(),
-        },
-      ]"
-    />
-
-    <DmsEmptyState
-      v-else-if="!entries.length"
-      icon="i-ph-tray"
-      size="sm"
-      :title="
-        props.empty
-          ? processI18n(props.empty.title)
-          : t('dms.activity_feed.empty_title')
-      "
-      :description="
-        props.empty?.description
-          ? processI18n(props.empty.description)
-          : undefined
-      "
-    />
-
-    <div v-else class="py-1">
-      <section v-for="day in days" :key="day.key">
-        <!-- v2 .feed__day: "Today · Sep 29" and a hairline to the edge. -->
-        <div
-          v-if="props.groupByDay && day.name"
-          class="flex items-center gap-2.5 px-[18px] pt-3.5 pb-1.5 after:h-px after:flex-1 after:bg-(--ui-border-muted)"
-        >
-          <DmsEyebrow as="h3">
-            <b class="text-muted font-semibold">{{ day.name }}</b>
-            {{ day.date ? ` · ${day.date}` : "" }}
-          </DmsEyebrow>
-        </div>
-        <DmsActivityItem
-          v-for="(item, index) in day.items"
-          :key="item.id ?? `${day.key}-${index}`"
-          :icon="item.icon"
-          :icon-color="item.tone ?? 'neutral'"
-          :title="textOf(item, item.title)"
-          :subtitle="metaOf(item)"
-          :trailing="trailingOf(item)"
-          :unread="item.unread"
-          :mono="props.mono"
-          :to="item.to"
-          :interactive="!!item.to"
-        />
-      </section>
+      <DmsEmptyState
+        v-else-if="hasError"
+        variant="error"
+        size="sm"
+        :title="t('dms.activity_feed.error_title')"
+        :description="t('dms.activity_feed.error_description')"
+        :actions="[
+          {
+            label: t('dms.activity_feed.retry'),
+            icon: 'i-ph-arrow-clockwise',
+            color: 'neutral',
+            variant: 'outline',
+            onClick: () => refresh(),
+          },
+        ]"
+      />
+
+      <DmsEmptyState
+        v-else-if="!entries.length"
+        icon="i-ph-tray"
+        size="sm"
+        :title="
+          props.empty
+            ? processI18n(props.empty.title)
+            : t('dms.activity_feed.empty_title')
+        "
+        :description="
+          props.empty?.description
+            ? processI18n(props.empty.description)
+            : undefined
+        "
+      />
+
+      <div v-else class="py-1">
+        <section v-for="day in days" :key="day.key">
+          <!-- v2 .feed__day: "Today · Sep 29" and a hairline to the edge. -->
+          <div
+            v-if="props.groupByDay && day.name"
+            class="flex items-center gap-2.5 px-[18px] pt-3.5 pb-1.5 after:h-px after:flex-1 after:bg-(--ui-border-muted)"
+            :class="dayHeadClass"
+          >
+            <DmsEyebrow as="h3">
+              <b class="text-muted font-semibold">{{ day.name }}</b>
+              {{ day.date ? ` · ${day.date}` : "" }}
+            </DmsEyebrow>
+          </div>
+          <DmsActivityItem
+            v-for="(item, index) in day.items"
+            :key="item.id ?? `${day.key}-${index}`"
+            :icon="item.icon"
+            :icon-color="item.tone ?? 'neutral'"
+            :title="textOf(item, item.title)"
+            :subtitle="metaOf(item)"
+            :trailing="trailingOf(item)"
+            :unread="item.unread"
+            :mono="props.mono"
+            :to="item.to"
+            :interactive="!!item.to"
+          />
+        </section>
+      </div>
     </div>
   </component>
 </template>

package/frontend-vue/layers/dms-ui/app/components/blocks/BannerBlock.vue

@@ -5,7 +5,9 @@ import DmsBlockActions, {
   type BlockAction,
 } from "../../build/components/blocks/BlockActions.vue";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 
 type BannerTone = "info" | "success" | "warning" | "error" | "primary";
 
@@ -14,8 +16,9 @@ type BannerTone = "info" | "success" | "warning" | "error" | "primary";
 // Dismissals live in a cookie (like the dashboard banners) so the server
 // render already leaves a dismissed banner out instead of flashing it.
 interface BannerBlockProps extends Partial<DefaultComponentProps> {
-  title?: string;
-  description?: string;
+  /** A string (`$` for an i18n key) or a composed text. */
+  title?: BlockText;
+  description?: BlockText;
   tone?: BannerTone;
   /** Overrides the tone's icon. */
   icon?: string;
@@ -56,7 +59,7 @@ const TONE_ICONS: Record<BannerTone, string> = {
 
 useWatch(props.watchActions || [], props.componentId);
 
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 const dismissed = useDmsCookie<string[]>(DISMISSED_COOKIE, {
   default: () => [],
   maxAge: DISMISSED_MAX_AGE_S,
@@ -91,9 +94,9 @@ function dismiss(): void {
 <template>
   <DmsBanner
     v-if="isVisible"
-    :title="props.title ? processI18n(props.title) : undefined"
+    :title="props.title ? processText(props.title) : undefined"
     :description="
-      props.description ? processI18n(props.description) : undefined
+      props.description ? processText(props.description) : undefined
     "
     :icon="props.icon ?? TONE_ICONS[props.tone]"
     :tone="props.tone"

package/frontend-vue/layers/dms-ui/app/components/blocks/KeyValueListBlock.vue

@@ -8,13 +8,24 @@ import DmsBlockStatus, {
   type BlockEmptyText,
 } from "../../build/components/blocks/BlockStatus.vue";
 import { useBlockItems } from "../../build/composables/blocks/useBlockItems";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockText } from "../../../../dms-core/app/types/composed-text";
+import { isComposedText } from "../../../../dms-core/app/utils/composedText";
 
 // `KeyValueList` block (interface-dms `base/key-value-list`): label / value
 // rows (v2 .c-dl), static or from `fetchUrl` (`{ items }`), in a card by
-// default. Labels, details and text values follow the `$` i18n convention.
+// default. Labels, details and text values follow the `$` i18n convention or
+// are composed texts.
+interface KeyValueListBlockItem
+  extends Omit<KeyValueItem, "label" | "value" | "detail"> {
+  label: BlockText;
+  value?: BlockText | number | null;
+  detail?: BlockText;
+}
+
 interface KeyValueListBlockProps extends DefaultComponentProps {
-  items?: KeyValueItem[];
+  items?: KeyValueListBlockItem[];
   dense?: boolean;
   columns?: number;
   currency?: string;
@@ -50,30 +61,39 @@ const props = withDefaults(defineProps<KeyValueListBlockProps>(), {
 
 const TRANSLATED_TYPES = new Set([undefined, "text", "status", "link"]);
 
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
-const { items, isPending, hasError, refresh } = useBlockItems<KeyValueItem>({
-  items: () => props.items,
-  fetchUrl: props.fetchUrl,
-  fetchUrlMethod: props.fetchUrlMethod,
-  routeParams: () => props.routeParams,
-  watchActions: props.watchActions,
-  componentId: props.componentId,
-});
+const { items, isPending, hasError, refresh } =
+  useBlockItems<KeyValueListBlockItem>({
+    items: () => props.items,
+    fetchUrl: props.fetchUrl,
+    fetchUrlMethod: props.fetchUrlMethod,
+    routeParams: () => props.routeParams,
+    watchActions: props.watchActions,
+    componentId: props.componentId,
+  });
+
+// A composed value already says how each of its parameters is written, so it
+// is composed whatever the row's type; a plain one is translated only where
+// the type draws text.
+function resolveValue(item: KeyValueListBlockItem): KeyValueItem["value"] {
+  if (isComposedText(item.value)) return processText(item.value);
+  if (typeof item.value === "string" && TRANSLATED_TYPES.has(item.type)) {
+    return processText(item.value);
+  }
+  return item.value as KeyValueItem["value"];
+}
 
 const resolvedItems = computed<KeyValueItem[]>(() =>
   items.value.map((item) => ({
     ...item,
-    label: processI18n(item.label ?? ""),
-    detail: item.detail ? processI18n(item.detail) : undefined,
-    value:
-      typeof item.value === "string" && TRANSLATED_TYPES.has(item.type)
-        ? processI18n(item.value)
-        : item.value,
+    label: processText(item.label),
+    detail: item.detail ? processText(item.detail) : undefined,
+    value: resolveValue(item),
   })),
 );
 const title = computed(() =>
-  props.title ? processI18n(props.title) : undefined,
+  props.title ? processText(props.title) : undefined,
 );
 const isEmpty = computed(
   () => !isPending.value && !hasError.value && resolvedItems.value.length === 0,

package/frontend-vue/layers/dms-ui/app/components/blocks/NavCardGridBlock.vue

@@ -30,6 +30,9 @@ interface NavCardGridItem {
   stateTone?: Tone;
   tag?: string;
   readout?: string[];
+  /** The page's navigation badge (a category's cards), in the top corner. */
+  badge?: string;
+  badgeTone?: Tone;
 }
 
 interface NavCardGridBlockProps extends DefaultComponentProps {
@@ -125,10 +128,16 @@ const cards = computed(() =>
 // v2 .sx-grid: cards closing on a state line run a tighter rhythm, the whole
 // grid at once so the rows stay aligned.
 const hasStates = computed(() => cards.value.some((card) => !!card.state));
+// A category the viewer opens no page of is left out, title included, as the
+// navigation leaves out an empty group: the settings overview of a member
+// without a role shows no Workspace section. `empty` shows a message instead.
+const isLeftOut = computed(
+  () => !!props.categoryId && !props.empty && cards.value.length === 0,
+);
 </script>
 
 <template>
-  <section>
+  <section v-if="!isLeftOut">
     <DmsSectionHeader
       v-if="props.title || props.description"
       class="mb-3"
@@ -190,6 +199,8 @@ const hasStates = computed(() => cards.value.some((card) => !!card.state));
             :state="card.state"
             :state-tone="card.stateTone"
             :tag="card.tag"
+            :badge="card.badge"
+            :badge-tone="card.badgeTone"
             :readout="card.readout"
             :class="hasStates && 'gap-2.5'"
           />

package/frontend-vue/layers/dms-ui/app/components/blocks/StatGroupBlock.vue

@@ -8,13 +8,23 @@ import DmsBlockStatus, {
   type BlockEmptyText,
 } from "../../build/components/blocks/BlockStatus.vue";
 import { useBlockItems } from "../../build/composables/blocks/useBlockItems";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 
 // `StatGroup` block (interface-dms `base/stat-group`): the generic StatGroup
 // fed from the block options or from `fetchUrl` (`{ items }`). Texts follow
-// the `$` i18n-key convention; numeric values are formatted for the locale.
+// the `$` i18n-key convention or are composed texts; numeric values are
+// formatted for the locale.
+interface StatGroupBlockItem
+  extends Omit<StatGroupItem, "eyebrow" | "value" | "detail"> {
+  eyebrow: BlockText;
+  value: BlockText | number;
+  detail?: BlockText;
+}
+
 interface StatGroupBlockProps extends DefaultComponentProps {
-  items?: StatGroupItem[];
+  items?: StatGroupBlockItem[];
   layout?: StatGroupLayout;
   columns?: number;
   /** Accessible name of the group. */
@@ -43,31 +53,24 @@ const props = withDefaults(defineProps<StatGroupBlockProps>(), {
 
 const DEFAULT_SKELETON_COUNT = 4;
 
-const { locale } = useI18n();
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
-const { items, isPending, hasError, refresh } = useBlockItems<StatGroupItem>({
-  items: () => props.items,
-  fetchUrl: props.fetchUrl,
-  fetchUrlMethod: props.fetchUrlMethod,
-  routeParams: () => props.routeParams,
-  watchActions: props.watchActions,
-  componentId: props.componentId,
-});
-
-function formatValue(value: StatGroupItem["value"]): string {
-  if (typeof value === "number") {
-    return new Intl.NumberFormat(locale.value).format(value);
-  }
-  return processI18n(String(value ?? ""));
-}
+const { items, isPending, hasError, refresh } =
+  useBlockItems<StatGroupBlockItem>({
+    items: () => props.items,
+    fetchUrl: props.fetchUrl,
+    fetchUrlMethod: props.fetchUrlMethod,
+    routeParams: () => props.routeParams,
+    watchActions: props.watchActions,
+    componentId: props.componentId,
+  });
 
 const resolvedItems = computed<StatGroupItem[]>(() =>
   items.value.map((item) => ({
     ...item,
-    eyebrow: processI18n(item.eyebrow ?? ""),
-    value: formatValue(item.value),
-    detail: item.detail ? processI18n(item.detail) : undefined,
+    eyebrow: processText(item.eyebrow),
+    value: processText(item.value),
+    detail: item.detail ? processText(item.detail) : undefined,
   })),
 );
 </script>
@@ -88,6 +91,6 @@ const resolvedItems = computed<StatGroupItem[]>(() =>
     :skeleton-count="
       props.skeletonCount ?? props.columns ?? DEFAULT_SKELETON_COUNT
     "
-    :label="props.label ? processI18n(props.label) : undefined"
+    :label="props.label ? processText(props.label) : undefined"
   />
 </template>

package/frontend-vue/layers/dms-ui/app/components/card/NavCard.vue

@@ -6,12 +6,14 @@ import DmsStatusPill from "../status-pill/StatusPill.vue";
 import DmsAutoLink from "../link/AutoLink.vue";
 import type { Tone } from "../../types/tone";
 import { MONO_TAG_CLASS } from "../../build/utils/monoChip";
+import { navBadgeClass } from "../../build/utils/navBadge";
 
 // Navigation tile (v2 .navcard): an icon well + title + description rendered
 // as a clickable card linking elsewhere (settings overview, a module's home),
 // optionally closed by the target's live state (v2 .sx-state, pinned to the
 // bottom so the states of a row line up) or a mono readout (v2
-// .module-tile__viz). A tag follows the title (v2 .sx-mod).
+// .module-tile__viz). A tag follows the title (v2 .sx-mod); the target's
+// navigation badge sits in the top corner, drawn as the settings nav draws it.
 //
 // Built on a bare <DmsAutoLink> rather than <ULink> on purpose: ULink's theme
 // injects its own `rounded-md` which would override the .dms-card radius.
@@ -34,6 +36,10 @@ interface NavCardProps {
   statePending?: boolean;
   /** Small uppercase mono tag after the title (module tag: "SAAS"). */
   tag?: string;
+  /** The target's navigation badge ("3"), in the card's top corner. */
+  badge?: string;
+  /** Tone of the badge; neutral grey when absent. */
+  badgeTone?: Tone;
   /** Mono readout lines under the description (module tile). */
   readout?: string[];
 }
@@ -46,6 +52,8 @@ const props = withDefaults(defineProps<NavCardProps>(), {
   state: undefined,
   stateTone: "neutral",
   tag: undefined,
+  badge: undefined,
+  badgeTone: undefined,
   readout: undefined,
 });
 const attrs = useAttrs();
@@ -55,6 +63,7 @@ const theme = tv({
     root: "dms-card dms-card--interactive group flex flex-col gap-3 p-[18px] text-start",
     title: "text-highlighted min-w-0 truncate text-sm font-[650]",
     tag: `${MONO_TAG_CLASS} bg-elevated shrink-0 text-dimmed`,
+    badge: "shrink-0",
     arrow:
       "text-dimmed group-hover:text-primary ms-auto size-4 shrink-0 -translate-x-[3px] opacity-0 transition group-hover:translate-x-0 group-hover:opacity-100",
     description: "text-muted text-[13px] leading-normal",
@@ -78,6 +87,12 @@ const passthrough = computed(() => {
       <h3 :class="ui.title()">{{ props.title }}</h3>
       <span v-if="props.tag" :class="ui.tag()">{{ props.tag }}</span>
       <UIcon name="i-ph-arrow-right" :class="ui.arrow()" :aria-hidden="true" />
+      <span
+        v-if="props.badge"
+        :class="ui.badge({ class: navBadgeClass(props.badgeTone) })"
+      >
+        {{ props.badge }}
+      </span>
     </div>
 
     <p v-if="props.description" :class="ui.description()">

package/frontend-vue/layers/dms-ui/app/components/confirm/ConfirmModal.vue

@@ -2,6 +2,7 @@
 import { nextTick, useTemplateRef, watch, type FunctionalComponent } from "vue";
 import { DialogDescription, DialogTitle } from "reka-ui";
 import DmsIconWell from "../icon-well/IconWell.vue";
+import DmsModalEscHint from "../../build/components/modal/ModalEscHint.vue";
 import {
   ConfirmActionError,
   type ConfirmBodyRender,
@@ -454,16 +455,14 @@ function handleCancel() {
 
     <template #footer>
       <div class="flex w-full items-center justify-end gap-2">
-        <span
-          class="text-dimmed me-auto hidden items-center gap-1.5 text-xs sm:flex"
-        >
-          <UKbd value="Esc" size="sm" />
-          {{
+        <DmsModalEscHint
+          class="max-sm:hidden"
+          :label="
             $t(
-              isSettled ? "dms.confirm.esc_close_hint" : "dms.confirm.esc_hint",
+              isSettled ? 'dms.confirm.esc_close_hint' : 'dms.confirm.esc_hint',
             )
-          }}
-        </span>
+          "
+        />
         <UButton
           :label="
             isSettled

package/frontend-vue/layers/dms-ui/app/components/form/Form.vue

@@ -57,6 +57,11 @@ import { useInstantForm } from "../../build/composables/form/useInstantForm";
 import { useInstantSaveHeader } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
 import DmsFormEntries from "../../build/components/form/FormEntries.vue";
 import DmsFormErrorSummary from "../../build/components/form/FormErrorSummary.vue";
+import DmsFormLoadError from "../../build/components/form/FormLoadError.vue";
+import {
+  type FormRecordLoad,
+  trackFormRecordLoad,
+} from "../../build/composables/form/formRecordLoad";
 import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
 import DmsFormSections from "../../build/components/form/FormSections.vue";
 
@@ -506,7 +511,7 @@ function setFieldLoading(id: string, isLoading: boolean): void {
 const isAnyFieldLoading = computed(() => fieldLoadingStates.value.size > 0);
 
 function onSubmit(event: Parameters<typeof handleSubmit>[0]) {
-  if (!runValidators()) return;
+  if (loadFailure.value || !runValidators()) return;
   handleSubmit(event);
 }
 
@@ -522,6 +527,7 @@ allFields.value.forEach((field) => {
   ) as FormFieldValue;
 });
 
+let recordLoad: FormRecordLoad | undefined;
 if (props.fetchUrl) {
   const formLoad = await useDmsAsyncData(
     `form-${props.componentId}-${props.pageId}`,
@@ -539,15 +545,23 @@ if (props.fetchUrl) {
     formLoad.status.value = "idle";
   });
 
-  const payload = formLoad.data.value;
-  if (payload) {
+  recordLoad = trackFormRecordLoad(formLoad, (payload) => {
     if (payload.values && Object.keys(payload.values).length > 0) {
       Object.assign(state.value, payload.values);
     }
     if (payload.initial && payload.initial !== initialValues.value) {
       initialValues.value = { ...initialValues.value, ...payload.initial };
     }
-  }
+  });
+}
+
+const loadFailure = computed(() => recordLoad?.failure.value ?? null);
+const isRetryingLoad = computed(() => recordLoad?.retrying.value ?? false);
+
+/** Load the record again after a failure; it is what the form starts from. */
+async function retryRecordLoad(): Promise<void> {
+  await recordLoad?.retry();
+  if (!recordLoad?.failure.value) markFormClean();
 }
 
 // Loaded (or filled with its defaults): this is what the form starts from.
@@ -868,7 +882,15 @@ onUnmounted(async () => {
         </p>
       </header>
 
-      <div :class="surfaceClasses.body">
+      <div v-if="loadFailure" :class="surfaceClasses.body">
+        <DmsFormLoadError
+          :failure="loadFailure"
+          :retrying="isRetryingLoad"
+          @retry="retryRecordLoad"
+        />
+      </div>
+
+      <div v-else :class="surfaceClasses.body">
         <UAlert
           v-if="showConcurrentEditBanner"
           color="warning"
@@ -935,7 +957,7 @@ onUnmounted(async () => {
         on a page, the footer band of a card, a drawer or a modal. It holds
         its place while hidden, so its showing up never moves anything. -->
       <DmsSaveBar
-        v-if="canSave && !isInstant"
+        v-if="canSave && !isInstant && !loadFailure"
         :variant="usesSaveBar ? 'floating' : 'band'"
         :kind="props.kind"
         :dirty="isDirty"