@antelopejs/dms 0.11.0 → 0.12.0

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

@@ -0,0 +1,106 @@
+import { ref, watch, type UnwrapRef } from "vue";
+import type { Form, FormSchema } from "@nuxt/ui";
+import type {
+  FormServerFieldError,
+  useForm,
+} from "../../../composables/form/useForm";
+import { fieldErrorPattern } from "./formEntryContext";
+import {
+  changedServerErrorFields,
+  keptServerErrors,
+  serverErrorValue,
+  type KeptServerError,
+  type PlacedServerError,
+} from "./serverFieldErrors";
+
+type ErrorTarget = Pick<
+  UnwrapRef<Form<FormSchema>>,
+  "setErrors" | "getErrors" | "errors"
+>;
+
+interface FormErrorsSource {
+  target: () => ErrorTarget | null | undefined;
+  isInstant: () => boolean;
+  state: () => ReturnType<typeof useForm>["state"]["value"];
+  focusField: (name: string | undefined) => Promise<void>;
+}
+
+function placeServerError(
+  target: ErrorTarget,
+  error: FormServerFieldError,
+): void {
+  const scope = fieldErrorPattern(error.name);
+  target.setErrors([{ ...error, name: error.path ?? error.name }], scope);
+  if (!error.path || target.getErrors(error.path).length) return;
+  target.setErrors([error], scope);
+}
+
+/** Server refusals and client validation share the form's error summary and focus. */
+export function formComponentErrors(source: FormErrorsSource) {
+  const serverErrors = new Map<string, KeptServerError>();
+  const showsErrorSummary = ref(false);
+
+  function showFieldErrors(errors: FormServerFieldError[]): boolean {
+    const target = source.target();
+    if (!target) return false;
+    if (!source.isInstant()) {
+      target.setErrors([]);
+      serverErrors.clear();
+    }
+    for (const error of errors) placeServerError(target, error);
+    const shown = errors.filter(
+      (error) => target.getErrors(fieldErrorPattern(error.name)).length,
+    );
+    for (const error of shown) {
+      serverErrors.set(error.name, {
+        value: serverErrorValue(source.state()[error.name]),
+        errors: target
+          .getErrors(fieldErrorPattern(error.name))
+          .map(({ name, message }: PlacedServerError) => ({ name, message })),
+      });
+    }
+    showsErrorSummary.value = shown.length > 0;
+    void source.focusField(target.errors[0]?.name);
+    return shown.length > 0;
+  }
+
+  function onValidationError(event: {
+    errors: Array<{ name?: string }>;
+  }): void {
+    showsErrorSummary.value = true;
+    void source.focusField(event.errors[0]?.name);
+  }
+
+  return {
+    serverErrors,
+    showsErrorSummary,
+    showFieldErrors,
+    onValidationError,
+  };
+}
+
+/** Clears refusals after edits and keeps unchanged refusals across validation. */
+export function watchFormComponentServerErrors(source: {
+  state: ReturnType<typeof useForm>["state"];
+  serverErrors: Map<string, KeptServerError>;
+  target: () =>
+    | Pick<UnwrapRef<Form<FormSchema>>, "clear" | "loading">
+    | null
+    | undefined;
+}) {
+  watch(
+    source.state,
+    (current) => {
+      for (const name of changedServerErrorFields(
+        source.serverErrors,
+        current,
+      )) {
+        source.serverErrors.delete(name);
+        source.target()?.clear(fieldErrorPattern(name));
+      }
+    },
+    { deep: true },
+  );
+  return (current: typeof source.state.value) =>
+    keptServerErrors(source.serverErrors, current, !!source.target()?.loading);
+}

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

@@ -0,0 +1,70 @@
+import { nextTick, watch } from "vue";
+import { errorFieldId } from "./formSections";
+import { scrollWithin } from "../../utils/scrollWithin";
+
+interface FormFocusSource {
+  element: () => HTMLElement | undefined;
+  loading: () => boolean | undefined;
+  fieldIds: () => readonly string[];
+}
+
+const PREFERRED_FOCUS =
+  "[data-reka-calendar-cell-trigger][tabindex='0'], [role='grid'] [tabindex='0']";
+const FOCUSABLE =
+  "input:not([type='hidden']):not([disabled]):not([tabindex='-1']), textarea:not([disabled]), select:not([disabled]), button:not([disabled]), [contenteditable='true'], [tabindex]:not([tabindex='-1'])";
+
+/** The form's field lookup, validation settling and focus sequence. */
+export function formComponentFocus(source: FormFocusSource) {
+  function fieldControl(name: string | undefined): HTMLElement | null {
+    const element = source.element();
+    if (!name || !element?.querySelector) return null;
+    return element.querySelector<HTMLElement>(`[id="${CSS.escape(name)}"]`);
+  }
+
+  function fieldRow(name: string | undefined): HTMLElement | null {
+    const element = source.element();
+    if (!name || !element?.querySelector) return null;
+    return element.querySelector<HTMLElement>(
+      `[data-field="${CSS.escape(name)}"]`,
+    );
+  }
+
+  async function formSettled(): Promise<void> {
+    await nextTick();
+    if (!source.loading()) return;
+    await new Promise<void>((resolve) => {
+      const stop = watch(source.loading, (busy) => {
+        if (busy) return;
+        stop();
+        resolve();
+      });
+    });
+    await nextTick();
+  }
+
+  async function focusField(name: string | undefined): Promise<void> {
+    await formSettled();
+    const fieldId = errorFieldId(name, source.fieldIds()) ?? name;
+    const control = fieldControl(name) ?? fieldControl(fieldId);
+    const row = fieldRow(fieldId);
+    const target = control?.matches(FOCUSABLE)
+      ? control
+      : (control?.querySelector<HTMLElement>(PREFERRED_FOCUS) ??
+        control?.querySelector<HTMLElement>(FOCUSABLE) ??
+        row?.querySelector<HTMLElement>(FOCUSABLE));
+    if (target) {
+      target.focus();
+      return;
+    }
+    if (row) scrollWithin(row, { block: "center" });
+  }
+
+  async function revealField(fieldId: string): Promise<void> {
+    await formSettled();
+    const row = fieldRow(fieldId);
+    if (row) scrollWithin(row, { block: "center" });
+    await focusField(fieldId);
+  }
+
+  return { focusField, revealField };
+}

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

@@ -0,0 +1,149 @@
+import { computed, onUnmounted, ref, watch } from "vue";
+import type { useForm } from "../../../composables/form/useForm";
+
+const REALTIME_PRESENCE_FLAG = "_presence=1";
+const REALTIME_ACQUIRE_PATH = "/api/realtime/acquire";
+const REALTIME_RELEASE_PATH = "/api/realtime/release";
+const REALTIME_PRESENCE_TOPIC_PREFIX = "tableview:presence:";
+const REALTIME_ROW_TOPIC_PREFIX = "tableview:row:";
+const REALTIME_GET_SEGMENT = "/get";
+const REALTIME_EVENT_UPDATED = "updated";
+
+interface RealtimeFormContext {
+  location: string;
+  rowId: string;
+  presenceTopic: string;
+  rowTopic: string;
+}
+
+interface FormRealtimeSource
+  extends Pick<
+    ReturnType<typeof useForm>,
+    "resolvedFetchUrl" | "state" | "fetchData" | "submitSucceeded"
+  > {
+  markFormClean: () => void;
+}
+
+const parseRealtimeContext = (
+  fetchUrl: string | undefined,
+): RealtimeFormContext | null => {
+  if (!fetchUrl || !fetchUrl.includes(REALTIME_PRESENCE_FLAG)) return null;
+  const url = new URL(fetchUrl, "http://placeholder");
+  const idx = url.pathname.lastIndexOf(REALTIME_GET_SEGMENT);
+  if (idx === -1) return null;
+  const location = url.pathname.slice(0, idx);
+  const rowId = url.searchParams.get("id");
+  if (!location || !rowId) return null;
+  return {
+    location,
+    rowId,
+    presenceTopic: `${REALTIME_PRESENCE_TOPIC_PREFIX}${location}`,
+    rowTopic: `${REALTIME_ROW_TOPIC_PREFIX}${location}`,
+  };
+};
+
+/** Presence acquisition, concurrent updates and close-time release for Form.vue. */
+export function formComponentRealtime(source: FormRealtimeSource) {
+  const realtimeContext = computed(() =>
+    parseRealtimeContext(source.resolvedFetchUrl.value),
+  );
+  const showConcurrentEditBanner = ref(false);
+  const { user: realtimeUser } = useDmsUserSession();
+  const { $authFetch } = useAuthFetch();
+  const pageRealtime = useUserRealtime();
+  const acquired = ref<{
+    sessionId: string;
+    pageId: string;
+    topic: string;
+    key: string;
+  } | null>(null);
+
+  watch(
+    () =>
+      [
+        pageRealtime.sessionId.value,
+        pageRealtime.pageId.value,
+        realtimeContext.value,
+      ] as const,
+    async ([sessionId, pageId, ctx]) => {
+      if (!sessionId || !pageId || !ctx) return;
+      if (
+        acquired.value &&
+        acquired.value.sessionId === sessionId &&
+        acquired.value.topic === ctx.presenceTopic &&
+        acquired.value.key === ctx.rowId
+      ) {
+        return;
+      }
+      try {
+        await $authFetch(REALTIME_ACQUIRE_PATH, {
+          method: "POST",
+          body: { pageId, topic: ctx.presenceTopic, key: ctx.rowId },
+        });
+        acquired.value = {
+          sessionId,
+          pageId,
+          topic: ctx.presenceTopic,
+          key: ctx.rowId,
+        };
+      } catch (error) {
+        console.warn("[Form] acquire failed", error);
+      }
+    },
+    { immediate: true },
+  );
+
+  useRealtimeTopic(
+    () => realtimeContext.value?.rowTopic,
+    (event) => {
+      const ctx = realtimeContext.value;
+      if (!ctx) return;
+      // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- RealtimeTopicEvent owns an open payload, not a validated ids array; retain the original unchecked topic projection rather than rejecting malformed events.
+      const eventTyped = event as {
+        type: string;
+        payload?: { ids?: string[] };
+        actorId?: string;
+      };
+      if (eventTyped.type !== REALTIME_EVENT_UPDATED) return;
+      if (!eventTyped.payload?.ids?.includes(ctx.rowId)) return;
+      if (eventTyped.actorId === realtimeUser.value?._id) return;
+      showConcurrentEditBanner.value = true;
+    },
+  );
+
+  const handleDiscardAndRefresh = async () => {
+    const fresh = await source.fetchData();
+    if (fresh && Object.keys(fresh).length > 0) {
+      Object.assign(source.state.value, fresh);
+    }
+    source.markFormClean();
+    showConcurrentEditBanner.value = false;
+  };
+
+  const handleKeepEditing = () => {
+    showConcurrentEditBanner.value = false;
+  };
+
+  onUnmounted(async () => {
+    const captured = acquired.value;
+    if (!captured || source.submitSucceeded.value) return;
+    try {
+      await $authFetch(REALTIME_RELEASE_PATH, {
+        method: "POST",
+        body: {
+          pageId: captured.pageId,
+          topic: captured.topic,
+          key: captured.key,
+        },
+      });
+    } catch (error) {
+      console.warn("[Form] release on close failed", error);
+    }
+  });
+
+  return {
+    showConcurrentEditBanner,
+    handleDiscardAndRefresh,
+    handleKeepEditing,
+  };
+}

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

@@ -0,0 +1,117 @@
+import { computed, type Ref } from "vue";
+import type { FormProps } from "../../../composables/form/types/props";
+import { isFieldGroup } from "../../../composables/form/types/field";
+import type { useForm } from "../../../composables/form/useForm";
+import {
+  entryFieldIds,
+  invalidFieldIds,
+  layoutSections,
+  resolveSectionNav,
+  sectionState,
+  type FormErrorRef,
+  type FormSectionState,
+} from "./formSections";
+
+interface FormSectionsSource {
+  props: FormProps;
+  hasSections: boolean;
+  fields: ReturnType<typeof useForm>["fields"];
+  allFieldIds: Ref<string[]>;
+  errors: () => readonly FormErrorRef[];
+  changedFields: Ref<ReturnType<typeof useForm>["allFields"]["value"]>;
+  isInstant: boolean;
+  showsErrorSummary: Ref<boolean>;
+  usesSaveBar: boolean;
+  processI18n: (value: string) => string;
+}
+
+/** Section layout, navigation badges and field labels shown by Form.vue. */
+export function formComponentSections(source: FormSectionsSource) {
+  const sectionsLayout = computed(() =>
+    source.hasSections
+      ? layoutSections(source.fields.value, source.props.sections ?? [])
+      : undefined,
+  );
+  const sectionNav = resolveSectionNav(
+    source.props.sectionNav,
+    source.props.sections?.length ?? 0,
+  );
+  const invalidFields = computed<ReadonlySet<string>>(
+    () => new Set(invalidFieldIds(source.errors(), source.allFieldIds.value)),
+  );
+  const changedFieldIds = computed(
+    () =>
+      new Set(
+        source.isInstant
+          ? []
+          : source.changedFields.value.map((field) => field.id),
+      ),
+  );
+  const sectionStates = computed<Record<string, FormSectionState>>(() =>
+    Object.fromEntries(
+      (sectionsLayout.value?.sections ?? []).map((section) => [
+        section.id,
+        sectionState(section, changedFieldIds.value, invalidFields.value),
+      ]),
+    ),
+  );
+  const fieldLabels = computed(() => {
+    const labels = new Map<string, string>();
+    for (const entry of source.fields.value) {
+      const fieldsOfEntry = isFieldGroup(entry) ? entry.fields : [entry];
+      for (const field of fieldsOfEntry) {
+        const label = field.label || entry.label || field.id;
+        labels.set(field.id, source.processI18n(label));
+      }
+    }
+    return labels;
+  });
+  const sectionOfField = computed(() => {
+    const owners = new Map<string, string>();
+    for (const section of sectionsLayout.value?.sections ?? []) {
+      for (const id of section.fieldIds) owners.set(id, section.label);
+    }
+    return owners;
+  });
+  const errorSummaryItems = computed(() => {
+    if (!source.showsErrorSummary.value) return [];
+    const items = [...invalidFields.value].map((id) => {
+      const section = sectionOfField.value.get(id);
+      return {
+        id,
+        label: fieldLabels.value.get(id) ?? id,
+        section: section ? source.processI18n(section) : undefined,
+      };
+    });
+    return items.filter(
+      (item, index) =>
+        items.findIndex(
+          (other) =>
+            other.label === item.label && other.section === item.section,
+        ) === index,
+    );
+  });
+  const changedFieldLabels = computed<string[]>(() => {
+    if (!source.usesSaveBar) return [];
+    const layout = sectionsLayout.value;
+    if (!layout)
+      return source.changedFields.value.map((field) => field.label || field.id);
+    const leadIds = new Set(layout.lead.flatMap(entryFieldIds));
+    return [
+      ...source.changedFields.value
+        .filter((field) => leadIds.has(field.id))
+        .map((field) => field.label || field.id),
+      ...layout.sections
+        .filter((section) => sectionStates.value[section.id]?.dirty)
+        .map((section) => section.label),
+    ];
+  });
+  return {
+    sectionsLayout,
+    sectionNav,
+    changedFieldIds,
+    sectionStates,
+    errorSummaryItems,
+    changedFieldLabels,
+  };
+}

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

@@ -0,0 +1,118 @@
+import { computed, provide, reactive, toValue, watch } from "vue";
+import type { ZodErrorMap } from "zod";
+import {
+  formIssueMessage,
+  REQUIRED_MESSAGE,
+} from "#dms-core/app/composables/useFormValidation";
+import type { useTranslation } from "#dms-core/app/composables/translation/useTranslation";
+import {
+  isAcceptanceField,
+  type useForm,
+} from "../../../composables/form/useForm";
+import type { FormField } from "../../../composables/form/types/field";
+import { validateFormState } from "./formValidation";
+import { FORM_CONTROL_ERRORS_KEY } from "./formControlErrors";
+import type { KeptServerError } from "./serverFieldErrors";
+
+interface FormValidationSource
+  extends Pick<
+    ReturnType<typeof useForm>,
+    "validationSchema" | "allFields" | "state"
+  > {
+  isFieldRequired: (field: FormField) => boolean;
+  processApiMessage: ReturnType<typeof useTranslation>["processApiMessage"];
+  locale: () => string;
+  locales: () => readonly { code: string }[];
+  serverErrors: Map<string, KeptServerError>;
+  clearError: (name: string) => void;
+  validateControl: (fieldId: string) => void;
+  revalidateChangedField: (field: FormField) => void;
+}
+
+/** Form.vue's localized schema and validation for controls with custom events. */
+export function formComponentValidation(source: FormValidationSource) {
+  const issueErrorMap: ZodErrorMap = (issue, context) => ({
+    message: source.processApiMessage(formIssueMessage(issue, context.data)),
+  });
+  const localizedSchema = computed(() => {
+    const schema = source.validationSchema.value;
+    const validationFields = toValue(source.allFields).map((field) => ({
+      id: field.id,
+      type: field.type,
+      localized: field.localized,
+      fallbackLocale: field.fallbackLocale,
+      required: source.isFieldRequired(field),
+      acceptance: isAcceptanceField(field),
+    }));
+    return {
+      "~standard": {
+        version: 1 as const,
+        vendor: "dms",
+        // oxlint-disable-next-line anti-slop/no-unknown-parameters -- Standard Schema accepts arbitrary inputs; the form validator retains its existing unchecked object adapter rather than rejecting or coercing malformed data.
+        validate: (value: unknown) =>
+          validateFormState(
+            schema,
+            // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Standard Schema accepts arbitrary inputs; this unchecked adapter forwards them to the object-state validator unchanged.
+            value as Parameters<typeof validateFormState>[1],
+            {
+              fields: validationFields,
+              requiredMessage: source.processApiMessage(REQUIRED_MESSAGE),
+              locale: source.locale(),
+              parseParams: { errorMap: issueErrorMap },
+              controlErrors,
+            },
+          ),
+      },
+    };
+  });
+  const controlErrors = reactive(new Map<string, string>());
+  provide(FORM_CONTROL_ERRORS_KEY, {
+    report(fieldId, message) {
+      if (message)
+        controlErrors.set(fieldId, source.processApiMessage(message));
+      else controlErrors.delete(fieldId);
+      source.validateControl(fieldId);
+    },
+  });
+  const fieldValueSnapshots = new Map<string, string>();
+  watch(
+    source.state,
+    (current) => {
+      for (const field of toValue(source.allFields)) {
+        const snapshot = JSON.stringify(current[field.id]) ?? "";
+        const previous = fieldValueSnapshots.get(field.id);
+        fieldValueSnapshots.set(field.id, snapshot);
+        if (previous === undefined || previous === snapshot) continue;
+        source.revalidateChangedField(field);
+      }
+    },
+    { deep: true, immediate: true },
+  );
+  function errorNames(field: FormField): string[] {
+    if (!field.localized) return [field.id];
+    return [
+      field.id,
+      ...source.locales().map((lang) => `${field.id}.${lang.code}`),
+    ];
+  }
+  function clearServerErrors(): void {
+    for (const name of source.serverErrors.keys()) source.clearError(name);
+    source.serverErrors.clear();
+  }
+  return { localizedSchema, errorNames, clearServerErrors };
+}
+
+/** Clears validation when a field becomes disabled or hidden. */
+export function watchFormComponentFieldFlags<
+  T extends { clear: (name: string) => void },
+>(
+  fields: ReturnType<typeof useForm>["disabledFields"],
+  target: () => T | null | undefined,
+): void {
+  watch(fields, (next, previous) => {
+    if (!next || !target()) return;
+    for (const fieldId of next) {
+      if (!previous?.has(fieldId)) target()!.clear(fieldId);
+    }
+  });
+}

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

@@ -1,4 +1,5 @@
 import type { InjectionKey, Ref } from "vue";
+import type { useWatch } from "#dms-core/app/composables/watch/useWatch";
 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";
@@ -9,7 +10,7 @@ import type { FormLayoutClasses } from "./formLayout";
  * the state of each field and how its rows are laid out.
  */
 export interface FormEntryContext {
-  state: Ref<Record<string, unknown>>;
+  state: ReturnType<typeof useWatch>["state"];
   initialValues: Ref<FormData>;
   loading: Ref<boolean>;
   componentId: string;
@@ -33,7 +34,9 @@ export interface FormEntryContext {
   /** 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;
+  baselineValue: (
+    fieldId: string,
+  ) => FormEntryContext["state"]["value"][string];
   /** The instant-save state of a field: `idle` unless the form saves so. */
   fieldSaveState: (fieldId: string) => SaveStatusState;
   /** Saves again the changes whose save failed. */

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

@@ -32,9 +32,6 @@ export interface FormSurfaceClasses {
   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",
@@ -46,11 +43,6 @@ export const FORM_LAYOUT_CLASSES: Record<FormOrientation, FormLayoutClasses> = {
   },
 };
 
-// A form in a drawer or a modal: the same rows on a tighter rhythm, the
-// container's width being scarcer than a page's. A row with one line of
-// value is 57px beside its label; stacked (a phone, a narrow drawer) the
-// label sits 6px above its control. Read-only details and editable forms
-// share the rows, so both read alike.
 export const CONTAINER_LAYOUT_CLASSES: Record<
   FormOrientation,
   FormLayoutClasses
@@ -65,13 +57,6 @@ export const CONTAINER_LAYOUT_CLASSES: Record<
   },
 };
 
-// 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",
@@ -85,7 +70,7 @@ export const FORM_SURFACE_CLASSES: Record<FormSurface, FormSurfaceClasses> = {
     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: "",
@@ -100,48 +85,36 @@ export const FORM_SURFACE_CLASSES: Record<FormSurface, FormSurfaceClasses> = {
   },
 };
 
-// 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 share the row while each keeps a usable width (11rem: a
-// date, a select showing its value), and wrap onto the next line once they
-// would shrink below it, so a group of five in a modal, a drawer or on a
-// phone wraps instead of drawing its controls over one another. A member
-// alone on its line takes the whole width; `min(100%, ...)` keeps a row
-// narrower than the minimum from overflowing.
 export const GROUP_FIELDS_CLASSES: Record<FormOrientation, string> = {
   horizontal:
     "grid grid-cols-[repeat(auto-fit,minmax(min(100%,11rem),1fr))] gap-x-3 gap-y-2.5",
   vertical: "flex flex-col gap-2.5",
 };
 
-// Fields whose value is a block of its own (a table of rows, pairs, code,
-// formatted text, a gallery): beside a 240px label they get what is left of
-// a drawer, where a repeater falls into its stacked cards. They take the
-// row's full width under their label instead, whatever the form's layout.
 const WIDE_FIELD_COMPONENTS: ReadonlySet<string> = new Set([
   "dms-repeater",
   "dms-key-value",
   "dms-input-code",
   "dms-rich-text",
 ]);
-// The same values shown read-only, drawn from the field's type.
+
 const WIDE_FIELD_TYPES: ReadonlySet<string> = new Set([
   "array",
   "key_value",
   "code",
   "rich_text",
 ]);
-// Files and images drop their list or gallery under the control when
-// several are allowed.
+
 const MULTIPLE_FILE_COMPONENTS: ReadonlySet<string> = new Set([
   "dms-file",
   "dms-image",
 ]);
-// A textarea taller than the browser's three rows is a long text.
+
 const SHORT_TEXTAREA_ROWS = 3;
 
 /** The options of a field's control that make it wide. */
@@ -184,8 +157,6 @@ export interface GroupMemberClasses {
   label: string;
 }
 
-// A member's label is a step below the group's (FieldRow's 13px semibold
-// label), which heads the cluster.
 export const GROUP_MEMBER_CLASSES: GroupMemberClasses = {
   root: "grid min-w-0 flex-1 content-start gap-1.5",
   label: