@antelopejs/dms 0.5.5 → 0.6.0

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/useColumnValueRenderer.ts

@@ -0,0 +1,122 @@
+import { h, type VNodeChild } from "vue";
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+
+/**
+ * A data type a column borrows for its cells only: the column keeps its own
+ * type for forms, filters and validation, and renders through the formatter
+ * registered under `type` with `options`.
+ */
+export interface ColumnDisplay {
+  type: string;
+  options?: Record<string, unknown>;
+}
+
+/** What a column must carry for its values to be rendered. */
+export interface RenderableColumn {
+  id?: string;
+  accessorKey?: PropertyKey;
+  type?: DataTypeConfig;
+  display?: ColumnDisplay;
+}
+
+// v2 cell anatomy: amounts are right-aligned mono figures in the ink color,
+// dates 12px muted mono. A data type can give cells a shorter rendering
+// through a `cell` formatter (the date type does); others use `default`.
+export const NUMERIC_TYPE_IDS = new Set(["number", "price", "percentage"]);
+const DATE_TYPE_IDS = new Set(["date"]);
+const NUMERIC_CELL_CLASS =
+  "block text-right font-mono tabular-nums text-highlighted";
+const NUMERIC_EMPTY_CELL_CLASS = "block text-right text-dimmed";
+const DATE_CELL_CLASS = "font-mono text-xs text-muted tabular-nums";
+const DEFAULT_FALLBACK = "-";
+const DETAIL_FALLBACK = "—";
+
+/** Where a value is drawn: a grid cell gets the `cell` formatter first. */
+export type ColumnValueSurface = "cell" | "detail";
+
+/**
+ * Renders a row's value for a column through the formatter of its data type
+ * (or of its `display` data type), the way the grid draws its cells. The row
+ * is handed to the formatter as a fourth argument, so a formatter can compose
+ * a cell from sibling fields (an avatar next to a name, a badge after it).
+ */
+export function useColumnValueRenderer() {
+  const { getDataType } = useDataTypes();
+  const { locale } = useI18n();
+
+  // A display also reads the column's own type options (`typeOptions`): a
+  // select's items name the values it draws. A display declared without
+  // options reads them at the top level, as it always did.
+  const resolveRenderer = (column: RenderableColumn) => {
+    const typeOptions = column.type?.inputComponent?.options as
+      | Record<string, unknown>
+      | undefined;
+    if (!column.display)
+      return { typeId: column.type?.id, options: typeOptions };
+    const displayOptions = column.display.options ?? typeOptions;
+    return {
+      typeId: column.display.type,
+      options: { ...displayOptions, typeOptions },
+    };
+  };
+
+  /** Whether the column renders right-aligned figures (amounts, numbers). */
+  const isNumericColumn = (column: RenderableColumn): boolean => {
+    const { typeId } = resolveRenderer(column);
+    return !!typeId && !column.display && NUMERIC_TYPE_IDS.has(typeId);
+  };
+
+  const renderValue = (
+    column: RenderableColumn,
+    value: unknown,
+    row: Record<string, unknown> | undefined,
+    surface: ColumnValueSurface = "cell",
+  ): VNodeChild => {
+    const { typeId, options } = resolveRenderer(column);
+    const isNumeric = isNumericColumn(column);
+    const formatter = typeId ? getDataType(typeId)?.formatter : undefined;
+
+    if (value === null || value === undefined) {
+      // A data type may draw the absence itself ("Never signed in").
+      if (formatter?.empty) {
+        return formatter.empty(value, locale.value, options, row) as VNodeChild;
+      }
+      const fallback =
+        (options?.fallback as string) ??
+        (surface === "detail" ? DETAIL_FALLBACK : DEFAULT_FALLBACK);
+      return isNumeric
+        ? h("span", { class: NUMERIC_EMPTY_CELL_CLASS }, fallback)
+        : fallback;
+    }
+
+    const format =
+      (surface === "cell" ? formatter?.cell : undefined) ?? formatter?.default;
+    const formatted = format
+      ? format(value, locale.value, options, row)
+      : value;
+
+    if (typeof formatted !== "string" && typeof formatted !== "number") {
+      return formatted as VNodeChild;
+    }
+    if (isNumeric) {
+      return h("span", { class: NUMERIC_CELL_CLASS }, String(formatted));
+    }
+    if (!column.display && typeId && DATE_TYPE_IDS.has(typeId)) {
+      return h("span", { class: DATE_CELL_CLASS }, String(formatted));
+    }
+    return formatted;
+  };
+
+  /** Renders the column's value read off `row`. */
+  const renderColumnValue = (
+    column: RenderableColumn,
+    row: Record<string, unknown>,
+    surface: ColumnValueSurface = "cell",
+  ): VNodeChild => {
+    const key = column.accessorKey ?? column.id;
+    const value = key === undefined ? undefined : get(row, String(key));
+    return renderValue(column, value, row, surface);
+  };
+
+  return { renderValue, renderColumnValue, isNumericColumn };
+}

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

@@ -0,0 +1,55 @@
+import type { InjectionKey, Ref } from "vue";
+import type { SaveStatusState } from "../../../components/save-bar/SaveStatus.vue";
+import type { FormField } from "../../../composables/form/types/field";
+import type { FormData } from "../../../composables/form/types/value";
+import type { FormLayoutClasses } from "./formLayout";
+
+/**
+ * What the rows of a form read from the form rendering them: its values,
+ * the state of each field and how its rows are laid out.
+ */
+export interface FormEntryContext {
+  state: Ref<Record<string, unknown>>;
+  initialValues: Ref<FormData>;
+  loading: Ref<boolean>;
+  componentId: string;
+  pageId: string;
+  routeParams?: Record<string, string>;
+  /** The row classes of a section card (`true`) or of the form itself. */
+  layoutClasses: (inSection: boolean) => FormLayoutClasses;
+  isFieldHidden: (field: FormField) => boolean;
+  isFieldDisabled: (field: FormField) => boolean;
+  isFieldRequired: (field: FormField) => boolean;
+  /**
+   * Whether a field points out a change waiting to be saved: not in an
+   * instant form (nothing waits) nor in an action form (nothing was saved).
+   */
+  showsChanges: boolean;
+  /** Whether a field holds a value it did not load (or last save) with. */
+  isFieldChanged: (fieldId: string) => boolean;
+  /** The value a field loaded (or was last saved) with. */
+  baselineValue: (fieldId: string) => unknown;
+  /** The instant-save state of a field: `idle` unless the form saves so. */
+  fieldSaveState: (fieldId: string) => SaveStatusState;
+  /** Saves again the changes whose save failed. */
+  retrySave: () => void;
+}
+
+export const FORM_ENTRY_CONTEXT_KEY: InjectionKey<FormEntryContext> = Symbol(
+  "dms-form-entry-context",
+);
+
+const REGEXP_SPECIALS = /[.*+?^${}()|[\]\\]/g;
+
+/** A text matched literally inside a regular expression. */
+export function escapeRegExp(text: string): string {
+  return text.replace(REGEXP_SPECIALS, "\\$&");
+}
+
+/**
+ * The errors of a field: its own and those of its parts (an address's
+ * street, a gallery's image), which zod names `<id>.<part>`.
+ */
+export function fieldErrorPattern(id: string): RegExp {
+  return new RegExp(`^${escapeRegExp(id)}(\\.|$)`);
+}

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

@@ -0,0 +1,110 @@
+/**
+ * What a form edits, which decides its buttons (interface-dms `FormKind`).
+ *
+ * - `record` (default): a record, a settings page, a table view's form. It
+ *   keeps its values once saved; Cancel while there is nothing to save when
+ *   it has somewhere to go back to, then "Unsaved changes" with Discard and
+ *   Save.
+ * - `action`: a form that does something each time (send a notification,
+ *   invite someone, run a job). Reset and the form's own submit label once a
+ *   value changed; untouched — pre-filled or not —, no buttons on a page, and
+ *   Cancel beside a held submit in a drawer or a modal. It empties after a
+ *   successful submit.
+ */
+export type FormKind = "record" | "action";
+
+/** How a form offers to save (interface-dms `FormSaveMode`). */
+export type FormSaveMode = "bar" | "footer" | "none" | "instant";
+
+/**
+ * The way a form saves: `bar` unless it says otherwise. An `action` form
+ * (send, invite, run) is sent on purpose, so it never saves as it goes.
+ */
+export function formSaveMode(
+  mode: FormSaveMode | undefined,
+  kind?: FormKind,
+): FormSaveMode {
+  if (mode === "instant" && kind === "action") return "bar";
+  return mode ?? "bar";
+}
+
+/** What a form's save bar knows of its form. */
+export interface SaveBarContext {
+  kind: FormKind;
+  /** Something changed since the form loaded. */
+  dirty: boolean;
+  /** The form has somewhere to go back to: its drawer or modal, `backTo`. */
+  cancellable: boolean;
+  /** Something in the form can be changed, hence reset. */
+  resettable: boolean;
+}
+
+/** The button beside the submit: Discard / Reset, or Cancel. */
+export type SaveBarSecondary = "discard" | "cancel";
+
+/** What a form's save bar shows. */
+export interface SaveBarState {
+  /** "Unsaved changes", before the buttons. */
+  showsStatus: boolean;
+  secondary?: SaveBarSecondary;
+  showsSubmit: boolean;
+  /** The submit shows but waits for a change. */
+  isSubmitHeld: boolean;
+  /**
+   * Nothing to offer: the bar keeps its place, invisible, so its showing up
+   * never moves the content around it.
+   */
+  isHidden: boolean;
+}
+
+const HIDDEN_BAR: SaveBarState = {
+  showsStatus: true,
+  secondary: "discard",
+  showsSubmit: true,
+  isSubmitHeld: false,
+  isHidden: true,
+};
+
+/**
+ * A record form's bar: "Unsaved changes" with Discard and Save once a value
+ * changed, Cancel before that when it has somewhere to go back to.
+ */
+function recordSaveBar(context: SaveBarContext): SaveBarState {
+  if (context.dirty) return { ...HIDDEN_BAR, isHidden: false };
+  if (!context.cancellable) return HIDDEN_BAR;
+  return {
+    showsStatus: false,
+    secondary: "cancel",
+    showsSubmit: false,
+    isSubmitHeld: false,
+    isHidden: false,
+  };
+}
+
+/**
+ * An action form's bar: Reset and its submit once a value changed. Before
+ * that, a form in a drawer or a modal offers Cancel beside its held submit —
+ * the modal's only way out and the proof it sends something —, a page form
+ * nothing; a form nothing in which can be changed, its submit alone.
+ */
+function actionSaveBar(context: SaveBarContext): SaveBarState {
+  const bar = { showsStatus: false, showsSubmit: true, isHidden: false };
+  if (!context.resettable) return { ...bar, isSubmitHeld: false };
+  if (context.dirty) {
+    return { ...bar, secondary: "discard", isSubmitHeld: false };
+  }
+  if (!context.cancellable) {
+    return { ...HIDDEN_BAR, showsStatus: false };
+  }
+  return { ...bar, secondary: "cancel", isSubmitHeld: true };
+}
+
+const SAVE_BARS: Record<FormKind, (context: SaveBarContext) => SaveBarState> = {
+  record: recordSaveBar,
+  action: actionSaveBar,
+};
+
+/** What a form's save bar shows, from its kind and its state. */
+export function saveBarState(context: SaveBarContext): SaveBarState {
+  return SAVE_BARS[context.kind](context);
+}

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

@@ -0,0 +1,91 @@
+import type {
+  FieldRowLayout,
+  FieldRowSpacing,
+} from "../../../components/field-row/FieldRow.vue";
+
+export type FormOrientation = "horizontal" | "vertical";
+export type FormSurface = "card" | "container" | "section" | "sections";
+
+/** How a form draws each row, through `DmsFieldRow`. */
+export interface FormRowLayout {
+  layout: FieldRowLayout;
+  inset: boolean;
+  spacing: FieldRowSpacing;
+}
+
+/** A form's rows: the classes of their list, and how each is drawn. */
+export interface FormLayoutClasses {
+  rows: string;
+  row: FormRowLayout;
+}
+
+/** Classes of the bands around a form's rows. */
+export interface FormSurfaceClasses {
+  head: string;
+  body: string;
+  legend: string;
+  foot: string;
+}
+
+// v2 record form (mockup form.html): horizontal rows are FieldRow's form
+// rows, the label column beside the control and split by hairlines; the
+// card pads them. Vertical rows stack the label above the control.
+export const FORM_LAYOUT_CLASSES: Record<FormOrientation, FormLayoutClasses> = {
+  horizontal: {
+    rows: "flex flex-col py-1",
+    row: { layout: "form", inset: false, spacing: "row" },
+  },
+  vertical: {
+    rows: "flex flex-col gap-4 py-5",
+    row: { layout: "stack", inset: false, spacing: "list" },
+  },
+};
+
+// A card form draws its own head band and sticky footer band; inside a
+// modal or drawer the container is the surface and already pads the body.
+// The footer sticks to the bottom of the scroll area while the form runs
+// past it, and sits under the fields when it fits. In a container it
+// reaches over the scroll area's padding (`--dms-form-foot-*`, set by the
+// drawer and the modal) to sit flush with its edges. A sectioned form has
+// no surface of its own: each section is a card.
+export const FORM_SURFACE_CLASSES: Record<FormSurface, FormSurfaceClasses> = {
+  card: {
+    head: "border-default border-b px-5 py-4.5",
+    body: "px-5",
+    legend: "pb-4",
+    foot: "border-default sticky bottom-0 z-10 border-t bg-(--dms-bg-muted)/90 px-5 py-3 backdrop-blur-sm",
+  },
+  container: {
+    head: "border-default border-b pb-4",
+    body: "",
+    legend: "pb-2",
+    foot: "border-default bg-default sticky bottom-[calc(var(--dms-form-foot-pb,0px)*-1)] z-10 mt-2 -mx-[var(--dms-form-foot-px,0px)] -mb-[var(--dms-form-foot-pb,0px)] border-t px-[var(--dms-form-foot-px,0px)] pt-3 pb-[var(--dms-form-foot-pb,12px)]",
+  },
+  // The rows carry the 18px inset so their hairlines run edge to edge.
+  section: {
+    head: "border-default border-b px-[18px] py-4",
+    body: "",
+    legend: "px-[18px] pb-4",
+    foot: "border-default sticky bottom-0 z-10 border-t bg-(--dms-bg-muted)/90 px-[18px] py-3 backdrop-blur-sm",
+  },
+  sections: {
+    head: "pb-5",
+    body: "",
+    legend: "pt-3",
+    foot: "border-default dms-card sticky bottom-4 z-10 mt-5 px-[18px] py-3",
+  },
+};
+
+// v2 .st-row.is-form: FieldRow's form rows with the card's 18px inset.
+export const SECTION_LAYOUT_CLASSES: FormLayoutClasses = {
+  rows: "flex flex-col",
+  row: { layout: "form", inset: true, spacing: "row" },
+};
+
+// Grouped controls sit side by side once the row is wide enough for its
+// label column (FieldRow's 560px container step), whatever the viewport: a
+// narrow modal or drawer form stacks them.
+export const GROUP_FIELDS_CLASSES: Record<FormOrientation, string> = {
+  horizontal: "flex flex-col gap-2.5 @min-[560px]:flex-row",
+  vertical: "flex flex-col gap-2.5",
+};

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

@@ -0,0 +1,110 @@
+import type {
+  FormFieldOrGroup,
+  FormSection,
+  FormSectionNav,
+} from "../../../composables/form/types/field";
+import { isFieldGroup } from "../../../composables/form/types/field";
+
+/** From this many sections, a form lists them beside them by default. */
+const SIDE_NAV_MIN_SECTIONS = 3;
+
+/** A section with the entries of the form it holds. */
+export interface FormSectionLayout extends Omit<FormSection, "fieldIds"> {
+  entries: FormFieldOrGroup[];
+  /** Ids of the fields it holds, a group's fields included. */
+  fieldIds: string[];
+}
+
+/** A sectioned form: the entries outside any section, then the sections. */
+export interface FormSectionsLayout {
+  lead: FormFieldOrGroup[];
+  sections: FormSectionLayout[];
+}
+
+/** An error of the form, as UForm lists them: the name it went under. */
+export interface FormErrorRef {
+  name?: string;
+}
+
+/** What the navigation shows of a section. */
+export interface FormSectionState {
+  /** It holds an unsaved change. */
+  dirty: boolean;
+  /** How many of its fields hold an error. */
+  invalidCount: number;
+}
+
+/** The navigation a sectioned form shows, declared or by its section count. */
+export function resolveSectionNav(
+  declared: FormSectionNav | undefined,
+  sectionCount: number,
+): FormSectionNav {
+  if (declared) return declared;
+  return sectionCount >= SIDE_NAV_MIN_SECTIONS ? "side" : "none";
+}
+
+/** The fields an entry holds: itself, or its group's fields. */
+export function entryFieldIds(entry: FormFieldOrGroup): string[] {
+  return isFieldGroup(entry)
+    ? entry.fields.map((field) => field.id)
+    : [entry.id];
+}
+
+/** Splits a form's entries between its sections, keeping their order. */
+export function layoutSections(
+  entries: readonly FormFieldOrGroup[],
+  sections: readonly FormSection[],
+): FormSectionsLayout {
+  const byId = new Map(entries.map((entry) => [entry.id, entry]));
+  const sectioned = new Set(sections.flatMap((section) => section.fieldIds));
+  return {
+    lead: entries.filter((entry) => !sectioned.has(entry.id)),
+    sections: sections.map(({ fieldIds, ...section }) => {
+      const held = fieldIds
+        .map((id) => byId.get(id))
+        .filter((entry): entry is FormFieldOrGroup => !!entry);
+      return {
+        ...section,
+        entries: held,
+        fieldIds: held.flatMap(entryFieldIds),
+      };
+    }),
+  };
+}
+
+/**
+ * The field an error belongs to: the one it names, or the one whose part it
+ * names (`address.streetName`, `title.en`).
+ */
+export function errorFieldId(
+  name: string | undefined,
+  fieldIds: readonly string[],
+): string | undefined {
+  if (!name) return undefined;
+  return fieldIds
+    .filter((id) => name === id || name.startsWith(`${id}.`))
+    .sort((left, right) => right.length - left.length)[0];
+}
+
+/** The fields holding an error, once each, in the form's order. */
+export function invalidFieldIds(
+  errors: readonly FormErrorRef[],
+  fieldIds: readonly string[],
+): string[] {
+  const invalid = new Set(
+    errors.map((error) => errorFieldId(error.name, fieldIds)),
+  );
+  return fieldIds.filter((id) => invalid.has(id));
+}
+
+/** Whether a section holds unsaved changes, and how many invalid fields. */
+export function sectionState(
+  section: Pick<FormSectionLayout, "fieldIds">,
+  changed: ReadonlySet<string>,
+  invalid: ReadonlySet<string>,
+): FormSectionState {
+  return {
+    dirty: section.fieldIds.some((id) => changed.has(id)),
+    invalidCount: section.fieldIds.filter((id) => invalid.has(id)).length,
+  };
+}

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

@@ -0,0 +1,180 @@
+import type { z } from "zod";
+import { isBlankValue } from "#dms-core/app/composables/useFormValidation";
+
+/**
+ * How the generic form validates its state on top of the schema the backend
+ * sends: one rule for every field type of what "left empty" means.
+ *
+ * The schema alone cannot say it. It travels as JSON Schema, so a required
+ * date that is still unpicked fails as "not a valid value" (its union of
+ * string formats rejects `undefined`), an empty rich-text document
+ * (`<p></p>`) or an address of empty parts passes or fails part by part, and
+ * an optional email cleared to `""` is refused although nothing was entered.
+ *
+ * What counts as empty is `isBlankValue` (dms-core), the rule the hand-built
+ * forms of the dashboard follow too.
+ */
+
+/** A field as the validation sees it. */
+export interface FormValidationField {
+  id: string;
+  /** Data type id (`rich_text`, `address`, `date`…). */
+  type?: string;
+  /** Holds one value per content language. */
+  localized?: boolean;
+  /** A box to tick: unticked, it is missing. */
+  acceptance?: boolean;
+  /**
+   * Whether the form requires a value now: declared so or set by a watch
+   * action, and shown (see `isFieldMarkedRequired`).
+   */
+  required: boolean;
+}
+
+/** An issue in the shape UForm reads from a Standard Schema. */
+export interface FormValidationIssue {
+  message: string;
+  path: PropertyKey[];
+}
+
+export type FormValidationResult =
+  | { value: Record<string, unknown> }
+  | { issues: FormValidationIssue[] };
+
+export interface FormValidationContext {
+  fields: readonly FormValidationField[];
+  /** The message of a required field left empty, already translated. */
+  requiredMessage: string;
+  /** The language a localized field shows: its required error goes there. */
+  locale?: string;
+  /** Passed to zod (the error map wording its issues). */
+  parseParams?: Partial<z.ParseParams>;
+  /**
+   * Errors controls report on their own value (a duration or JSON that
+   * cannot be read), by field id, already translated: the field is refused
+   * with that message, whatever its value.
+   */
+  controlErrors?: ReadonlyMap<string, string>;
+}
+
+const BOOLEAN_TYPE = "boolean";
+
+function issueField(issue: { path: PropertyKey[] }): PropertyKey | undefined {
+  return issue.path[0];
+}
+
+/** An issue saying the value is not of a branch's type at all. */
+function isTypeMismatch(issue: z.ZodIssue, path: PropertyKey[]): boolean {
+  return issue.code === "invalid_type" && issue.path.length === path.length;
+}
+
+/**
+ * The issues of a value refused by a union: zod reports one "matches no
+ * branch" issue, though usually a single branch is of the value's type and
+ * says what is wrong (an optional `<type> | null` once through JSON Schema,
+ * a date range given as `{ start, end }` rather than a list). That branch's
+ * issues replace it: an address part missing, a range end not picked. A
+ * union with several such branches keeps its issue.
+ */
+export function unwrapUnionIssue(issue: z.ZodIssue): z.ZodIssue[] {
+  if (issue.code !== "invalid_union") return [issue];
+  const branches = issue.unionErrors.filter(
+    (error) =>
+      !error.issues.every((inner) => isTypeMismatch(inner, issue.path)),
+  );
+  if (branches.length !== 1) return [issue];
+  return branches[0]!.issues.flatMap(unwrapUnionIssue);
+}
+
+/**
+ * The value an empty field stands for: a switch never touched is off, any
+ * other field holds nothing.
+ */
+function emptyValueOf(field: FormValidationField): false | null {
+  return field.type === BOOLEAN_TYPE ? false : null;
+}
+
+/**
+ * Validates a form state: the schema's issues, except that a required field
+ * left empty gets the one "required" issue (and none of its type's), and a
+ * field left empty in a shape its type refuses (`""` for an optional email,
+ * an address of empty parts, a switch never touched) is read, and submitted,
+ * as the empty value it stands for (`null`, or `false` for a switch).
+ *
+ * Issues come back in the order of the fields, so the first one is the first
+ * invalid field of the form.
+ */
+export async function validateFormState(
+  schema: z.ZodObject<Record<string, z.ZodTypeAny>>,
+  state: Record<string, unknown>,
+  context: FormValidationContext,
+): Promise<FormValidationResult> {
+  const input: Record<string, unknown> = { ...state };
+  const missing = new Set<string>();
+
+  const reported = context.controlErrors ?? new Map<string, string>();
+
+  for (const field of context.fields) {
+    const value = state[field.id];
+    if (reported.has(field.id)) continue;
+    const isBlank = field.acceptance
+      ? value !== true
+      : isBlankValue(value, field.type);
+    if (!isBlank) continue;
+    if (field.required) {
+      missing.add(field.id);
+      continue;
+    }
+    const fallback = emptyValueOf(field);
+    if (value === fallback || (fallback === null && value === undefined)) {
+      continue;
+    }
+    const fieldSchema = schema.shape[field.id];
+    if (!fieldSchema) continue;
+    const raw = await fieldSchema.safeParseAsync(value, context.parseParams);
+    if (raw.success) continue;
+    const empty = await fieldSchema.safeParseAsync(
+      fallback,
+      context.parseParams,
+    );
+    if (empty.success) input[field.id] = fallback;
+  }
+
+  const result = await schema.safeParseAsync(input, context.parseParams);
+  const issues: FormValidationIssue[] = result.success
+    ? []
+    : result.error.issues
+        .flatMap(unwrapUnionIssue)
+        .filter((issue) => {
+          const field = String(issueField(issue));
+          return !missing.has(field) && !reported.has(field);
+        })
+        .map(({ message, path }) => ({ message, path }));
+
+  for (const [fieldId, message] of reported) {
+    issues.push({ message, path: [fieldId] });
+  }
+
+  for (const field of context.fields) {
+    if (!missing.has(field.id)) continue;
+    issues.push({
+      message: context.requiredMessage,
+      path:
+        field.localized && context.locale
+          ? [field.id, context.locale]
+          : [field.id],
+    });
+  }
+
+  if (issues.length === 0 && result.success) {
+    return { value: result.data as Record<string, unknown> };
+  }
+
+  const order = new Map(
+    context.fields.map((field, index) => [field.id, index]),
+  );
+  const rank = (issue: FormValidationIssue) =>
+    order.get(String(issueField(issue))) ?? order.size;
+  // A stable sort: issues of one field keep the schema's order.
+  return { issues: [...issues].sort((a, b) => rank(a) - rank(b)) };
+}