@antelopejs/dms 0.9.8 → 0.10.0

package/frontend-vue/layers/dms-ui/app/composables/form/useForm.ts

@@ -1,6 +1,6 @@
 import type { FormSubmitEvent } from "@nuxt/ui";
 import { z } from "zod";
-import { onMounted, unref } from "vue";
+import { nextTick, onMounted, onScopeDispose, unref } from "vue";
 import type { FormProps, FormFetchResponse, FormSubmitResponse } from "./types";
 import { jsonSchemaToZod } from "json-schema-to-zod";
 import { FormEvents } from "./types/events";
@@ -43,6 +43,7 @@ import {
   isPlainObject,
   sameFormValue,
 } from "../../build/composables/unsaved-changes/formValue";
+import { createStartingValueTracker } from "../../build/composables/form/fieldValueRule";
 
 /** A server error shown under its field, translated. */
 export interface FormServerFieldError {
@@ -361,6 +362,26 @@ export function resolveSubmitDefaults(
   return Object.keys(resolved).length > 0 ? resolved : undefined;
 }
 
+/**
+ * The values a form's fields start from among its submit defaults: a field
+ * the form submits under anyway (the parent a table is filtered on by a route
+ * parameter) shows it from the start, and a mandatory one is filled. A
+ * default with no field of the form is only submitted.
+ */
+export function fieldValuesOfSubmitDefaults(
+  fields: ReadonlyArray<{ id: string }>,
+  submitDefaults: Record<string, unknown> | undefined,
+): FormData {
+  const values: FormData = {};
+  if (!submitDefaults) return values;
+  for (const { id } of fields) {
+    if (id in submitDefaults) {
+      values[id] = submitDefaults[id] as FormFieldValue;
+    }
+  }
+  return values;
+}
+
 export function makeFieldSchemaRequired(schema: z.ZodTypeAny): z.ZodTypeAny {
   if (schema instanceof z.ZodOptional || schema instanceof z.ZodNullable) {
     return makeFieldSchemaRequired(schema.unwrap());
@@ -459,10 +480,14 @@ function watchFieldChanges(
     componentId: string,
     payload?: unknown,
   ) => void,
+  isStartingValue: (fieldId: string, value: unknown) => boolean,
 ): void {
   if (!componentId) return;
   const id = componentId;
   const previousValuesJson: Record<string, string> = {};
+  // `initial` on each change: a watch writing values (SetFieldValue) leaves
+  // the values the form started from to the record it loaded.
+  const isInitial = createStartingValueTracker(isStartingValue);
 
   // From mount, once `useWatch` listens: the values the form starts from
   // (defaults, loaded row) reach the watch rules too, not only later edits.
@@ -485,6 +510,7 @@ function watchFieldChanges(
           fieldId,
           value: newState[fieldId],
           formValues: newState,
+          initial: isInitial(fieldId, newState[fieldId]),
         });
         previousValuesJson[fieldId] = newJson;
       }
@@ -544,15 +570,41 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
   const initialValues = ref<FormData>({});
   const submitSucceeded = ref(false);
 
-  watchFieldChanges(state, props.componentId, sendComponentEvent);
+  const allFields = computed(() => flattenFields(props.fields));
+
+  // Whether a field holds the value the form started from: its default or
+  // the loaded record's, compared as its data type does (a joined row is
+  // the same as the id the picker holds).
+  const isStartingValue = (fieldId: string, value: unknown): boolean => {
+    const field = allFields.value.find((entry) => entry.id === fieldId);
+    const initial = initialValues.value[fieldId];
+    return field
+      ? isSameFieldValue(field, value, initial)
+      : sameFormValue(value, initial);
+  };
+
+  watchFieldChanges(
+    state,
+    props.componentId,
+    sendComponentEvent,
+    isStartingValue,
+  );
 
   // A successful submit leaves the form at its saved state; a later edit makes
   // it dirty again, so clear `submitSucceeded` to re-arm the unsaved-changes
   // guard (and the realtime release-on-unmount) for the new edits. Without this
   // the guard would stay permanently disabled after the first save.
+  // Set while the record a save stored reaches the state: what the server
+  // stored is no edit made since.
+  let isApplyingSavedRecord = false;
+  let isDisposed = false;
+  onScopeDispose(() => {
+    isDisposed = true;
+  });
   watch(
     () => state.value,
     () => {
+      if (isApplyingSavedRecord) return;
       if (submitSucceeded.value) {
         submitSucceeded.value = false;
       }
@@ -560,8 +612,6 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     { deep: true },
   );
 
-  const allFields = computed(() => flattenFields(props.fields));
-
   const disabledFields = computed(
     () => state.value.disabledFields as Set<string> | undefined,
   );
@@ -607,27 +657,31 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
   const isRecordUpdate = computed(
     () => !!resolvedFetchUrl.value && props.submitUrlMethod !== HttpMethod.post,
   );
+  // A create form (a table view's add form, the duplicate it opens) makes a
+  // new row: what it holds is new as a whole, nothing "changed" in it.
+  const createsRecord = props.kind === "create";
 
-  const fetchData = async () => {
+  /** Reads the record at `fetchUrl`: its values, mapped for the fields. */
+  const loadRecord = async () => {
     if (!props.fetchUrl) return undefined;
+    const processedUrl = resolveUrlVariables(props.fetchUrl, buildUrlContext());
+    if (processedUrl === undefined) return undefined;
+
+    const fetchedData = await $authFetch<FormFetchResponse>(processedUrl, {
+      method: props.fetchUrlMethod || "GET",
+      headers: { [CONTENT_LANGUAGE_HEADER]: "*" },
+    });
+
+    initialValues.value = {
+      ...initialValues.value,
+      ...JSON.parse(JSON.stringify(fetchedData)),
+    };
+    return processBeforeStateMappers(fetchedData, props.fields, getDataType);
+  };
 
+  const fetchData = async () => {
     try {
-      const processedUrl = resolveUrlVariables(
-        props.fetchUrl,
-        buildUrlContext(),
-      );
-      if (processedUrl === undefined) return undefined;
-
-      const fetchedData = await $authFetch<FormFetchResponse>(processedUrl, {
-        method: props.fetchUrlMethod || "GET",
-        headers: { [CONTENT_LANGUAGE_HEADER]: "*" },
-      });
-
-      initialValues.value = {
-        ...initialValues.value,
-        ...JSON.parse(JSON.stringify(fetchedData)),
-      };
-      return processBeforeStateMappers(fetchedData, props.fields, getDataType);
+      return await loadRecord();
     } catch (error) {
       // A server render shows the failure in the form (FormLoadError) and
       // hands it to the browser; a toast it added would show in its HTML
@@ -767,6 +821,63 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     options.onSaved?.();
   };
 
+  /** Puts the record a save stored in the state: no edit made since. */
+  const applyStoredRecord = async (stored: FormData): Promise<void> => {
+    isApplyingSavedRecord = true;
+    Object.assign(state.value, stored);
+    options.onSaved?.();
+    await nextTick();
+    isApplyingSavedRecord = false;
+  };
+
+  /**
+   * Reads the record back from `fetchUrl` once its update went through, for
+   * a route that does not answer it. An edit made meanwhile is kept, and a
+   * failed read leaves the values as they were sent.
+   */
+  const refreshSavedRecord = async (): Promise<void> => {
+    let stored: FormData | undefined;
+    try {
+      stored = (await loadRecord()) as FormData | undefined;
+    } catch {
+      return;
+    }
+    if (isDisposed || !submitSucceeded.value) return;
+    if (!stored || Object.keys(stored).length === 0) return;
+    await applyStoredRecord(stored);
+  };
+
+  /**
+   * Shows the record its update stored rather than what was typed: the
+   * server may store what it was sent normalized (a VAT number stripped of
+   * its spaces, the empty rows of a list dropped). A route that answers the
+   * record (a table view's edit route, interface-data-api 0.3) is read
+   * without a second request: its answer holds the record when it carries
+   * one of the form's fields, and only those are taken. Any other answer
+   * (`{ success: true }`, nothing) has the form read `fetchUrl` again. The
+   * form stays saved.
+   */
+  const showSavedRecord = async (
+    response: FormSubmitResponse | undefined,
+  ): Promise<void> => {
+    if (!submitSucceeded.value) return;
+    const fieldIds = new Set(allFields.value.map((field) => field.id));
+    // The route answers JSON, as `fetchUrl` does: field values.
+    const record: FormData = isPlainObject(response)
+      ? (Object.fromEntries(
+          Object.entries(response).filter(([key]) => fieldIds.has(key)),
+        ) as FormData)
+      : {};
+    if (Object.keys(record).length === 0) return refreshSavedRecord();
+    initialValues.value = {
+      ...initialValues.value,
+      ...JSON.parse(JSON.stringify(record)),
+    };
+    await applyStoredRecord(
+      processBeforeStateMappers(record, props.fields, getDataType) as FormData,
+    );
+  };
+
   const handleSubmitSuccess = async (
     response: FormSubmitResponse | undefined,
     plainData: FormData,
@@ -854,6 +965,14 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     try {
       const response = await sendSubmit(target.url, plainData, markSubmitSaved);
       await handleSubmitSuccess(response, plainData);
+      // A redirect leaves the form, an action form starts over.
+      if (
+        isRecordUpdate.value &&
+        props.kind !== "action" &&
+        !props.redirectOnSuccess
+      ) {
+        await showSavedRecord(response);
+      }
     } catch (error) {
       reportSubmitError(error);
     } finally {
@@ -914,5 +1033,7 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     isFieldGroup,
     submitSucceeded,
     resolvedFetchUrl,
+    createsRecord,
+    effectiveSubmitDefaults,
   };
 };

package/frontend-vue/layers/dms-ui/app/composables/live/usePageLive.ts

@@ -4,7 +4,10 @@ import {
   onScopeDispose,
   type ComputedRef,
 } from "vue";
-import { currentPageLive } from "../../build/composables/live/currentPageLive";
+import {
+  currentPageLive,
+  isServerPageLive,
+} from "../../build/composables/live/currentPageLive";
 import type { PageLiveController } from "../../build/composables/live/pageLiveController";
 import type { PageLiveNote, PageLiveNoteInput } from "../../types/live";
 
@@ -68,8 +71,11 @@ export interface PageLiveState {
  * paused, show what was missed, offer its own switch, hold the page while the
  * user types.
  *
- * On a page without `live`, or while server-rendering, `isEnabled` is false,
- * the page reads as live and never paused, and its actions do nothing.
+ * On a page without `live`, `isEnabled` is false, the page reads as live and
+ * never paused, and its actions do nothing. A server render reads the page as
+ * live and never paused too, but `isEnabled` says whether it declares `live`:
+ * the browser hydrates the page's blocks with its controller installed, so
+ * the server draws them as it will.
  *
  * ```ts
  * const { isPaused, missedCount, resume, hold, release } = usePageLive();
@@ -82,8 +88,9 @@ export interface PageLiveState {
 export function usePageLive(): PageLiveState {
   const isPaused = computed(() => currentPageLive()?.isPaused.value ?? false);
   const hold = usePageLiveHold();
+  const isServerLive = isServerPageLive();
   return {
-    isEnabled: computed(() => currentPageLive() !== null),
+    isEnabled: computed(() => currentPageLive() !== null || isServerLive),
     isLive: computed(() => !isPaused.value),
     isPaused,
     pauseReason: computed(() => currentPageLive()?.pauseReason.value ?? null),

package/frontend-vue/layers/dms-ui/app/composables/page-toolbar/usePageToolbarSize.ts

@@ -0,0 +1,30 @@
+import { computed, type ComputedRef } from "vue";
+import { usePageToolbar } from "../../build/composables/page-toolbar/pageToolbarContext";
+import type { PageToolbarSize } from "../../types/page-toolbar";
+import { PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES } from "../../build/composables/page-toolbar/toolbarControlHeight";
+
+const DEFAULT_SIZE: PageToolbarSize = "sm";
+
+/** The size of the `PageToolbar` holding a component (see {@link usePageToolbarSize}). */
+export interface PageToolbarSizeState {
+  /** The toolbar's size, `sm` outside one. */
+  size: ComputedRef<PageToolbarSize>;
+  /** The height class its controls share at that size (`h-7` at `sm`). */
+  heightClass: ComputedRef<string>;
+}
+
+/**
+ * The size of the `PageToolbar` a module's component sits in, for a leading
+ * block (a scope chip, a picker) to stand as tall as the toggle and the
+ * period beside it.
+ */
+export function usePageToolbarSize(): PageToolbarSizeState {
+  const toolbar = usePageToolbar();
+  const size = computed(() => toolbar?.size.value ?? DEFAULT_SIZE);
+  return {
+    size,
+    heightClass: computed(
+      () => PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES[size.value],
+    ),
+  };
+}

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

@@ -4,8 +4,8 @@ import type { TableViewColumn } from "./types";
 /**
  * The few inputs the (unchanged) KanbanBoard needs beyond the generic
  * {@link TableViewDisplayContext}: the two-way group-by field shared with the
- * options-menu selector, and the raw edit/delete action configs for per-row rule
- * evaluation. Everything else (query, componentId, pageId, labelKey) is read from
+ * options-menu selector, the raw edit/delete action configs for per-row rule
+ * evaluation, and the callback told of a saved move. Everything else (query, componentId, pageId, labelKey) is read from
  * the generic context. Provided by TableView and injected by the kanban adapter
  * — slotted content is a descendant of TableView, so a native inject reaches it.
  */
@@ -13,6 +13,8 @@ export interface KanbanDisplayBridge {
   groupByField: Ref<string>;
   editAction?: boolean | RowActionConfig;
   deleteAction?: boolean | RowActionConfig;
+  /** A card was moved to another column and saved: the counts read again. */
+  onCardMoved?: () => void;
 }
 
 export const KANBAN_DISPLAY_BRIDGE_KEY: InjectionKey<KanbanDisplayBridge> =

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/action-target.ts

@@ -19,12 +19,31 @@ export interface SidePanelTargetOptions {
    * `{ index }` (from 1) and `{ total }`.
    */
   positionLabel?: string;
-  /** The open row is kept in the URL (`?record=`): on unless `false`. */
+  /**
+   * The open row is kept in the URL (`?record=`): on unless `false` for a
+   * side panel, off unless `true` for a drawer.
+   */
   deepLink?: boolean;
   /** The state drawn on a row that no longer exists (a 404). */
   notFound?: SidePanelNotFoundTexts;
 }
 
+/**
+ * What a `drawer` target sets besides its component (backend
+ * `DrawerTargetOptions`): the row options of a side panel, for a drawer
+ * opened on a row, and its size.
+ */
+export interface DrawerTargetOptions
+  extends Omit<SidePanelTargetOptions, "title"> {
+  /** Width of a `left` / `right` drawer: a modal's at that size; 600px without one. */
+  size?: ModalSize;
+  /**
+   * The DMS draws the row header (title, position, previous / next): on when
+   * `rowTitle` or `positionLabel` is set, unless `false`.
+   */
+  rowHeader?: boolean;
+}
+
 /**
  * Fetches a file with the user's session and saves it (backend
  * `DownloadActionTarget`).
@@ -38,14 +57,14 @@ export interface DownloadActionTarget {
 }
 
 export type ActionTarget =
-  | {
+  | ({
       type: "drawer";
       component: ComponentInfo;
       title?: string;
       description?: string;
       /** Edge the drawer slides in from (`bottom` by default). */
       direction?: DrawerDirection;
-    }
+    } & DrawerTargetOptions)
   | {
       type: "modal";
       size?: ModalSize;

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/config.ts

@@ -274,6 +274,8 @@ export interface TableViewConfig<T extends Data>
   location: string;
   enableTableExport?: boolean;
   archiveMode?: boolean;
+  /** Caption count while the archived rows show; "Archived: {count}" else. */
+  archivedCountLabel?: string;
   defaultFilters?: TableFilter[];
   columns: TableViewColumn[];
   labelKey?: string;
@@ -298,6 +300,8 @@ export interface TableViewConfig<T extends Data>
   displays?: TableViewDisplayConfig[];
   /** Display shown by default when the user has no saved preference. Defaults to the first display. */
   defaultDisplay?: string;
+  /** Display a phone opens on when the user has no saved choice; one of `displays`. */
+  mobileDisplay?: string;
   /** Expandable rows: caret column + detail band. */
   expandable?: TableViewExpandableConfig;
   /** How much the table draws around its rows. */

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/display.ts

@@ -87,7 +87,11 @@ export interface TableViewDisplayActions<T> {
   canDeleteRow: (item: T) => boolean;
   add: () => void;
   edit: (item: T) => void;
-  delete: (ids: string[]) => void;
+  /**
+   * Deletes the rows once confirmed. A display drawing rows the grid does not
+   * list (a kanban card) hands them in `rows`, so a dialog can name them.
+   */
+  delete: (ids: string[], rows?: T[]) => void;
   duplicate: (id: string) => void;
   details: (item: T) => void;
   /** What a click on the row does in the grid: its default action. */
@@ -150,6 +154,10 @@ export interface TableViewCardReorder {
 export interface TableViewCardConfig {
   fields?: string[];
   component?: ComponentInfo;
+  /** `cards` only: the narrowest a card gets, a CSS length (`230px` left out). */
+  minWidth?: string;
+  /** `cards` only: the height of a placeholder card, a CSS length. */
+  skeletonHeight?: string;
 }
 
 /**
@@ -180,6 +188,13 @@ export interface TableViewCardProps<T = Record<string, unknown>> {
    * caller who may edit: the card's move handle, to draw somewhere on it.
    */
   reorder?: TableViewCardReorder;
+  /**
+   * `cards` only: the row's actions as the grid row offers them (its inline
+   * buttons and its … menu, with their rules and confirmations), to draw
+   * with `<component :is="rowActions" />`. It draws nothing for a table with
+   * no row action, and stops its clicks from reaching the card.
+   */
+  rowActions?: Component;
 }
 
 /**
@@ -239,6 +254,14 @@ export interface TableViewDisplayContext<T = Record<string, unknown>> {
   pageId?: string;
   /** Per-instance options declared for this display in the backend config. */
   options?: Record<string, unknown>;
+  /**
+   * A self-managed display hands the rows it shows, in the order the user
+   * reads them (a board: column by column), each time they change: a row
+   * opened from it steps through them in its drawer or side panel ("3 of
+   * 12", previous / next, J and K). Without it, a self-managed display's row
+   * opens without steps. The shared list's displays need not call it.
+   */
+  setShownRows?: (rows: T[]) => void;
   /** Re-fetch the table view (shared list + tab counts + active display). */
   refresh: () => Promise<void> | void;
   /**

package/frontend-vue/layers/dms-ui/app/plugins/closing-layers.client.ts

@@ -0,0 +1,10 @@
+import { watchClosingLayers } from "../build/composables/containers/closingLayers";
+
+/**
+ * Every dialog the DMS or a module renders lets the page be clicked as soon
+ * as it starts closing: one place for UModal, USlideover, UDrawer, the
+ * confirm dialogs and DynamicDrawer / DynamicModal alike.
+ */
+export default defineDmsPlugin(() => {
+  watchClosingLayers(document);
+});

package/frontend-vue/layers/dms-ui/app/plugins/live-pause-source.ts

@@ -0,0 +1,15 @@
+import { LIVE_PAUSE_SOURCE } from "#dms-core/app/composables/live/livePauseSource";
+import { currentPageLive } from "../build/composables/live/currentPageLive";
+
+/**
+ * Gives the core layer the pause of the page on screen (its live
+ * controller), so a component's own polling (`useApiData`'s
+ * `refreshInterval`) stops with the page's blocks. The server renders no
+ * poll and installs no controller: it reads as never paused.
+ */
+export default defineDmsPlugin(({ vueApp }) => {
+  vueApp.provide(
+    LIVE_PAUSE_SOURCE,
+    () => currentPageLive()?.isPaused.value ?? false,
+  );
+});

package/frontend-vue/layers/dms-ui/app/plugins/register.ts

@@ -2,10 +2,12 @@ import { registerDefaultDataTypes } from "../build/composables/data-types/regist
 import { registerDefaultFunctions } from "../build/composables/table-view/registerDefaultFunctions";
 import { registerFormFunctions } from "../build/composables/form/registerFormFunctions";
 import { registerBlockFunctions } from "../build/composables/blocks/registerBlockFunctions";
+import { trackPageArrivals } from "../build/composables/table-view/utils/pageArrival";
 
 export default defineDmsPlugin(() => {
   registerDefaultDataTypes();
   registerDefaultFunctions();
   registerFormFunctions();
   registerBlockFunctions();
+  trackPageArrivals();
 });

package/frontend-vue/layers/dms-ui/app/types/input-number.ts

@@ -1,13 +1,14 @@
 /**
  * Why a number field keeps another value than the one typed: above its `max`,
- * below its `min`, or off its `step`.
+ * below its `min`, or off its `step` (when it snaps to it: `stepSnapping`).
  */
 export type InputNumberAdjustmentReason = "min" | "max" | "step";
 
 /**
  * What `DmsInputNumber` emits as `adjust` when it settles a typed number on
  * another value (on leaving the field, or on Enter): 1020 typed in a field of
- * steps of 50 gives `{ typed: 1020, value: 1000, reason: "step" }`.
+ * steps of 50 that snaps to them gives
+ * `{ typed: 1020, value: 1000, reason: "step" }`.
  */
 export interface InputNumberAdjustment {
   /** The number as typed. */

package/frontend-vue/layers/dms-ui/app/types/page-toolbar.ts

@@ -0,0 +1,7 @@
+/**
+ * The sizes a `PageToolbar` draws its controls at (`xs` 24px, `sm` 28px,
+ * `md` 32px tall), as `usePageToolbarSize()` reports them to a module's
+ * leading block. The same values as `PageToolbarSize` of
+ * `@antelopejs/interface-dms/base/page-toolbar`.
+ */
+export type PageToolbarSize = "xs" | "sm" | "md";

package/frontend-vue/layers/dms-ui/app/types/row-action.ts

@@ -24,8 +24,6 @@ export interface CustomRowAction {
   rule?: RowActionRule;
   /** Inline button instead of a menu entry (the backend serializes `isVisible`). */
   isVisible?: boolean;
-  /** Legacy spelling of `isVisible`, still honoured. */
-  visible?: boolean;
   /**
    * Preferred row-click target when its rule accepts the row: a double-click,
    * or a single click on a table with `rowClick: "single"`.

package/frontend-vue/layers/dms-ui/app/types/row-navigation.ts

@@ -0,0 +1,17 @@
+/**
+ * What a drawer or modal opened on a row receives to step through the rows
+ * of the table (`navigation` prop): J and K do the same. The steps follow the
+ * open row's neighbours in the table's current order, past the rows loaded:
+ * rows arriving or leaving meanwhile (a live table) never make a step skip
+ * or revisit one.
+ */
+export interface RowNavigation {
+  /** Position of the row among all the rows the table lists, from 0. */
+  index: number;
+  /** The rows the table lists: its count, beyond the page loaded. */
+  total: number;
+  hasPrev: boolean;
+  hasNext: boolean;
+  prev: () => void;
+  next: () => void;
+}

package/frontend-vue/layers/dms-ui/app/types/table/query.ts

@@ -10,5 +10,6 @@ export interface TableQueryParams {
   sortKey?: string;
   sortDirection?: SortDirection;
   showArchived?: boolean;
-  [key: `filter_${string}`]: string | number | undefined;
+  /** A list sends the key once per filter, which a row must all pass. */
+  [key: `filter_${string}`]: string | string[] | number | undefined;
 }

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

@@ -1,3 +1,5 @@
+import { markPageRead } from "../build/composables/live/pageReadClock";
+
 /**
  * The window event a data block (StatGroup, KeyValueList, NavCardGrid,
  * ActivityFeed, KPI, top list, meter, chart, a tab set's badges, table view)
@@ -43,7 +45,7 @@ export function refreshPageBlocks(): Promise<void> {
     waitUntil: (work) => void pending.push(work),
   };
   window.dispatchEvent(new CustomEvent(BLOCK_REFRESH_EVENT, { detail }));
-  return Promise.allSettled(pending).then(() => undefined);
+  return Promise.allSettled(pending).then(() => markPageRead());
 }
 
 /**

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

@@ -0,0 +1,24 @@
+/**
+ * The children of a layout block (a Card, a VStack, a Grid) as
+ * `RecursiveComponent` draws them: each child's component resolved by its
+ * registered name, a `div` when none matches, its own children likewise.
+ */
+export function resolveComponentChildren(
+  children: ComponentChild[],
+): ResolvedComponentInfo[] {
+  return children.map((child) => {
+    const { id, component, ...additionalProps } = child;
+    return {
+      id,
+      options: component.options,
+      component: component.componentName
+        ? resolveDmsComponent(component.componentName) || "div"
+        : "div",
+      componentName: component.componentName,
+      children: component.children
+        ? resolveComponentChildren(component.children)
+        : [],
+      ...additionalProps,
+    };
+  });
+}