@antelopejs/dms 0.7.20 → 0.8.0

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/registerDefaultFunctions.ts

@@ -1,5 +1,5 @@
 import type { LocationQueryValue } from "#dms/frontend-module";
-import { replaceUrlVariables } from "../../utils/urlVariables";
+import { resolveLinkVariables } from "../../utils/urlVariables";
 
 type RouteQuery = Record<string, LocationQueryValue | LocationQueryValue[]>;
 
@@ -23,7 +23,7 @@ export function resolveFormSuccessTarget(
   { url, preserveQuery }: FormSuccessParams,
   route: FormSuccessRoute,
 ): { path: string; query?: RouteQuery } {
-  const path = replaceUrlVariables(url, {
+  const path = resolveLinkVariables(url, {
     routeParams: route.params,
     routeQuery: route.query,
   });

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableRows.ts

@@ -1,5 +1,6 @@
 import { get } from "@nuxt/ui/runtime/utils/index.js";
 import { computed } from "vue";
+import { interpolateUrl } from "#dms-core/app/utils/url-interpolation";
 import type {
   TableViewColumn,
   TableViewListResponse,
@@ -54,7 +55,6 @@ const DESCENDING = "desc";
  */
 export const LIVE_HELD_AT_QUERY_KEY = "liveHeldAt";
 const NO_ROUTE_VALUES: ReplaceUrlVariablesContext = { routeQuery: {} };
-const ROW_ID_TOKEN = "{id}";
 
 type SourceCapabilities = TableViewSourceConfig["capabilities"];
 
@@ -251,10 +251,8 @@ export function useTableRows<T extends Record<string, unknown>>(
     id: string,
   ): Promise<T | undefined> => {
     const url = resolveUrlVariables(
-      sourceConfig.fetchRowUrl?.replaceAll(
-        ROW_ID_TOKEN,
-        encodeURIComponent(id),
-      ),
+      sourceConfig.fetchRowUrl &&
+        interpolateUrl(sourceConfig.fetchRowUrl, { id }),
       options.route?.() ?? NO_ROUTE_VALUES,
     );
     return url ? api<T>(url) : Promise.resolve(undefined);

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableUrlTab.ts

@@ -1,5 +1,11 @@
-import { watch, type Ref } from "vue";
-import { readTableUrlKey, type TableUrlScope } from "./utils/views";
+import { router as inertiaRouter } from "@inertiajs/vue3";
+import { onBeforeUnmount, onMounted, watch, type Ref } from "vue";
+import { queryOfUrl } from "./utils/urlFilters";
+import {
+  readTableUrlKey,
+  type TableUrlScope,
+  writeTableUrlKey,
+} from "./utils/views";
 
 const TAB_URL_KEY = "tab";
 
@@ -30,18 +36,42 @@ export function readTableUrlTab(
 }
 
 /**
- * Follows the URL's tab after arrival: a link or a `router.replace` naming
- * another tab of the same page switches to it without remounting the page.
- * A URL dropping the key, or naming a tab the table cannot open in place (an
- * unknown id, a link tab), leaves the open tab alone.
+ * Keeps the open tab and the URL in step after arrival. A tab the user opens
+ * is written to the URL in place (no visit, no history entry), under the key
+ * it is read from, so a reload or a shared link opens it again. A link or a
+ * `router.replace` naming another tab of the same page switches to it without
+ * remounting the page. A URL dropping the key, or naming a tab the table
+ * cannot open in place (an unknown id, a link tab), leaves the open tab alone.
  */
 export function useTableUrlTab(options: TableUrlTabOptions): void {
+  const { activeTabId, urlScope } = options;
+
+  const follow = (query: Record<string, unknown>) => {
+    const tabId = readTableUrlTab(query, urlScope);
+    if (!tabId || tabId === activeTabId.value) return;
+    if (!options.isOpenable(tabId)) return;
+    activeTabId.value = tabId;
+  };
+
+  // The tab is written in place, so the route keeps the value of the last
+  // visit: a link back to that tab leaves it unchanged, and only the visit
+  // tells it was followed. A `router.replace`, which Inertia does not
+  // announce, still moves the route.
   watch(
-    () => readTableUrlTab(options.route.query, options.urlScope),
-    (tabId) => {
-      if (!tabId || tabId === options.activeTabId.value) return;
-      if (!options.isOpenable(tabId)) return;
-      options.activeTabId.value = tabId;
-    },
+    () => readTableUrlTab(options.route.query, urlScope),
+    () => follow(options.route.query),
   );
+  let stopFollowingVisits: (() => void) | undefined;
+  onMounted(() => {
+    stopFollowingVisits = inertiaRouter.on("navigate", (event) =>
+      follow(queryOfUrl(event.detail.page.url)),
+    );
+  });
+  onBeforeUnmount(() => stopFollowingVisits?.());
+
+  watch(activeTabId, (tabId) => {
+    if (options.isOpenable(tabId)) {
+      writeTableUrlKey(urlScope, TAB_URL_KEY, tabId);
+    }
+  });
 }

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewConfig.ts

@@ -102,19 +102,15 @@ export const useTableViewConfig = <T extends Data>(
       .map((col) => ({ ...col, header: processI18n(col.header) })),
   );
 
-  // Config-derived (SSR-safe; the registry is client-only): the implicit `table`
-  // display plus explicit `displays`. Built-in defaults
+  // Config-derived (SSR-safe; the registry is client-only): the listed
+  // `displays`, else the built-in `table` alone. Built-in defaults
   // (selfManagedData/capabilities) are merged per id.
-  const resolvedDisplays: TableViewDisplayConfig[] = (() => {
-    const list: TableViewDisplayConfig[] = [{ id: TABLE_DISPLAY_ID }];
-    for (const display of config.displays ?? []) {
-      if (display.id === TABLE_DISPLAY_ID) continue;
-      list.push(display);
-    }
-    return list.map(withBuiltinDefaults);
-  })();
+  const resolvedDisplays: TableViewDisplayConfig[] = (
+    config.displays ?? [{ id: TABLE_DISPLAY_ID }]
+  ).map(withBuiltinDefaults);
 
-  const defaultDisplay = config.defaultDisplay ?? TABLE_DISPLAY_ID;
+  const defaultDisplay =
+    config.defaultDisplay ?? resolvedDisplays[0]?.id ?? TABLE_DISPLAY_ID;
 
   const initialVisibility = buildInitialColumnVisibility(config.columns ?? []);
 

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewRowActions.ts

@@ -1,3 +1,4 @@
+import { namesRowField } from "#dms-core/app/utils/url-interpolation";
 import {
   fillFormPageUrl,
   type FormContainer,
@@ -91,7 +92,6 @@ interface BulkActionConfig {
 /** Runs a confirmed action from inside its dialog (see `onConfirm`). */
 type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
 
-const ROW_URL_PLACEHOLDER = /\{[^}]+\}/;
 /** Options of a delete: from the archive, it is a permanent one. */
 interface DeleteRowsOptions {
   permanently?: boolean;
@@ -634,7 +634,7 @@ export const useTableRowActions = <T extends Data>(
    * reaches: a `from` dialog is worded for one row, so several rows keep the
    * generic confirmation. Undefined when none applies.
    */
-  // A `from` URL naming a row (`{id}`, `{_id}`…) is worded for that row
+  // A `from` URL naming a row (`{{row.id}}`, `{{row._id}}`…) is worded for that row
   // alone; one naming none receives the rows as `?ids=`, one or several, like
   // the `from` of a bulk custom action.
   const declaredBulkConfirm = (
@@ -643,7 +643,7 @@ export const useTableRowActions = <T extends Data>(
   ): ActionConfirm | undefined => {
     const declared = normalizeActionConfig(actionConfig).confirm;
     if (!declared || !isConfirmFrom(declared)) return declared;
-    if (ROW_URL_PLACEHOLDER.test(declared.from)) {
+    if (namesRowField(declared.from)) {
       return ids.length === 1 ? declared : undefined;
     }
     return {

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/recordLink.ts

@@ -1,5 +1,10 @@
 import type { CustomRowAction } from "../../../../types/row-action";
-import { readTableUrlKey, type TableUrlScope } from "./views";
+import {
+  readTableUrlKey,
+  tableUrlKey,
+  type TableUrlScope,
+  writeTableUrlKey,
+} from "./views";
 import { readFetchNotFound } from "../../../utils/fetchNotFound";
 
 /** Query key of the row a `deepLink` action has open. */
@@ -7,9 +12,7 @@ export const RECORD_URL_KEY = "record";
 
 /** The key this table writes the open row under: short on a sole table. */
 export function recordUrlKey(scope: TableUrlScope): string {
-  return scope.isSoleTableView || !scope.tableId
-    ? RECORD_URL_KEY
-    : `${scope.tableId}.${RECORD_URL_KEY}`;
+  return tableUrlKey(scope, RECORD_URL_KEY);
 }
 
 /** The row the URL names for this table, if any. */
@@ -29,13 +32,9 @@ export function writeRecordId(
   scope: TableUrlScope,
   id?: string,
 ): WrittenRecord | undefined {
-  if (typeof window === "undefined") return undefined;
-  const url = new URL(window.location.href);
-  const key = recordUrlKey(scope);
-  if (id) url.searchParams.set(key, id);
-  else url.searchParams.delete(key);
-  window.history.replaceState(window.history.state, "", url);
-  return id ? { pathname: url.pathname, key, id } : undefined;
+  const url = writeTableUrlKey(scope, RECORD_URL_KEY, id);
+  if (!url || !id) return undefined;
+  return { pathname: url.pathname, key: recordUrlKey(scope), id };
 }
 
 /**

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/views.ts

@@ -183,6 +183,35 @@ export interface UrlKeyReading {
   ignoredShortKey?: boolean;
 }
 
+/**
+ * The key this table writes `key` (`tab`, `record`) under: the short one on
+ * its page's only table, else prefixed with its id (`content.tab`).
+ */
+export function tableUrlKey(scope: TableUrlScope, key: string): string {
+  return scope.isSoleTableView || !scope.tableId
+    ? key
+    : `${scope.tableId}.${key}`;
+}
+
+/**
+ * Writes (or, without a value, removes) `key` for this table in the browser's
+ * URL in place: no visit, no history entry. Returns the URL written, or
+ * `undefined` on a server render.
+ */
+export function writeTableUrlKey(
+  scope: TableUrlScope,
+  key: string,
+  value?: string,
+): URL | undefined {
+  if (typeof window === "undefined") return undefined;
+  const url = new URL(window.location.href);
+  const scopedKey = tableUrlKey(scope, key);
+  if (value) url.searchParams.set(scopedKey, value);
+  else url.searchParams.delete(scopedKey);
+  window.history.replaceState(window.history.state, "", url);
+  return url;
+}
+
 /**
  * The value the URL gives `key` (`view`, `tab`) for this table: under its
  * prefixed key (`content.view`) or, when it is its page's only table, the

package/frontend-vue/layers/dms-ui/app/build/utils/link.ts

@@ -3,6 +3,8 @@
 // bare `<a href="#…">` (an Inertia visit would reload the page to scroll), an
 // absolute URL opens in a new tab, and everything else is a DMS route.
 
+import { pageLink } from "../composables/page/pageUrlValues";
+
 export type LinkKind = "internal" | "anchor" | "external";
 
 const EXTERNAL_LINK_PATTERN = /^(?:[a-z][a-z\d+.-]*:|\/\/)/i;
@@ -20,12 +22,14 @@ export const EXTERNAL_LINK_ATTRIBUTES = {
 } as const;
 
 /**
- * Props for a `UButton` (or `ULink`) following `to`: an external target opens
- * in a new tab, the others navigate in place.
+ * Props for a `UButton` (or `ULink`) following `to`, its page tokens
+ * (`{{params.X}}`, `{{query.X}}`) filled: an external target opens in a new
+ * tab, the others navigate in place.
  */
 export function buttonLinkProps(
-  to: string | undefined,
+  declared: string | undefined,
 ): Record<string, string> {
+  const to = pageLink(declared);
   if (!to) return {};
   return linkKind(to) === "external"
     ? { to, ...EXTERNAL_LINK_ATTRIBUTES }

package/frontend-vue/layers/dms-ui/app/build/utils/urlVariables.ts

@@ -1,11 +1,24 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+
+// Every token is `{{<scope>.<key>}}`, spaces inside the braces allowed, as the
+// server's filter tokens (`{{ user.id }}`) are.
+//
 // `{{params.id}}` takes the bare name, which on a route repeating a placeholder
 // is its last occurrence — the row id of a form page. The `:<n>` suffix reaches
 // a specific occurrence, `{{params.id:1}}` being the id of the page carrying the
 // table view (see extractRouteParams).
-const PARAM_TOKEN = /\{\{params\.(\w+(?::\d+)?)\}\}/g;
+const PARAM_KEY = String.raw`params\.(\w+(?::\d+)?)`;
 // A query key may carry dots and dashes: a period selector writes `<id>.period`.
-const QUERY_TOKEN = /\{\{query\.([\w.-]+)\}\}/g;
-const RESPONSE_TOKEN = /\{\{response\.(\w+)\}\}/g;
+const QUERY_KEY = String.raw`query\.([\w.-]+)`;
+// A response key is a path into the answered body: `{{response.data.id}}`.
+const RESPONSE_KEY = String.raw`response\.([\w.-]+)`;
+
+const tokenPattern = (key: string, flags = "g"): RegExp =>
+  new RegExp(String.raw`\{\{\s*${key}\s*\}\}`, flags);
+
+const PARAM_TOKEN = tokenPattern(PARAM_KEY);
+const QUERY_TOKEN = tokenPattern(QUERY_KEY);
+const RESPONSE_TOKEN = tokenPattern(RESPONSE_KEY);
 const TOKEN_OPENING = "{{";
 
 export interface ReplaceUrlVariablesContext {
@@ -63,8 +76,8 @@ function fillResponseTokens(
   response: Record<string, unknown> | undefined,
 ): string {
   if (!response) return text;
-  return text.replace(RESPONSE_TOKEN, (match, key) => {
-    const value = response[key];
+  return text.replace(RESPONSE_TOKEN, (match, key: string) => {
+    const value: unknown = get(response, key);
     return typeof value === "string" || typeof value === "number"
       ? String(value)
       : match;
@@ -122,10 +135,20 @@ export function resolveTextVariables(
 
 // A route token left without a value: `{{params.id}}`, `{{query.workspace}}`,
 // `{{query.sales.period}}` (a query key may carry dots and dashes, as above).
-const UNRESOLVED_ROUTE_TOKEN =
-  /\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}/g;
-const UNRESOLVED_ROUTE_VALUE =
-  /^\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}$/;
+const ROUTE_KEY = `(?:${PARAM_KEY}|${QUERY_KEY})`;
+const UNRESOLVED_ROUTE_TOKEN = tokenPattern(ROUTE_KEY);
+const UNRESOLVED_ROUTE_VALUE = new RegExp(
+  `^${tokenPattern(ROUTE_KEY, "").source}$`,
+);
+
+/**
+ * Whether a text names a value of the page (`{{params.X}}`, `{{query.X}}`):
+ * the route is only read for one that does.
+ */
+export function namesPageValue(text: string): boolean {
+  return new RegExp(UNRESOLVED_ROUTE_TOKEN.source).test(text);
+}
+
 const QUERY_SEPARATOR = "?";
 const FRAGMENT_SEPARATOR = "#";
 const PAIR_SEPARATOR = "&";

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { computed, ref, resolveComponent } from "vue";
 import DmsActivityItem from "../activity/ActivityItem.vue";
 import DmsBlockActions, {
@@ -236,6 +237,11 @@ const scrollArea = computed(() =>
 const dayHeadClass = computed(
   () => props.fillHeight && "sticky top-0 z-[1] bg-(--dms-surface-card)",
 );
+// …and the "Show N more" button at its foot, where entries taller than the
+// row would otherwise push it out of sight.
+const foldClass = computed(
+  () => props.fillHeight && "sticky bottom-0 z-[1] bg-(--dms-surface-card)",
+);
 
 const Wrapper = props.card ? resolveComponent("DmsCard") : "div";
 const wrapperProps = computed(() =>
@@ -365,13 +371,14 @@ const wrapperProps = computed(() =>
             :unread="item.unread"
             :mono="props.mono"
             :wrap="props.wrap"
-            :to="item.to"
+            :to="pageLink(item.to)"
             :interactive="!!item.to"
           />
         </section>
         <div
           v-if="foldedCount > 0"
           class="dms-activity-feed__fold border-t border-(--ui-border-muted) px-[18px] pt-2 pb-1"
+          :class="foldClass"
         >
           <UButton
             :label="foldLabel"

package/frontend-vue/layers/dms-ui/app/components/banner/Banner.vue

@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import DmsIconWell, { type IconWellSize } from "../icon-well/IconWell.vue";
-import type { SemanticColor } from "../../utils/semanticTint";
+import {
+  BANNER_TONE_ICONS,
+  type BannerTone,
+} from "../../utils/bannerToneIcons";
 
 // DMS-styled notice banner (design .banner): a left-to-right tinted wash over
 // the card surface with a boxed leading icon, used for module beta / info
 // notices. Wraps UAlert so we keep its a11y + slots while pinning the exact
 // reference look. The `cli` slot hosts the optional inset command box
 // (compose with DmsCopyButton), `actions` the right-aligned buttons.
-type BannerTone = Exclude<SemanticColor, "neutral">;
 type BannerSize = "sm" | "md";
 
 interface BannerProps {
   title?: string;
   description?: string;
+  /** Defaults to the tone's icon. */
   icon?: string;
   /** Colour of the wash and the icon well. */
   tone?: BannerTone;
@@ -39,7 +42,7 @@ interface BannerSlots {
 const props = withDefaults(defineProps<BannerProps>(), {
   title: undefined,
   description: undefined,
-  icon: "i-ph-warning",
+  icon: undefined,
   tone: "warning",
   size: "md",
   dismissible: false,
@@ -99,6 +102,8 @@ const alertUi = computed(() => ({
   actions: `items-center gap-2 mt-0 ${slots.actions ? "max-sm:basis-full max-sm:flex-wrap" : ""}`,
 }));
 
+const leadingIcon = computed(() => props.icon ?? BANNER_TONE_ICONS[props.tone]);
+
 function onOpenChange(open: boolean) {
   if (!open) emit("dismiss");
 }
@@ -116,7 +121,7 @@ function onOpenChange(open: boolean) {
     @update:open="onOpenChange"
   >
     <template #leading>
-      <DmsIconWell :icon="icon" :tone="tone" :size="SIZE_WELL[size]" />
+      <DmsIconWell :icon="leadingIcon" :tone="tone" :size="SIZE_WELL[size]" />
     </template>
 
     <template v-if="slots.description || slots.cli" #description>

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

@@ -8,14 +8,16 @@ import DmsBlockActions, {
 import { useActionTargets } from "../../build/composables/actions/useActionTargets";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { refreshPageBlocks } from "../../utils/blockRefresh";
+import {
+  BANNER_TONE_ICONS,
+  type BannerTone,
+} from "../../utils/bannerToneIcons";
 import type { CustomButton } from "../../composables/table-view/types/custom-button";
 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";
-
 /** What a banner shows (interface-dms `BannerContent`). */
 interface BannerContent {
   /** A string (`$` for an i18n key) or a composed text. */
@@ -83,14 +85,6 @@ const DISMISSED_MAX_KEYS = 40;
 const FALLBACK_COMPONENT_ID = "banner";
 const FALLBACK_PAGE_ID = "page";
 
-const TONE_ICONS: Record<BannerTone, string> = {
-  info: "i-ph-info",
-  success: "i-ph-check-circle",
-  warning: "i-ph-warning",
-  error: "i-ph-warning-circle",
-  primary: "i-ph-sparkle",
-};
-
 const { state: watchState } = useWatch(
   props.watchActions || [],
   props.componentId,
@@ -183,7 +177,7 @@ function press(action: BlockButtonAction): void {
     :description="
       banner.description ? processText(banner.description) : undefined
     "
-    :icon="banner.icon ?? TONE_ICONS[banner.tone]"
+    :icon="banner.icon ?? BANNER_TONE_ICONS[banner.tone]"
     :tone="banner.tone"
     :size="banner.size"
     :dismissible="banner.dismissible"

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { gridColumnsTemplate } from "../grid/columns";
 import {
   useCategoryNavCards,
@@ -217,7 +218,7 @@ const { t } = useI18n();
         >
           <DmsNavCard
             class="h-full"
-            :to="card.to"
+            :to="pageLink(card.to)"
             :icon="card.icon"
             :icon-tone="card.iconTone"
             :title="card.title"

package/frontend-vue/layers/dms-ui/app/components/chart/ApexChartHost.vue

@@ -24,7 +24,14 @@ interface Emits {
   (event: "drawn"): void;
 }
 
+/** The ApexCharts instance the wrapper exposes as `chart`. */
+interface ApexCore {
+  /** Apex's own (debounced) window resize handler: redraws at the container width. */
+  windowResizeHandler: () => void;
+}
+
 interface ApexChartInstance {
+  chart: ApexCore | null;
   updateOptions: (
     options: Record<string, unknown>,
     redrawPaths?: boolean,
@@ -39,6 +46,7 @@ const emit = defineEmits<Emits>();
 const REDRAW_PATHS = false;
 const ANIMATE = true;
 const UPDATE_SYNCED_CHARTS = false;
+const WIDTH_TOLERANCE_PX = 1;
 
 const { locale } = useI18n();
 
@@ -57,6 +65,7 @@ onMounted(() => {
   void ensureApexLocale(locale.value).catch(() => undefined);
 });
 
+const hostRef = ref<HTMLElement | null>(null);
 const chartRef = ref<ApexChartInstance | null>(null);
 
 /**
@@ -123,10 +132,31 @@ watch(
 function onDrawn() {
   emit("drawn");
 }
+
+function isDrawnAtStaleWidth(host: HTMLElement): boolean {
+  const svg = host.querySelector("svg.apexcharts-svg");
+  if (!svg) return false;
+  const drawnWidth = svg.getBoundingClientRect().width;
+  const hostWidth = host.getBoundingClientRect().width;
+  return Math.abs(drawnWidth - hostWidth) > WIDTH_TOLERANCE_PX;
+}
+
+/**
+ * Apex drops its container's resizes while an animation runs, so a sidebar
+ * collapsed or expanded during one leaves the chart at its old width, past
+ * its card when the container shrank, until the next window resize. Once the
+ * animation is over, a chart drawn at another width than its host redraws.
+ */
+function redrawIfResizedWhileAnimating() {
+  const host = hostRef.value;
+  const chart = chartRef.value?.chart;
+  if (!host || !chart || !isDrawnAtStaleWidth(host)) return;
+  chart.windowResizeHandler();
+}
 </script>
 
 <template>
-  <div class="dms-apex">
+  <div ref="hostRef" class="dms-apex">
     <ApexChart
       ref="chartRef"
       :type="apexType"
@@ -135,6 +165,7 @@ function onDrawn() {
       :series="apexSeries"
       @mounted="onDrawn"
       @updated="onDrawn"
+      @animation-end="redrawIfResizedWhileAnimating"
     />
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/components/check-list/CheckList.vue

@@ -75,7 +75,7 @@ const ICONS: Record<
     ok: "i-ph-check",
     warn: "i-ph-warning",
     error: "i-ph-x",
-    pending: "i-ph-x",
+    pending: "i-ph-circle",
     info: "i-ph-arrow-right",
   },
 };

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import type { FormProps } from "../../composables/form/types/props";
 import type {
   FormData,
@@ -64,6 +65,7 @@ import DmsFormErrorSummary from "../../build/components/form/FormErrorSummary.vu
 import DmsFormLoadError from "../../build/components/form/FormLoadError.vue";
 import {
   type FormRecordLoad,
+  missingRecordFailure,
   trackFormRecordLoad,
 } from "../../build/composables/form/formRecordLoad";
 import DmsFormRequiredLegend from "./FormRequiredLegend.vue";
@@ -492,7 +494,7 @@ function cancelForm(): void {
     window.history.back();
     return;
   }
-  if (props.backTo) void router.push(props.backTo);
+  if (props.backTo) void router.push(pageLink(props.backTo));
 }
 
 const validators = new Set<FormValidator>();
@@ -573,7 +575,15 @@ if (props.fetchUrl) {
   });
 }
 
-const loadFailure = computed(() => recordLoad?.failure.value ?? null);
+const loadFailure = computed(
+  () =>
+    recordLoad?.failure.value ??
+    missingRecordFailure({
+      requiresRecord: props.requiresRecord,
+      fetchUrl: props.fetchUrl,
+      resolvedFetchUrl: resolvedFetchUrl.value,
+    }),
+);
 const isRetryingLoad = computed(() => recordLoad?.retrying.value ?? false);
 
 /** Load the record again after a failure; it is what the form starts from. */

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
 import {
   buildCascaderTree,
   CASCADER_FETCH_LIMIT,
@@ -68,8 +69,10 @@ interface CascaderResponse {
 
 const { data, status, execute } = await useDmsAsyncData(
   `cascader-${instanceId}`,
-  () =>
-    $authFetch<CascaderResponse>(props.searchUrl, {
+  () => {
+    const url = pageRequestUrl(props.searchUrl);
+    if (!url) return Promise.resolve({ results: [], total: 0 });
+    return $authFetch<CascaderResponse>(url, {
       params: { limit: CASCADER_FETCH_LIMIT },
       onRequestError: ({ error }: { error: Error }) => {
         toast.add({
@@ -78,7 +81,8 @@ const { data, status, execute } = await useDmsAsyncData(
           description: error.message,
         });
       },
-    }),
+    });
+  },
   { lazy: true, immediate: false },
 );
 

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

@@ -349,6 +349,12 @@ const acceptString = computed(() =>
   props.constraints?.allowedMimetypes?.join(","),
 );
 
+const dropPromptKey = computed(() =>
+  props.multiple
+    ? "dms.form.file.drop_prompt_multiple"
+    : "dms.form.file.drop_prompt",
+);
+
 const maxSizeFormatted = computed(() => {
   if (!props.constraints?.maxSize) return null;
   return formatFileSize(props.constraints.maxSize);
@@ -373,6 +379,7 @@ onScopeDispose(() => {
       :disabled="disabled || isUploading"
       :color="color"
       :highlight="highlight"
+      :label="$t(dropPromptKey)"
       v-bind="dropZoneAria"
     >
       <template v-if="maxSizeFormatted" #description>