@antelopejs/dms 0.11.1 → 0.12.0

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

@@ -1,18 +1,11 @@
 <script setup lang="ts">
 import type { ButtonProps } from "@nuxt/ui";
 import { buttonLinkProps } from "../../utils/link";
-import type { Tone } from "../../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 import type { CustomButton } from "../../../composables/table-view/types/custom-button";
+import type { BlockAction } from "#dms-core/app/entries/types/block-action";
 
-/** A link button a block option declares (interface-dms `BlockLinkAction`). */
-export interface BlockAction {
-  label: string;
-  /** Route, `#anchor` or URL; an absolute URL opens in a new tab. */
-  to: string;
-  icon?: string;
-  variant?: ButtonProps["variant"];
-  color?: Tone;
-}
+export type { BlockAction } from "#dms-core/app/entries/types/block-action";
 
 /**
  * A button running a target (interface-dms `BannerButtonAction`): the block
@@ -27,11 +20,6 @@ export interface BlockButtonAction
 /** A link or a button a block offers. */
 export type BlockActionItem = BlockAction | BlockButtonAction;
 
-// The buttons of a display block (empty state, banner, card head): links, and
-// in a banner, buttons running a target, which the block runs on `press`. One
-// action leads (`leadVariant` / `leadColor`): the first, or the last in a
-// banner where the main action sits right-most. The others are quiet buttons,
-// unless an action sets its own look. Labels follow the `$` i18n convention.
 interface BlockActionsProps {
   actions: BlockActionItem[];
   size?: ButtonProps["size"];
@@ -58,7 +46,7 @@ const { processI18n } = useTranslation();
 const isButtonAction = (action: BlockActionItem): action is BlockButtonAction =>
   "target" in action && Boolean(action.target);
 
-function actionProps(action: BlockActionItem): Record<string, unknown> {
+function actionProps(action: BlockActionItem) {
   if (!isButtonAction(action)) return buttonLinkProps(action.to);
   return { onClick: () => emit("press", action) };
 }

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

@@ -5,9 +5,6 @@ import {
   NOT_FOUND_TITLE_KEY,
 } from "../../utils/fetchNotFound";
 
-// The one-line status a compact block (a KPI card, a meter) shows in place of
-// its value: a first load that failed, with a retry, or a source that
-// answered 404 — nothing to retry there, the value does not exist.
 interface BlockInlineStatusProps {
   state: "error" | "not-found";
   /** What the 404 said; its `emptyState.title` replaces the default text. */

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

@@ -17,10 +17,6 @@ export interface BlockEmptyText {
  */
 export type BlockStatusState = "empty" | "error" | "not-found";
 
-// What a data-driven block shows instead of its content: an empty list, a
-// first load that failed (with a retry), or a source that answered 404.
-// Compact v2 .c-empty in a card, so it keeps the footprint of the block it
-// stands in for.
 interface BlockStatusProps {
   state: BlockStatusState;
   /** Replaces the default texts of the empty state. */

package/frontend-vue/layers/dms-ui/app/build/components/chart/internal/ChartSkeleton.vue

@@ -15,10 +15,9 @@ const props = withDefaults(defineProps<ChartSkeletonProps>(), {
   circular: false,
 });
 
-// Ghost columns at plot height, rising like a series would (heights in %).
 const GHOST_BAR_HEIGHTS = [38, 52, 46, 64, 58, 72, 66, 80, 74, 88, 70, 92];
 const PERCENT_UNIT = "%";
-// The ring spans most of the frame, like Apex sizes a donut to its box.
+
 const RING_SIZE = "min(78%, 16rem)";
 const RING_HOLE_MASK =
   "radial-gradient(circle, transparent 54%, #000 calc(54% + 1px))";

package/frontend-vue/layers/{dms-layout/app/build/components/layout → dms-ui/app/build/components/containers}/RowSidePanel.vue

@@ -44,7 +44,7 @@ watch(
       },
     );
   },
-  // At once: a second J right after the first steps from the row it opened.
+
   { immediate: true, flush: "sync" },
 );
 
@@ -67,8 +67,6 @@ onMounted(() => {
   ];
 });
 
-// Another side panel took its place, or the user signed out: the row is no
-// longer open.
 onBeforeUnmount(() => {
   stopKeys.forEach((stop) => stop());
   stopNavigation?.();

package/frontend-vue/layers/dms-ui/app/build/components/containers/TargetComponentTree.vue

@@ -1,9 +1,4 @@
 <script setup lang="ts">
-// The component of a drawer, modal or side panel action target that holds
-// blocks of its own (a Card, a VStack, a Grid, a Tab): drawn as a page draws
-// a layout block, its children mounted in its slots. The container's own
-// props (`rowData`, `navigation`, `onSuccessCallback`…) and listeners go to
-// the container block, as they go to a single block.
 import { useAttrs } from "vue";
 import DmsRecursiveComponent from "../../../components/RecursiveComponent.vue";
 

package/frontend-vue/layers/dms-ui/app/build/components/containers/drawer/DynamicDrawer.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { getCurrentInstance, type Component } from "vue";
+import { getCurrentInstance, type AppContext, type Component } from "vue";
 import {
   formBusInjectionKey,
   formErrorsInjectionKey,
@@ -14,6 +14,7 @@ import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
 import { useWindowSize } from "@vueuse/core";
 import type {
   ContainerColor,
+  ContainerInstance,
   DrawerDirection,
 } from "../../../../composables/containers/types";
 import type { ModalSize } from "../../../../types/modal";
@@ -40,10 +41,12 @@ interface DynamicDrawerProps {
   description?: string;
   containerId: string;
   component: Component;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- ContainerOptions derives VNode props and constrains reserved keys such as key and ref. This legacy component-prop boundary accepts arbitrary values for every string key without validation.
   componentOptions?: Record<string, unknown>;
   /** Mounts the body component anew when it changes. */
   componentKey?: string;
   headerComponent?: Component;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- ContainerOptions derives VNode props and constrains reserved keys such as key and ref. This legacy header-prop boundary accepts arbitrary values for every string key without validation.
   headerComponentOptions?: Record<string, unknown>;
   direction?: DrawerDirection;
   /**
@@ -63,7 +66,7 @@ interface DynamicDrawerProps {
 }
 
 interface DynamicDrawerEmits {
-  (e: "close", result?: unknown): void;
+  (e: "close", result?: Parameters<ContainerInstance["close"]>[0]): void;
 }
 
 const props = withDefaults(defineProps<DynamicDrawerProps>(), {
@@ -80,11 +83,7 @@ const props = withDefaults(defineProps<DynamicDrawerProps>(), {
 });
 const emit = defineEmits<DynamicDrawerEmits>();
 
-// Mounted by the overlay provider, the drawer would only see the app's
-// provides: its own start from the caller's instead, before it provides
-// anything (Vue's `provide` then writes into them). What the drawer provides
-// itself (its container, the form surface) still wins over the caller's.
-const NUXT_UI_FORM_KEYS = [
+const NUXT_UI_FORM_KEYS: symbol[] = [
   formOptionsInjectionKey,
   formBusInjectionKey,
   formStateInjectionKey,
@@ -94,21 +93,16 @@ const NUXT_UI_FORM_KEYS = [
   formLoadingInjectionKey,
   formErrorsInjectionKey,
 ];
-const drawerInstance = getCurrentInstance() as { provides: object } | null;
+// SAFETY: Vue initializes every component instance's hidden provides from its parent or app context.
+const drawerInstance = getCurrentInstance() as {
+  provides: AppContext["provides"];
+} | null;
 if (drawerInstance && props.callerProvides) {
   drawerInstance.provides = Object.create(props.callerProvides);
-  // A drawer is a surface of its own: a field in its body does not join a
-  // Nuxt UI form or form field around the component that opened it.
-  for (const key of NUXT_UI_FORM_KEYS) provide(key as symbol, undefined);
+
+  for (const key of NUXT_UI_FORM_KEYS) provide(key, undefined);
 }
 
-// Below `lg` a side drawer is a sheet as wide as a side panel (see
-// `useAppSidePanels`), or a modal's width at its size, never wider than the
-// window less the drawer's gutter (Nuxt UI's `max-w-[calc(100%-2rem)]`): on
-// a phone every side drawer leaves the same strip of backdrop, sized or not,
-// and only `full` fills the screen. From
-// `lg` it takes the width the user resizes it to (600px at first), kept per
-// drawer. Its own padding is the gutter: the containers drop theirs.
 const SIDE_DRAWER_CONTENT = "w-[440px]";
 const SIDE_DRAWER_SIZE_CONTENT: Record<ModalSize, string> = {
   sm: "w-sm",
@@ -127,7 +121,6 @@ const EDGE_DRAWER_DESKTOP_CONTENT = "lg:h-(--dms-drawer-size)";
 const SIDE_CONTAINER_CLASS = "px-0 sm:px-0 lg:px-0";
 const EDGE_CONTAINER_CLASS = "max-sm:px-0";
 
-// The handle sits on the drawer's inner edge, over its border.
 const HANDLE_CLASSES: Record<ResizeSide, string> = {
   right: "inset-y-0 left-0 w-2 -translate-x-1/2 cursor-ew-resize",
   left: "inset-y-0 right-0 w-2 translate-x-1/2 cursor-ew-resize",
@@ -173,16 +166,14 @@ const sideContentClass = computed(() => {
     : SIDE_DRAWER_CONTENT;
   return `${narrow} ${SIDE_DRAWER_DESKTOP_CONTENT}`;
 });
-// A top or bottom drawer keeps its natural height until resized.
+
 const contentClass = computed(() => {
   if (isSide.value) return sideContentClass.value;
   return resizedSize.value === undefined
     ? undefined
     : EDGE_DRAWER_DESKTOP_CONTENT;
 });
-// Reka keeps the page's `pointer-events: none` on the body until the
-// panel has slid out (half a second): released as soon as the close starts,
-// a click on the page lands while the drawer animates away.
+
 const contentProps = computed(() => ({
   disableOutsidePointerEvents: isOpen.value,
   ...(resizedSize.value !== undefined && {
@@ -204,12 +195,8 @@ function renderedSize(handle: Element): number | undefined {
   return isSide.value ? rect.width : rect.height;
 }
 
-// The pointerdown is left to bubble: reka's outside-click detection listens
-// on the document and, if it never saw this press inside the drawer, would
-// take the next click on the backdrop for one inside and ignore it. The
-// drawer's own drag cannot start from it: vaul drags only a dismissible
-// drawer, and this one is not.
 function startHandleDrag(event: PointerEvent): void {
+  // SAFETY: This handler is registered on the drawer's HTMLElement resize grip, and runs synchronously while currentTarget is set.
   const handle = event.currentTarget as HTMLElement;
   handle.setPointerCapture?.(event.pointerId);
   const rendered = renderedSize(handle) || resizedSize.value;
@@ -217,24 +204,12 @@ function startHandleDrag(event: PointerEvent): void {
 }
 
 function resizeHandleFromKey(event: KeyboardEvent): void {
+  // SAFETY: This handler is registered on the drawer's HTMLElement resize grip, and runs synchronously while currentTarget is set.
   resizeFromKey(event, renderedSize(event.currentTarget as HTMLElement));
 }
 
-// From lg the resize handle takes the inner edge: the drawer's own grip,
-// drawn in its middle, would sit next to it. Below lg a top or bottom
-// drawer keeps it. A side drawer never draws one: it is not dragged away
-// (`dismissible` is off), and the grip took 22px of a phone's gutter.
-// Important: vaul's unlayered `[data-vaul-handle]` rule outranks a utility.
 const DESKTOP_HIDDEN_GRIP = "lg:hidden!";
 
-// The body scrolls, not the whole drawer: the header (title, row steps,
-// close) stays in view. The body reaches over the container's side padding
-// so its scrollbar sits on the drawer's edge, and carries the bottom padding
-// a form's sticky footer reaches over to sit flush with it (see Form.vue).
-// The body is a flex column: a body component whose root grows (`flex-1`)
-// fills the drawer's height while its content is short, so a
-// `<DmsContainerFooter>` at its end sits at the bottom, and it scrolls past
-// it while long.
 const DRAWER_CONTAINER_CLASS =
   "[--dms-form-foot-pb:1rem] min-h-0 overflow-y-hidden pb-0";
 const DRAWER_BODY_CLASS =
@@ -249,7 +224,6 @@ const drawerUi = computed(() => ({
   body: DRAWER_BODY_CLASS,
 }));
 
-// Let a DmsForm rendered in the body drop its DmsCard (the drawer is the surface).
 provide("dmsFormContainer", true);
 
 const { executeGuards, clearGuards } = useLeaveGuard();
@@ -276,12 +250,8 @@ async function tryClose() {
   closePromise = null;
 }
 
-// A form in the body closes through the guards (its Cancel button) and
-// registers its own under this id, whatever component wraps it.
 provide(DMS_CONTAINER_KEY, { id: props.containerId, close: tryClose });
 
-// Another page (Back, a link): the drawer belongs to the one left. Its
-// unsaved changes were already confirmed by the navigation guard.
 const route = useDmsRoute();
 watch(
   () => route.path,
@@ -292,7 +262,7 @@ watch(
   },
 );
 
-function handleSuccess(result?: unknown) {
+function handleSuccess(result?: Parameters<ContainerInstance["close"]>[0]) {
   clearGuards(props.containerId);
   isOpen.value = false;
   emit("close", result);

package/frontend-vue/layers/dms-ui/app/build/components/containers/modal/DynamicModal.vue

@@ -2,7 +2,10 @@
 import type { Component } from "vue";
 import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
 import type { ModalSize } from "../../../../types/modal";
-import type { ContainerColor } from "../../../../composables/containers/types";
+import type {
+  ContainerColor,
+  ContainerInstance,
+} from "../../../../composables/containers/types";
 import DmsIconWell from "../../../../components/icon-well/IconWell.vue";
 import {
   CLOSING_OVERLAY_CLASS,
@@ -17,17 +20,19 @@ interface DynamicModalProps {
   size?: ModalSize;
   containerId: string;
   component: Component;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- ContainerOptions derives VNode props and constrains reserved keys such as key and ref. This legacy component-prop boundary accepts arbitrary values for every string key without validation.
   componentOptions?: Record<string, unknown>;
   /** Mounts the body component anew when it changes. */
   componentKey?: string;
   headerComponent?: Component;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- ContainerOptions derives VNode props and constrains reserved keys such as key and ref. This legacy header-prop boundary accepts arbitrary values for every string key without validation.
   headerComponentOptions?: Record<string, unknown>;
   icon?: string;
   color?: ContainerColor;
 }
 
 interface DynamicModalEmits {
-  (e: "close", result?: unknown): void;
+  (e: "close", result?: Parameters<ContainerInstance["close"]>[0]): void;
 }
 
 const props = withDefaults(defineProps<DynamicModalProps>(), {
@@ -41,11 +46,8 @@ const props = withDefaults(defineProps<DynamicModalProps>(), {
 });
 const emit = defineEmits<DynamicModalEmits>();
 
-// Let a DmsForm rendered in the body drop its DmsCard (the modal is the surface).
 provide("dmsFormContainer", true);
 
-// UModal has no size variant, so map our ModalSize onto a max-width. Form
-// modals default wider than Nuxt UI's max-w-lg for breathing room.
 const SIZE_ORDER: ModalSize[] = [
   "sm",
   "md",
@@ -68,8 +70,7 @@ const SIZE_CONTENT: Record<ModalSize, string> = {
   "5xl": "sm:max-w-5xl",
   full: "sm:max-w-5xl h-[calc(100dvh-4rem)]",
 };
-// Form modals shouldn't be narrower than this; callers asking for a bigger
-// size are still honored.
+
 const MIN_SIZE: ModalSize = "3xl";
 
 const resolvedSize = computed(() => {
@@ -79,21 +80,18 @@ const resolvedSize = computed(() => {
     : MIN_SIZE;
 });
 
-// A divided head: the body below is a form, not a continuation of the title.
 const modalUi = computed(() => ({
   content: SIZE_CONTENT[resolvedSize.value],
   overlay: CLOSING_OVERLAY_CLASS,
   header: "border-b border-default pb-4 shrink-0",
-  // The body's bottom and side padding: a form's sticky footer sits flush
-  // with the modal's edges (see Form.vue).
+
   body: "[--dms-form-foot-pb:1.25rem] [--dms-form-foot-px:1.25rem]",
 }));
 
 const { executeGuards, clearGuards } = useLeaveGuard();
 
 const isOpen = defineModel<boolean>("open", { default: true });
-// Reka keeps the page's `pointer-events: none` on the body until the modal
-// has scaled out: released as soon as the close starts, a click lands.
+
 const contentProps = computed(() => ({
   disableOutsidePointerEvents: isOpen.value,
 }));
@@ -118,12 +116,8 @@ async function tryClose() {
   closePromise = null;
 }
 
-// A form in the body closes through the guards (its Cancel button) and
-// registers its own under this id, whatever component wraps it.
 provide(DMS_CONTAINER_KEY, { id: props.containerId, close: tryClose });
 
-// Another page (Back, a link): the modal belongs to the one left. Its
-// unsaved changes were already confirmed by the navigation guard.
 const route = useDmsRoute();
 watch(
   () => route.path,
@@ -134,7 +128,7 @@ watch(
   },
 );
 
-function handleSuccess(result?: unknown) {
+function handleSuccess(result?: Parameters<ContainerInstance["close"]>[0]) {
   clearGuards(props.containerId);
   isOpen.value = false;
   emit("close", result);

package/frontend-vue/layers/dms-ui/app/build/components/containers/row/RowHeader.vue

@@ -25,6 +25,7 @@ interface RowHeaderProps {
   subtitleClass?: string;
   /** Drawn under the position line (pills, hints). */
   component?: Component;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- DrawerRowHeader derives VNode props and constrains reserved keys such as key and ref. This legacy header-prop boundary accepts arbitrary values for every string key without validation.
   componentOptions?: Record<string, unknown>;
 }
 
@@ -45,7 +46,6 @@ const DEFAULT_POSITION_KEY = "side_panel.position";
 const { t, locale } = useI18n();
 const { processI18n } = useTranslation();
 
-// "26 120", not "26120": the figures take the locale's grouping.
 const numberFormat = computed(() => new Intl.NumberFormat(locale.value));
 
 const position = computed(() => {
@@ -59,7 +59,6 @@ const position = computed(() => {
     : t(DEFAULT_POSITION_KEY, params);
 });
 
-// Each segment but the last keeps the separator that follows it.
 const headingSegments = computed(() => {
   const separator = props.headingBreakAfter;
   if (!props.heading || !separator) return undefined;

package/frontend-vue/layers/dms-ui/app/build/components/containers/row/drawerRowHeader.ts

@@ -1,10 +1,9 @@
 import { markRaw } from "vue";
 import type { DrawerRowHeader } from "../../../../composables/containers/types";
 
-// The drawer's header title, as `DynamicDrawer` draws its own.
 const DRAWER_ROW_HEADING_CLASS =
   "text-[17px] leading-[1.3] font-[650] tracking-[-0.02em]";
-// The `data-dms-row-drawer-*` hooks tests and styles find the parts by.
+
 const DRAWER_ROW_HEADER_PART = "dms-row-drawer";
 
 /**
@@ -13,10 +12,7 @@ const DRAWER_ROW_HEADER_PART = "dms-row-drawer";
  *
  * @internal
  */
-export function drawerRowHeaderProps(
-  header: DrawerRowHeader,
-  title: string,
-): Record<string, unknown> {
+export function drawerRowHeaderProps(header: DrawerRowHeader, title: string) {
   return {
     part: DRAWER_ROW_HEADER_PART,
     heading: header.title ?? title,
@@ -28,7 +24,7 @@ export function drawerRowHeaderProps(
     headingBreakAfter: header.titleBreakAfter,
     subtitle: header.subtitle,
     subtitleClass: header.subtitleClass,
-    // Kept out of the overlay's reactive props, as the body component is.
+
     component: header.component && markRaw(header.component),
     componentOptions: header.componentOptions,
   };

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

@@ -2,11 +2,6 @@
 import { computed } from "vue";
 import { tv } from "tailwind-variants";
 
-// The one row of pill chips of the DMS (v2 .mc-cat): one pick among them
-// (a radio group: the modules' categories) or several (toggles with a check:
-// the roles of an invitation). Attributes (`id`, `aria-describedby`…) go to
-// the group.
-
 /** One chip: its value, its label and, optionally, a mono count after it. */
 export interface ChipGroupItem {
   value: string;
@@ -74,7 +69,6 @@ const ui = (item: ChipGroupItem) =>
     disabled: props.disabled,
   });
 
-// A single pick reads as radios, several as toggle buttons.
 const groupRole = computed(() => (props.multiple ? "group" : "radiogroup"));
 const chipAria = (item: ChipGroupItem) =>
   props.multiple

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

@@ -11,7 +11,7 @@ import {
   entryRowLayout,
   GROUP_MEMBER_CLASSES,
 } from "../../composables/form/formLayout";
-import { combineSaveStates } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
+import { combineSaveStates } from "#dms-ui/app/composables/layout/useInstantSaveHeader";
 import type { SaveStatusState } from "../../../components/save-bar/SaveStatus.vue";
 import DmsFormFieldControl from "./FormFieldControl.vue";
 import DmsFieldRow from "../../../components/field-row/FieldRow.vue";
@@ -43,8 +43,6 @@ function isGroupVisible(group: FieldGroup): boolean {
   return group.fields.some((field) => !context.isFieldHidden(field));
 }
 
-// A description tells how to fill the field ("Left empty, the default rate
-// applies"): a form where nothing can be changed shows only the values.
 function descriptionOf(entry: FormFieldOrGroup): string | undefined {
   return context.isReadOnly.value ? undefined : entry.description;
 }

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

@@ -16,8 +16,6 @@ const props = defineProps<FormErrorSummaryProps>();
 const emit = defineEmits<{ select: [fieldId: string] }>();
 const { t } = useI18n();
 
-// Every field fixed: the summary says so in place, on as many lines, rather
-// than leaving and moving the form up under the pointer.
 const isResolved = computed(() => props.items.length === 0);
 </script>
 

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { pageLink } from "../../composables/page/pageUrlValues";
+import { isObject } from "#dms-core/app/utils/type-check";
 import type {
   FormField,
   FormFieldReadonly,
@@ -23,11 +24,10 @@ const { state, initialValues, loading } = context;
 const { processI18n } = useTranslation();
 
 const isDisabled = computed(() => context.isFieldDisabled(props.field));
-// A list of rows reads best as its rows, its own control disabled: the
-// display of a cell only counts them. An empty one still reads "empty".
+
 const READS_AS_CONTROL = new Set(["array", "key_value"]);
-const hasRows = (value: unknown): boolean =>
-  !!value && typeof value === "object" && Object.keys(value).length > 0;
+const hasRows = (value: (typeof state)["value"][string]): boolean =>
+  !!value && isObject(value) && Object.keys(value).length > 0;
 const showsDisplay = computed(
   () =>
     isDisabled.value &&
@@ -41,22 +41,19 @@ const component = computed(() => {
   const name = props.field.component.componentName;
   return name ? resolveDmsComponent(name) || name : null;
 });
-// The hint under the control, which describes it (`aria-describedby`): a
-// read-only field has no control to fill, and no hint telling how.
+
 const hint = computed(() =>
   props.field.hint && !isDisabled.value
     ? processI18n(props.field.hint)
     : undefined,
 );
-// UFormField shows its error slot whenever one is given, in the hint's
-// place: it gets one only while the field holds an error.
+
 const formErrors = inject(formErrorsInjectionKey, null);
 const hasError = computed(() => {
   const pattern = fieldErrorPattern(props.field.id);
   return !!formErrors?.value.some((error) => pattern.test(error.name ?? ""));
 });
-// A read-only relation shows the row the server joined (its label, its
-// avatar), as a table cell does, rather than the id its state holds.
+
 const { getDataType } = useDataTypes();
 const readonlyValue = computed(() =>
   readonlyFieldValue(
@@ -66,9 +63,9 @@ const readonlyValue = computed(() =>
     props.field.component.options,
   ),
 );
-// What a read-only field shows beside its value: a pill, a link.
+
 const readonly = computed<FormFieldReadonly>(() =>
-  typeof props.field.readonly === "object" ? props.field.readonly : {},
+  isObject(props.field.readonly) ? props.field.readonly : {},
 );
 </script>
 
@@ -78,7 +75,7 @@ const readonly = computed<FormFieldReadonly>(() =>
   <div class="grid min-w-0 grid-cols-1 gap-1.5">
     <DmsLocalizedField
       v-if="field.localized"
-      v-model="state[field.id] as Record<string, string> | undefined"
+      v-model="state[field.id]"
       :field
       :initial-values="initialValues"
       :loading

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

@@ -1,5 +1,7 @@
 <script setup lang="ts">
 import { isVNode, type VNodeChild } from "vue";
+import { isString, isNumber } from "#dms-core/app/utils/type-check";
+import type { DataTypeFormatter } from "#dms-core/app/composables/data-types/useDataType";
 import type { FormField } from "../../../composables/form/types/field";
 import {
   isEmptyFormValue,
@@ -20,13 +22,10 @@ const value = computed(() => context.state.value[props.field.id]);
 const baseline = computed(() => context.baselineValue(props.field.id));
 const defaultValue = computed(() => props.field.defaultValue);
 
-// "Changed · was X" while a change waits for its save.
 const showsChange = computed(
   () => context.showsChanges && context.isFieldChanged(props.field.id),
 );
-// "Module default · Use default" on a value that is not the default, for a
-// field that offers it (a setting, not a record's initial value), unless the
-// change line already says what it was.
+
 const showsDefault = computed(
   () =>
     !!props.field.offersDefault &&
@@ -36,20 +35,21 @@ const showsDefault = computed(
     !sameFormValue(baseline.value, defaultValue.value),
 );
 
-// Values that do not fit a line, or must not show: "Changed" alone.
 const UNWORDED_TYPES = new Set(["password", "code", "rich_text"]);
 
 /** A value as the field's type words it, or nothing when it cannot. */
-function wordValue(raw: unknown): VNodeChild | undefined {
+function wordValue(
+  raw: Parameters<DataTypeFormatter>[0],
+): VNodeChild | undefined {
   if (UNWORDED_TYPES.has(props.field.type ?? "")) return undefined;
   const dataType = props.field.type ? getDataType(props.field.type) : undefined;
   if (dataType?.displayComponent && !dataType.formatter) return undefined;
   const formatter = dataType?.formatter?.default;
   if (formatter) {
     const worded = formatter(raw, locale.value, props.field.component.options);
-    return isVNode(worded) || typeof worded === "string" ? worded : undefined;
+    return isVNode(worded) || isString(worded) ? worded : undefined;
   }
-  if (typeof raw === "string" || typeof raw === "number") return String(raw);
+  if (isString(raw) || isNumber(raw)) return String(raw);
   return undefined;
 }
 

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

@@ -4,9 +4,6 @@ import DmsEmptyState, {
 } from "../../../components/empty-state/EmptyState.vue";
 import type { FormLoadFailure } from "../../composables/form/formRecordLoad";
 
-// What a form shows instead of its fields when the record it edits did not
-// load: empty fields would read as the record, and a save from them would
-// replace values the form never showed.
 interface FormLoadErrorProps {
   failure: FormLoadFailure;
   /** Set while the record is being loaded again. */
@@ -30,8 +27,7 @@ const VARIANTS: Record<FormLoadFailure, EmptyStateVariant> = {
   not_found: "no-result",
   error: "error",
 };
-// A record the address names none of, or one that does not exist, is not
-// read again by trying.
+
 const RETRIES = new Set<FormLoadFailure>(["forbidden", "error"]);
 </script>
 

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

@@ -31,8 +31,6 @@ const { processI18n } = useTranslation();
  */
 type FormSectionNavLayout = FormSectionNavVariant | "chipGroups";
 
-// A row of chips with no group keeps its one scrolling line; with groups, the
-// runs wrap, each led by its label.
 const GROUPS_CLASSES: Record<FormSectionNavLayout, string> = {
   list: "flex flex-col gap-4",
   chips: "",
@@ -63,8 +61,6 @@ const ITEM_CLASSES: Record<FormSectionNavVariant, string> = {
     "border-default text-muted hover:text-default flex h-7 shrink-0 items-center gap-1.5 rounded-full border px-3 text-[12.5px]",
 };
 
-// The current section carries a mark of its own, so the entry under the
-// pointer never reads as a second current one.
 const ACTIVE_CLASSES: Record<FormSectionNavVariant, string> = {
   list: "bg-elevated text-highlighted font-[550] shadow-[inset_2px_0_0_var(--ui-primary)]",
   chips: "border-accented bg-elevated text-highlighted",