@antelopejs/dms 0.11.0 → 0.12.0

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

@@ -0,0 +1,457 @@
+<script setup lang="ts">
+import DmsFieldError from "../../field-error/FieldError.vue";
+import { failureLabelKey, itemMeta } from "./imageItems";
+import type { ImagePresentationState } from "./imagePresentation";
+
+const props = defineProps<{
+  state: ImagePresentationState;
+  multiple?: boolean;
+  disabled?: boolean;
+}>();
+
+const {
+  t,
+  ariaAttrs,
+  fileInput,
+  items,
+  singleItem,
+  detailItem,
+  isDraggingOver,
+  dragItemId,
+  dragOverItemId,
+  detailAltDraft,
+  isDetailOpen,
+  invalid,
+  isFull,
+  acceptString,
+  formatsHint,
+  pasteShortcut,
+  dropZoneClass,
+  rejections,
+  rejectionId,
+  singleAltInputId,
+  detailAltInputId,
+  onFileInputChange,
+  onDrop,
+  onPaste,
+  onImageLoad,
+  openFilePicker,
+  openDetail,
+  saveDetail,
+  onSingleAltChange,
+  setPrincipal,
+  removeItem,
+  retryUpload,
+  onTileDragStart,
+  onTileDragEnter,
+  onTileDragEnd,
+  onTileDrop,
+} = props.state;
+</script>
+
+<template>
+  <div class="@container" @paste="onPaste">
+    <input
+      ref="fileInput"
+      type="file"
+      :accept="acceptString"
+      :multiple="multiple"
+      class="sr-only"
+      tabindex="-1"
+      :aria-invalid="rejections.length > 0 || undefined"
+      :aria-describedby="rejections.length ? rejectionId : undefined"
+      @change="onFileInputChange"
+    />
+
+    <div v-if="multiple" class="flex flex-col gap-3">
+      <div
+        class="grid grid-cols-[repeat(auto-fill,minmax(min(8.25rem,calc(50%-0.375rem)),1fr))] gap-3"
+        role="group"
+        v-bind="items.length ? ariaAttrs : undefined"
+      >
+        <div
+          v-for="item in items"
+          :key="item.id"
+          class="group relative aspect-square cursor-pointer overflow-hidden rounded-xl shadow-sm transition-transform"
+          :class="{
+            'ring-error ring-2': invalid,
+            'ring-primary ring-2':
+              !invalid && item.principal && item.status === 'done',
+            'opacity-40': dragItemId === item.id,
+            'scale-95': dragOverItemId === item.id && dragItemId !== item.id,
+          }"
+          :draggable="!disabled"
+          @dragstart="onTileDragStart($event, item.id)"
+          @dragenter="onTileDragEnter(item.id)"
+          @dragover.prevent
+          @dragend="onTileDragEnd"
+          @drop.prevent="onTileDrop(item.id)"
+          @click="openDetail(item.id)"
+        >
+          <div class="bg-elevated absolute inset-0">
+            <img
+              v-if="item.url"
+              :src="item.url"
+              :alt="item.alt"
+              class="absolute inset-0 h-full w-full object-cover"
+              @load="onImageLoad(item, $event)"
+            />
+          </div>
+          <span
+            class="absolute bottom-1.5 left-1.5 z-[2] max-w-[calc(100%-0.75rem)] truncate rounded-md bg-neutral-900/55 px-1.5 py-0.5 text-[10px] font-medium text-white backdrop-blur-sm"
+          >
+            {{ item.filename }}
+          </span>
+          <span
+            v-if="item.principal && item.status === 'done'"
+            class="absolute top-1.5 left-1.5 z-[3] inline-flex items-center gap-1 rounded-full bg-(--dms-accent-fill) px-2 py-0.5 text-[11px] font-semibold text-(--dms-accent-on-fill) shadow-sm"
+          >
+            <UIcon name="i-lucide-star" class="size-3" />
+            {{ t("dms.form.image.principal") }}
+          </span>
+          <div
+            v-if="item.status === 'done' && !disabled"
+            class="absolute top-1.5 right-1.5 z-[4] flex -translate-y-0.5 gap-1 opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
+          >
+            <UTooltip
+              v-if="!item.principal"
+              :text="t('dms.form.image.set_principal')"
+            >
+              <UButton
+                icon="i-lucide-star"
+                size="xs"
+                color="neutral"
+                variant="solid"
+                class="bg-white/90 text-neutral-600 shadow-sm backdrop-blur-sm hover:bg-white hover:text-(--ui-color-primary-700)"
+                @click.stop="setPrincipal(item.id)"
+              />
+            </UTooltip>
+            <UTooltip :text="t('dms.form.image.edit_alt')">
+              <UButton
+                icon="i-lucide-pencil"
+                size="xs"
+                color="neutral"
+                variant="solid"
+                class="bg-white/90 text-neutral-600 shadow-sm backdrop-blur-sm hover:bg-white hover:text-neutral-900"
+                @click.stop="openDetail(item.id)"
+              />
+            </UTooltip>
+            <UTooltip :text="t('dms.form.image.delete')">
+              <UButton
+                icon="i-lucide-trash-2"
+                size="xs"
+                color="neutral"
+                variant="solid"
+                class="hover:text-error bg-white/90 text-neutral-600 shadow-sm backdrop-blur-sm hover:bg-white"
+                @click.stop="removeItem(item.id)"
+              />
+            </UTooltip>
+          </div>
+          <div
+            v-if="item.status === 'uploading'"
+            class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-2 bg-neutral-900/40 text-white backdrop-blur-[2px]"
+          >
+            <span class="text-sm font-semibold tabular-nums">
+              {{ item.progress }}%
+            </span>
+            <span class="h-1 w-3/4 overflow-hidden rounded-full bg-white/30">
+              <span
+                class="block h-full rounded-full bg-white transition-[width] duration-200"
+                :style="{ width: `${item.progress}%` }"
+              />
+            </span>
+          </div>
+          <div
+            v-else-if="failureLabelKey(item)"
+            class="bg-error/15 absolute inset-0 z-[5] flex flex-col items-center justify-center gap-2 p-2 text-center backdrop-blur-[1px]"
+          >
+            <span
+              class="bg-error rounded-md px-2 py-0.5 text-[11px] font-semibold text-white"
+            >
+              {{ t(failureLabelKey(item)!) }}
+            </span>
+            <UButton
+              v-if="item.file"
+              icon="i-lucide-rotate-cw"
+              :label="t('dms.form.image.retry')"
+              size="xs"
+              color="error"
+              variant="outline"
+              class="bg-white"
+              @click.stop="retryUpload(item.id)"
+            />
+            <UButton
+              v-else
+              icon="i-lucide-trash-2"
+              :label="t('dms.form.image.delete')"
+              size="xs"
+              color="error"
+              variant="outline"
+              class="bg-white"
+              @click.stop="removeItem(item.id)"
+            />
+          </div>
+        </div>
+        <button
+          v-if="!isFull && !disabled"
+          type="button"
+          class="text-muted hover:text-primary flex aspect-square cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-(--dms-bg-field) transition-colors hover:bg-(--dms-accent-tint)"
+          :class="dropZoneClass"
+          v-bind="ariaAttrs"
+          @click="openFilePicker"
+          @dragover.prevent="isDraggingOver = true"
+          @dragleave="isDraggingOver = false"
+          @drop.prevent="onDrop"
+        >
+          <UIcon name="i-lucide-plus" class="size-6" />
+          <span class="text-[13px] font-medium">
+            {{ t("dms.form.image.add") }}
+          </span>
+          <span class="text-[11px]">
+            {{ t("dms.form.image.drop_hint") }}
+          </span>
+        </button>
+      </div>
+      <p class="text-dimmed flex items-center gap-1.5 text-xs">
+        <UIcon name="i-lucide-image" class="size-3.5" />
+        {{ t("dms.form.image.gallery_hint", { shortcut: pasteShortcut }) }} ·
+        {{ formatsHint }}
+      </p>
+    </div>
+
+    <div v-else>
+      <button
+        v-if="!singleItem"
+        type="button"
+        class="text-muted hover:text-primary flex min-h-36 w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-lg border border-dashed bg-(--dms-bg-field) px-4 py-3 text-center transition-colors hover:bg-(--dms-accent-tint)"
+        :class="dropZoneClass"
+        v-bind="ariaAttrs"
+        :disabled="disabled"
+        @click="openFilePicker"
+        @dragover.prevent="isDraggingOver = true"
+        @dragleave="isDraggingOver = false"
+        @drop.prevent="onDrop"
+      >
+        <UIcon name="i-lucide-upload" class="size-6" />
+        <span class="text-[13px] font-medium">
+          {{ t("dms.form.image.single_prompt", { shortcut: pasteShortcut }) }}
+        </span>
+        <span class="text-[11px]">
+          {{ t("dms.form.image.single_hint") }} · {{ formatsHint }}
+        </span>
+      </button>
+      <div
+        v-else
+        class="flex flex-col gap-4 @min-[480px]:flex-row @min-[480px]:items-stretch"
+      >
+        <div
+          class="group relative aspect-[4/3] w-full flex-none overflow-hidden rounded-xl shadow-sm @min-[480px]:w-58"
+          :class="{
+            'ring-primary ring-2': isDraggingOver,
+            'ring-error ring-2': !isDraggingOver && invalid,
+          }"
+          role="group"
+          v-bind="ariaAttrs"
+          @dragover.prevent="isDraggingOver = true"
+          @dragleave="isDraggingOver = false"
+          @drop.prevent="onDrop"
+        >
+          <div class="bg-elevated absolute inset-0">
+            <img
+              v-if="singleItem.url"
+              :src="singleItem.url"
+              :alt="singleItem.alt"
+              class="absolute inset-0 h-full w-full object-cover"
+              @load="onImageLoad(singleItem, $event)"
+            />
+          </div>
+          <div
+            v-if="singleItem.status === 'done' && !disabled"
+            class="absolute top-1.5 right-1.5 z-[4] flex -translate-y-0.5 gap-1 opacity-0 transition-all group-hover:translate-y-0 group-hover:opacity-100"
+          >
+            <UTooltip :text="t('dms.form.image.replace')">
+              <UButton
+                icon="i-lucide-arrow-left-right"
+                size="xs"
+                color="neutral"
+                variant="solid"
+                class="bg-white/90 text-neutral-600 shadow-sm backdrop-blur-sm hover:bg-white hover:text-neutral-900"
+                @click="openFilePicker"
+              />
+            </UTooltip>
+            <UTooltip :text="t('dms.form.image.delete')">
+              <UButton
+                icon="i-lucide-trash-2"
+                size="xs"
+                color="neutral"
+                variant="solid"
+                class="hover:text-error bg-white/90 text-neutral-600 shadow-sm backdrop-blur-sm hover:bg-white"
+                @click="removeItem(singleItem.id)"
+              />
+            </UTooltip>
+          </div>
+          <div
+            v-if="singleItem.status === 'uploading'"
+            class="absolute inset-0 z-[5] flex flex-col items-center justify-center gap-2 bg-neutral-900/40 text-white backdrop-blur-[2px]"
+          >
+            <span class="text-sm font-semibold tabular-nums">
+              {{ singleItem.progress }}%
+            </span>
+            <span class="h-1 w-3/4 overflow-hidden rounded-full bg-white/30">
+              <span
+                class="block h-full rounded-full bg-white transition-[width] duration-200"
+                :style="{ width: `${singleItem.progress}%` }"
+              />
+            </span>
+          </div>
+          <div
+            v-else-if="failureLabelKey(singleItem)"
+            class="bg-error/15 absolute inset-0 z-[5] flex flex-col items-center justify-center gap-2 p-2 text-center backdrop-blur-[1px]"
+          >
+            <span
+              class="bg-error rounded-md px-2 py-0.5 text-[11px] font-semibold text-white"
+            >
+              {{ t(failureLabelKey(singleItem)!) }}
+            </span>
+            <UButton
+              v-if="singleItem.file"
+              icon="i-lucide-rotate-cw"
+              :label="t('dms.form.image.retry')"
+              size="xs"
+              color="error"
+              variant="outline"
+              class="bg-white"
+              @click="retryUpload(singleItem.id)"
+            />
+            <UButton
+              v-else
+              icon="i-lucide-trash-2"
+              :label="t('dms.form.image.delete')"
+              size="xs"
+              color="error"
+              variant="outline"
+              class="bg-white"
+              @click="removeItem(singleItem.id)"
+            />
+          </div>
+        </div>
+        <div class="flex min-w-0 flex-1 flex-col">
+          <div class="text-default truncate text-sm font-semibold">
+            {{ singleItem.filename }}
+          </div>
+          <div class="text-dimmed mt-0.5 text-xs">
+            <template v-if="singleItem.status === 'uploading'">
+              {{
+                t("dms.form.image.uploading", { progress: singleItem.progress })
+              }}
+            </template>
+            <template v-else-if="failureLabelKey(singleItem)">
+              {{ t(failureLabelKey(singleItem)!) }}
+            </template>
+            <template v-else>{{ itemMeta(singleItem) }}</template>
+          </div>
+          <div class="mt-3">
+            <label
+              :for="singleAltInputId"
+              class="text-muted mb-1.5 block text-xs font-semibold"
+            >
+              {{ t("dms.form.image.alt_label") }}
+            </label>
+            <UInput
+              :id="singleAltInputId"
+              v-model="singleItem.alt"
+              :placeholder="t('dms.form.image.alt_placeholder')"
+              :disabled="disabled || singleItem.status !== 'done'"
+              class="w-full"
+              @change="onSingleAltChange"
+            />
+          </div>
+          <div v-if="!disabled" class="mt-auto flex gap-2 pt-4">
+            <UButton
+              icon="i-lucide-arrow-left-right"
+              :label="t('dms.form.image.replace')"
+              color="neutral"
+              variant="outline"
+              size="sm"
+              @click="openFilePicker"
+            />
+            <UButton
+              icon="i-lucide-trash-2"
+              :label="t('dms.form.image.delete')"
+              color="error"
+              variant="outline"
+              size="sm"
+              @click="removeItem(singleItem.id)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <UModal v-model:open="isDetailOpen" :ui="{ content: 'sm:max-w-sm' }">
+      <template #content>
+        <div v-if="detailItem" class="flex flex-col">
+          <div
+            class="bg-elevated relative aspect-[16/10] w-full overflow-hidden"
+          >
+            <img
+              v-if="detailItem.url"
+              :src="detailItem.url"
+              :alt="detailItem.alt"
+              class="absolute inset-0 h-full w-full object-cover"
+            />
+            <span
+              v-if="detailItem.principal"
+              class="absolute top-2 left-2 inline-flex items-center gap-1 rounded-full bg-(--dms-accent-fill) px-2 py-0.5 text-[11px] font-semibold text-(--dms-accent-on-fill) shadow-sm"
+            >
+              <UIcon name="i-lucide-star" class="size-3" />
+              {{ t("dms.form.image.principal") }}
+            </span>
+          </div>
+          <div class="flex flex-col gap-2 p-4">
+            <label
+              :for="detailAltInputId"
+              class="text-muted text-xs font-semibold"
+            >
+              {{ t("dms.form.image.alt_label") }}
+            </label>
+            <UTextarea
+              :id="detailAltInputId"
+              v-model="detailAltDraft"
+              :placeholder="t('dms.form.image.alt_placeholder')"
+              :rows="3"
+              autofocus
+            />
+            <div class="mt-2 flex items-center gap-2">
+              <UButton
+                icon="i-lucide-star"
+                :label="
+                  detailItem.principal
+                    ? t('dms.form.image.principal_current')
+                    : t('dms.form.image.set_principal')
+                "
+                color="primary"
+                variant="subtle"
+                size="sm"
+                :disabled="detailItem.principal"
+                @click="setPrincipal(detailItem.id)"
+              />
+              <UButton
+                :label="t('dms.form.image.save')"
+                color="primary"
+                size="sm"
+                class="ml-auto"
+                @click="saveDetail"
+              />
+            </div>
+          </div>
+        </div>
+      </template>
+    </UModal>
+    <DmsFieldError
+      :id="rejectionId"
+      class="mt-2"
+      :message="rejections.join(' ')"
+    />
+  </div>
+</template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { pageRequestUrl } from "../../../build/composables/page/pageUrlValues";
+import { isObject } from "#dms-core/app/utils/type-check";
 import type { SelectMenuItem } from "@nuxt/ui";
 import { refDebounced } from "@vueuse/core";
 import {
@@ -82,8 +83,6 @@ const defaultCountryCode = computed(
   () => props.defaultCountry?.trim().toUpperCase() ?? "",
 );
 
-// An address with no country shows the default one; it is written with the
-// first part typed, so an address left empty stays empty.
 const safeModelValue = computed<AddressValue>(() => {
   const value = modelValue.value ?? defaultAddress;
   return value.countryCode || !defaultCountryCode.value
@@ -91,11 +90,6 @@ const safeModelValue = computed<AddressValue>(() => {
     : { ...value, countryCode: defaultCountryCode.value };
 });
 
-/* -------------------------------------------------------------------------- */
-/* Field state: which parts show the field's error                            */
-/* -------------------------------------------------------------------------- */
-
-// The parts the address type requires (see AddressType in interface-dms).
 const REQUIRED_PARTS = new Set<keyof AddressValue>([
   "streetName",
   "postalCode",
@@ -103,8 +97,6 @@ const REQUIRED_PARTS = new Set<keyof AddressValue>([
   "countryCode",
 ]);
 
-// Taken here so the sub-inputs do not each pick up the whole field's error:
-// each part shows its own.
 const {
   name: fieldName,
   ariaAttrs,
@@ -114,6 +106,7 @@ const {
 const formErrors = inject(formErrorsInjectionKey, null);
 const formInputs = inject(formInputsInjectionKey, null);
 
+// SAFETY: defaultAddress is the local literal above, contains only AddressValue keys and is never assigned extra properties.
 const PARTS = Object.keys(defaultAddress) as Array<keyof AddressValue>;
 const FIRST_PART: keyof AddressValue = "streetName";
 
@@ -127,8 +120,6 @@ function partId(part: keyof AddressValue): string | undefined {
   return part === FIRST_PART ? base : `${base}.${part}`;
 }
 
-// Each part is an input of the form, so an error a server raises on one
-// (`address.postalCode`) lands on it rather than being dropped.
 onMounted(() => {
   const name = fieldName.value;
   if (!name || !formInputs) return;
@@ -170,11 +161,9 @@ function partState(part: keyof AddressValue) {
 
 const root = useTemplateRef<HTMLElement>("root");
 
-// The address is left when focus leaves all of its parts, not each one: a
-// part left for the next must not flag the parts not reached yet.
 function onFocusOut(event: FocusEvent) {
-  const next = event.relatedTarget as Node | null;
-  if (next && root.value?.contains(next)) return;
+  const next = event.relatedTarget;
+  if (next instanceof Node && root.value?.contains(next)) return;
   emitFormBlur();
 }
 
@@ -197,14 +186,10 @@ const patchFields = (patch: Partial<AddressValue>) => {
   emitFormInput();
 };
 
-/* -------------------------------------------------------------------------- */
-/* Country select (static i18n list, or remote DMS data API via searchUrl)    */
-/* -------------------------------------------------------------------------- */
-
 const staticCountryOptions = computed(() => {
-  const countries = tm("country") as Record<string, unknown>;
+  const countries = tm("country");
 
-  if (!countries || typeof countries !== "object") {
+  if (!countries || !isObject(countries)) {
     return [];
   }
 
@@ -232,8 +217,8 @@ const mapCountryData = (item: Record<string, string>) => {
   const valueKey = props.keyMapping?.value || "value";
 
   return {
-    label: item[labelKey] as string,
-    value: item[valueKey] as string,
+    label: item[labelKey],
+    value: item[valueKey],
   };
 };
 
@@ -285,14 +270,12 @@ async function fetchCountryOptions(): Promise<CountryOptions> {
   return { ...data, results: items };
 }
 
-// The second argument is the handler of the keyed form; this call is keyless,
-// so the options belong in third position.
 const dynamicCountryData = props.searchUrl
   ? await useDmsAsyncData(fetchCountryOptions, undefined, {
       lazy: true,
       immediate: false,
       watch: [countrySearchTermDebounced],
-      // Options to pick from, not the page's data.
+
       refreshOnPageRefresh: false,
     })
   : { data: ref(null), status: ref("idle"), execute: () => {} };
@@ -304,10 +287,6 @@ const countryOptions = computed(() => {
   return staticCountryOptions.value;
 });
 
-/* -------------------------------------------------------------------------- */
-/* Street autocomplete (Photon geocoder by default — free, key-less, global)  */
-/* -------------------------------------------------------------------------- */
-
 interface PhotonProperties {
   name?: string;
   street?: string;
@@ -351,19 +330,12 @@ const streetQueryDebounced = refDebounced(streetQuery, SEARCH_DEBOUNCE_MS);
 const suggestions = ref<AddressSuggestion[]>([]);
 const isSearching = ref(false);
 const showSuggestions = ref(false);
-// Suggestions only open under the street field while it has the focus: an
-// answer arriving once the user left it must not cover the next fields.
+
 const isStreetFocused = ref(false);
 
-// Photon/OSM exposes a single `housenumber`. We only pull a box/unit out when it
-// is *explicitly* marked (BE "bte", NL "bus", "box", or a "/" separator). A bare
-// letter suffix like "182A" — or "12 bis" — is a distinct house number, not a
-// box, so it stays in the house number field.
 const BOX_KEYWORD = /\s+(?:bo[iî]te|bus|box|bte)\s*\.?\s*/i;
 
-const splitHouseNumber = (
-  raw?: string,
-): { houseNumber: string; boxNumber: string } => {
+const splitHouseNumber = (raw?: string) => {
   const value = (raw ?? "").trim();
   if (!value) return { houseNumber: "", boxNumber: "" };
 
@@ -407,8 +379,6 @@ const formatPhotonLabel = (p: PhotonProperties): string => {
   return [street, locality, p.country].filter(Boolean).join(", ");
 };
 
-// Monotonic id so a slow in-flight request can never overwrite the results of
-// a more recent keystroke (out-of-order responses are discarded).
 let searchSeq = 0;
 
 watch(streetQueryDebounced, async (query) => {
@@ -428,8 +398,7 @@ watch(streetQueryDebounced, async (query) => {
       params: {
         q: query,
         lang: photonLang.value,
-        // A wider pool, so the places of the address's country can come
-        // first and the duplicates can go.
+
         limit: suggestionPoolSize(photonLimit.value),
       },
     });
@@ -472,11 +441,9 @@ const streetModel = computed({
 });
 
 const applySuggestion = (suggestion: AddressSuggestion) => {
-  // A place the geocoder gives no country keeps the one shown.
   const { countryCode, ...located } = suggestion.patch;
   patchFields(countryCode ? suggestion.patch : located);
-  // Bump the sequence so any still-in-flight request is discarded and cannot
-  // repopulate the list / reopen the dropdown after the user picked a result.
+
   searchSeq++;
   suggestions.value = [];
   showSuggestions.value = false;
@@ -501,7 +468,7 @@ const onStreetBlur = () => {
 /** Escape closes the suggestions, as it would any list; typing reopens it. */
 const onStreetEscape = (event: KeyboardEvent) => {
   if (!showSuggestions.value) return;
-  // Only the list closes, not the drawer or modal around the form.
+
   event.stopPropagation();
   showSuggestions.value = false;
 };
@@ -510,10 +477,6 @@ onBeforeUnmount(() => {
   if (blurTimer) clearTimeout(blurTimer);
 });
 
-/* -------------------------------------------------------------------------- */
-/* Placeholders                                                               */
-/* -------------------------------------------------------------------------- */
-
 const resolvePlaceholder = (
   field: keyof AddressValue,
   fallbackKey: string,
@@ -554,8 +517,6 @@ const placeholders = computed(() => ({
   ),
 }));
 
-// When autocomplete is on, the street field doubles as the address search box,
-// so its placeholder hints that typing will search.
 const streetPlaceholder = computed(() => {
   if (!autocompleteEnabled.value) return placeholders.value.streetName;
   return props.autocomplete?.placeholder

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

@@ -47,13 +47,12 @@ const model = defineModel<string | null | undefined>();
 const { t } = useI18n();
 const { $authFetch } = useAuthFetch();
 const { report } = useControlError();
-// The field state UFormField hands its control: the error border and aria
-// attributes go on the editor, an edit re-validates the field.
+
 const { color, ariaAttrs, emitFormInput, emitFormBlur } = useFormField();
 const isInvalid = computed(() => color.value === "error");
 
 const LINE_HEIGHT_PX = 19;
-// The editor's top and bottom padding, around its lines.
+
 const EDITOR_PADDING_PX = 16;
 const INVALID_JSON = "$dms.field_errors.invalid_json";
 
@@ -101,7 +100,6 @@ async function loadCompletions(): Promise<CodeEditorCompletion[]> {
   return [...fixed, ...fetched];
 }
 
-// The icons drawn into the autocomplete popup, unmounted with the editor.
 const iconElements = new Set<HTMLElement>();
 
 function renderIcon(icon: string): HTMLElement {