@antelopejs/dms 0.9.8 → 0.11.0

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

@@ -1,11 +1,15 @@
 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";
 import type { FormData, FormFieldValue } from "./types/value";
-import type { FormField, FormFieldOrGroup } from "./types/field";
+import type {
+  FieldCondition,
+  FormField,
+  FormFieldOrGroup,
+} from "./types/field";
 import { isFieldGroup } from "./types/field";
 import { resolveResponseToast } from "../../build/utils/responseWarning";
 import { processFieldI18n } from "../../build/utils/fieldOptionsI18n";
@@ -35,14 +39,17 @@ interface FormSubmitNotice {
 import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
 import {
   type ApiFieldError,
+  apiErrorStatus,
   apiErrorText,
   resolveFieldErrors,
 } from "#dms-core/app/composables/useFieldErrors";
+import { HTTP_NOT_FOUND } from "#dms-core/app/utils/http-status";
 import { isBlankValue } from "#dms-core/app/composables/useFormValidation";
 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 +368,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());
@@ -451,6 +478,34 @@ export function isFieldMarkedRequired(
   return !!field.required || (required?.has(field.id) ?? false);
 }
 
+const meetsCondition = (
+  condition: FieldCondition,
+  values: Record<string, unknown>,
+): boolean => condition.in.includes(values[condition.field] ?? null);
+
+/**
+ * The fields the values hide (`visibleWhen` not met) or disable
+ * (`disabledWhen` met), added to those the watches hide or disable: the
+ * conditions hold from the values the form opens with, without a watch.
+ */
+export function withConditionFields(
+  fields: ReadonlyArray<Pick<FormField, "id" | "visibleWhen" | "disabledWhen">>,
+  values: Record<string, unknown>,
+  watched: { disabled?: Set<string>; hidden?: Set<string> },
+): { disabled: Set<string>; hidden: Set<string> } {
+  const disabled = new Set(watched.disabled);
+  const hidden = new Set(watched.hidden);
+  for (const field of fields) {
+    if (field.visibleWhen && !meetsCondition(field.visibleWhen, values)) {
+      hidden.add(field.id);
+    }
+    if (field.disabledWhen && meetsCondition(field.disabledWhen, values)) {
+      disabled.add(field.id);
+    }
+  }
+  return { disabled, hidden };
+}
+
 function watchFieldChanges(
   state: Ref<Record<string, unknown>>,
   componentId: string | undefined,
@@ -459,10 +514,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 +544,7 @@ function watchFieldChanges(
           fieldId,
           value: newState[fieldId],
           formValues: newState,
+          initial: isInitial(fieldId, newState[fieldId]),
         });
         previousValuesJson[fieldId] = newJson;
       }
@@ -544,15 +604,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,15 +646,16 @@ 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,
+  const inactiveFields = computed(() =>
+    withConditionFields(allFields.value, state.value, {
+      disabled: state.value.disabledFields as Set<string> | undefined,
+      hidden: state.value.hiddenFields as Set<string> | undefined,
+    }),
   );
 
-  const hiddenFields = computed(
-    () => state.value.hiddenFields as Set<string> | undefined,
-  );
+  const disabledFields = computed(() => inactiveFields.value.disabled);
+
+  const hiddenFields = computed(() => inactiveFields.value.hidden);
 
   const requiredFields = computed(
     () => state.value.requiredFields as Set<string> | undefined,
@@ -607,32 +694,39 @@ 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
       // alone, which the browser's toasts never hold.
-      if (!import.meta.env.SSR) showFetchErrorToast(error);
+      // A 404 is no error either: the form says the record is not found.
+      if (!import.meta.env.SSR && apiErrorStatus(error) !== HTTP_NOT_FOUND) {
+        showFetchErrorToast(error);
+      }
       throw error;
     }
   };
@@ -767,6 +861,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 +1005,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 +1073,7 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     isFieldGroup,
     submitSucceeded,
     resolvedFetchUrl,
+    createsRecord,
+    effectiveSubmitDefaults,
   };
 };

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

@@ -1,10 +1,15 @@
 import {
   computed,
   getCurrentScope,
+  onMounted,
   onScopeDispose,
+  shallowRef,
   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 +73,16 @@ 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. The rest of the state is born in the
+ * browser (the realtime stream, the page's reads, a pause): a component
+ * hydrating the server's HTML reads it as the server did (live, not polling,
+ * never read, nothing missed) until its own `onMounted`, then follows the
+ * page. A component mounted afresh, after a client navigation, reads the page
+ * at once.
  *
  * ```ts
  * const { isPaused, missedCount, resume, hold, release } = usePageLive();
@@ -80,25 +93,29 @@ export interface PageLiveState {
  * `realtimeTopic` are.
  */
 export function usePageLive(): PageLiveState {
-  const isPaused = computed(() => currentPageLive()?.isPaused.value ?? false);
+  // An async block hydrates after the page has installed its controller and
+  // read its data: until mounted, it draws the state the server drew.
+  const isHydrating = shallowRef(isDmsHydrating());
+  if (isHydrating.value) onMounted(() => (isHydrating.value = false));
+  const shown = () => (isHydrating.value ? null : currentPageLive());
+  const isPaused = computed(() => shown()?.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),
+    pauseReason: computed(() => shown()?.pauseReason.value ?? null),
     pause: () => currentPageLive()?.pause(),
     resume: () => currentPageLive()?.resume(),
     toggle: () => currentPageLive()?.toggle(),
     hold: hold.hold,
     release: hold.release,
-    lastUpdatedAt: computed(
-      () => currentPageLive()?.lastUpdatedAt.value ?? null,
-    ),
-    missedCount: computed(() => currentPageLive()?.missedCount.value ?? 0),
-    missedDetail: computed(() => currentPageLive()?.missedDetail.value ?? null),
+    lastUpdatedAt: computed(() => shown()?.lastUpdatedAt.value ?? null),
+    missedCount: computed(() => shown()?.missedCount.value ?? 0),
+    missedDetail: computed(() => shown()?.missedDetail.value ?? null),
     setMissedDetail: (detail) => currentPageLive()?.setMissedDetail(detail),
-    isPolling: computed(() => currentPageLive()?.isPolling.value ?? false),
+    isPolling: computed(() => shown()?.isPolling.value ?? false),
   };
 }
 

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;
+}