@antelopejs/dms 0.5.6 → 0.6.0

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

@@ -1,5 +1,6 @@
 <script setup lang="ts" generic="R extends boolean, M extends boolean">
 import { formatDate } from "#dms-core/app/utils/formatter";
+import { useUserRegionalPreferences } from "#dms-core/app/composables/user/useUserRegionalPreferences";
 import type {
   CalendarProps,
   CalendarSlots,
@@ -12,6 +13,13 @@ import {
   type CalendarDate,
 } from "@internationalized/date";
 import { reactivePick } from "@vueuse/core";
+import { useFormField } from "@nuxt/ui/composables/useFormField";
+import { useControlError } from "../../../build/composables/form/useControlError";
+import {
+  FIELD_TRIGGER_CLASS,
+  FIELD_TRIGGER_INVALID_CLASS,
+  FIELD_TRIGGER_UI,
+} from "../../../build/utils/fieldTrigger";
 
 // Mid-selection, the range calendar emits a range whose end is still unset.
 interface StrictDateRange {
@@ -37,7 +45,19 @@ type DateValue =
   | null
   | undefined;
 
-type DatePickerProps = Omit<CalendarProps<R, M>, "modelValue">;
+interface DatePickerProps extends Omit<CalendarProps<R, M>, "modelValue"> {
+  /** Id of the trigger, the control a field label points to. */
+  id?: string;
+  /** Earliest day that can be picked (ISO date). */
+  minDate?: string;
+  /** Latest day that can be picked (ISO date). */
+  maxDate?: string;
+  /**
+   * `error` marks the field invalid, as UFormField does for the controls it
+   * wraps; any other colour tints the calendar.
+   */
+  color?: CalendarProps<R, M>["color"] | "error";
+}
 
 const props = defineProps<DatePickerProps>();
 const emits = defineEmits<{
@@ -55,6 +75,16 @@ const emits = defineEmits<{
 defineSlots<CalendarSlots>();
 
 const { locale, t } = useI18n();
+const { weekStartsOn } = useUserRegionalPreferences();
+
+// The picker holds calendar days, read as UTC midnights (see
+// convertToCalendarDate): written in UTC, a day never shifts with the zone.
+const DATE_LABEL_FORMAT: Intl.DateTimeFormatOptions = {
+  year: "numeric",
+  month: "long",
+  day: "2-digit",
+  timeZone: "UTC",
+};
 
 const modelValue = defineModel<string | undefined | null>();
 
@@ -92,6 +122,14 @@ function isDateRangeValue(
 }
 
 function convertModelValue(value: DateValue): DateValue {
+  // A range may also arrive as `[start, end]`, the list shape the date type
+  // still accepts.
+  if (props.range && Array.isArray(value)) {
+    return convertDateRangeValue({
+      start: value[0] as string | undefined,
+      end: value[1] as string | undefined,
+    });
+  }
   if (isString(value)) {
     return convertIsoStringToCalendarDate(value);
   }
@@ -104,15 +142,81 @@ function convertModelValue(value: DateValue): DateValue {
   return value;
 }
 
-const convertedProps = computed(() => ({
-  ...props,
-  modelValue: convertModelValue(modelValue.value as DateValue),
-}));
+// The field state UFormField hands its control: the error border and aria
+// attributes go on the trigger, picks and closes re-validate the field.
+const {
+  color: fieldColor,
+  ariaAttrs,
+  emitFormBlur,
+  emitFormChange,
+} = useFormField(
+  // Its props typing knows only Nuxt UI colours and sizes; it reads `id`,
+  // `color` and `disabled` from these.
+  props as Parameters<typeof useFormField>[0],
+);
+const invalid = computed(() => fieldColor.value === "error");
+
+// A range picked halfway (its start only) is no range, and the calendar
+// drops that start once it closes: the field says the end is missing, until
+// a whole range is picked or the field is cleared.
+const RANGE_INCOMPLETE = "$dms.field_errors.range_incomplete";
+const { report } = useControlError();
+let isHalfPicked = false;
+
+/** Follows a range being picked: its start alone, then both ends. */
+function trackRangePick(value: unknown): void {
+  if (value === null || value === undefined) {
+    isHalfPicked = false;
+    report(undefined);
+    return;
+  }
+  const ends = value as Partial<StrictDateRange>;
+  if (!ends.start) return;
+  isHalfPicked = !ends.end;
+  if (!isHalfPicked) report(undefined);
+}
+
+function onPickerToggle(open: boolean): void {
+  if (open) return;
+  if (props.range && isHalfPicked) report(RANGE_INCOMPLETE);
+  emitFormBlur();
+}
+
+function toBoundDate(value: string | undefined): CalendarDate | undefined {
+  return value ? convertIsoStringToCalendarDate(value) : undefined;
+}
+
+const convertedProps = computed(() => {
+  const {
+    id: _id,
+    minDate: _minDate,
+    maxDate: _maxDate,
+    color,
+    ...calendarProps
+  } = props as DatePickerProps;
+  return {
+    ...calendarProps,
+    color: color === "error" ? undefined : color,
+    modelValue: convertModelValue(modelValue.value as DateValue),
+  };
+});
+
+// Bound on the calendar itself: forwarding only passes props this component
+// was given, and the bounds arrive as `minDate` / `maxDate`.
+const minValue = computed(() => props.minValue ?? toBoundDate(props.minDate));
+const maxValue = computed(() => props.maxValue ?? toBoundDate(props.maxDate));
 
 type EmitEvent = string;
 type EmitValue = unknown;
 
 const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
+  forwardEmit(event, value);
+  if (event === "update:modelValue" && props.range) trackRangePick(value);
+  // After the update: the field re-validates its new value.
+  if (event === "update:modelValue") emitFormChange();
+};
+
+function forwardEmit(event: EmitEvent, value: EmitValue): void {
   if (event === "update:modelValue" && value) {
     if (Array.isArray(value)) {
       const isoStrings = (value as CalendarDate[]).map((date) =>
@@ -139,7 +243,7 @@ const wrappedEmits = (event: EmitEvent, value: EmitValue) => {
     const forwardEvent = emits as (event: string, ...args: unknown[]) => void;
     forwardEvent(event, value);
   }
-};
+}
 
 const forwarded = useForwardPropsEmits(
   convertedProps as unknown as ComputedRef<CalendarProps<R, M>>,
@@ -153,13 +257,20 @@ function formatDateLabel(value: unknown): string | undefined {
   }
   // A CalendarDate stringifies to its ISO date.
   const date = value instanceof Date ? value : String(value);
-  return formatDate(date, locale.value) ?? undefined;
+  return formatDate(date, locale.value, DATE_LABEL_FORMAT) ?? undefined;
 }
 
 // Range mode holds a { start, end } object and multiple mode an array, which
 // formatDate cannot read as a single date.
 const label = computed(() => {
   const value: unknown = modelValue.value;
+  if (props.range && Array.isArray(value)) {
+    return (
+      [formatDateLabel(value[0]), formatDateLabel(value[1])]
+        .filter(Boolean)
+        .join(" – ") || undefined
+    );
+  }
   if (Array.isArray(value)) {
     return value.map(formatDateLabel).filter(Boolean).join(", ") || undefined;
   }
@@ -175,22 +286,39 @@ const label = computed(() => {
 </script>
 
 <template>
-  <UPopover>
+  <UPopover @update:open="onPickerToggle">
     <UButton
+      :id="props.id"
       :label="label ?? t('dms.form.select_date')"
       :ui="{
-        label: label ? 'text-default' : 'text-dimmed',
+        ...FIELD_TRIGGER_UI,
+        label: label ? 'truncate text-highlighted' : 'truncate text-dimmed',
+      }"
+      v-bind="{
+        ...buttonProps,
+        'aria-invalid': invalid || undefined,
+        ...ariaAttrs,
       }"
-      v-bind="buttonProps"
       variant="outline"
       color="neutral"
-      trailing
+      icon="i-ph-calendar-blank"
       trailing-icon="i-ph-caret-down"
       block
+      :class="[
+        'justify-start',
+        FIELD_TRIGGER_CLASS,
+        invalid && FIELD_TRIGGER_INVALID_CLASS,
+      ]"
     />
 
     <template #content>
-      <UCalendar v-bind="forwarded" />
+      <UCalendar
+        v-bind="forwarded"
+        :min-value="minValue"
+        :max-value="maxValue"
+        :week-starts-on="props.weekStartsOn ?? weekStartsOn"
+        class="p-2.5"
+      />
     </template>
   </UPopover>
 </template>

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

@@ -1,10 +1,14 @@
 <script setup lang="ts">
+import { useFormField } from "@nuxt/ui/composables/useFormField";
 import DmsDatePicker from "./DatePicker.vue";
 
 interface DatePickerRangeProps {
+  id?: string;
   minDate?: string;
   maxDate?: string;
   disabled?: boolean;
+  /** `error` marks both ends invalid (UFormField sets it from the field). */
+  color?: string;
 }
 
 const props = defineProps<DatePickerRangeProps>();
@@ -36,12 +40,24 @@ function emitRange(start: string | undefined, end: string | undefined) {
 }
 
 const { t } = useI18n();
+
+// Both pickers show the field's error.
+const { color: fieldColor } = useFormField(
+  // Its props typing knows only Nuxt UI colours and sizes; it reads `id`,
+  // `color` and `disabled` from these.
+  props as Parameters<typeof useFormField>[0],
+);
+const pickerColor = computed(() =>
+  fieldColor.value === "error" ? "error" : undefined,
+);
 </script>
 
 <template>
   <div class="flex items-center gap-2">
     <DmsDatePicker
+      :id="props.id"
       v-model="startValue"
+      :color="pickerColor"
       :min-date="props.minDate"
       :max-date="endValue || props.maxDate"
       :disabled="props.disabled"
@@ -52,6 +68,7 @@ const { t } = useI18n();
     </span>
     <DmsDatePicker
       v-model="endValue"
+      :color="pickerColor"
       :min-date="startValue || props.minDate"
       :max-date="props.maxDate"
       :disabled="props.disabled"

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

@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useId } from "vue";
+import DmsFieldError from "../../field-error/FieldError.vue";
+import { fieldErrorId } from "#dms-core/app/composables/useFieldErrors";
 import { FORM_FIELD_LOADING_KEY } from "../../../composables/form/types/field-loading";
 import { FORM_CONTENT_LANGUAGE_KEY } from "../../../composables/form/types/content-language";
 import type { PresignResponse } from "../../../composables/form/useUploadWithProgress";
@@ -47,9 +50,20 @@ const emit = defineEmits<{
 
 const { $authFetch } = useAuthFetch();
 const { t } = useI18n();
-const toast = useToast();
 
-const { emitFormChange } = useFormField();
+// The field state UFormField hands its control, passed on to the drop zone
+// (this component takes it, so UFileUpload would not see it).
+const { emitFormChange, color, highlight, ariaAttrs } = useFormField();
+// Files refused by the field's constraints, named under the drop zone: an
+// error of this field, not a toast.
+const rejections = ref<string[]>([]);
+const rejectionId = fieldErrorId(`file-${useId()}`);
+// A refused file speaks for itself; otherwise the field's own error does.
+const dropZoneAria = computed(() =>
+  rejections.value.length
+    ? { "aria-invalid": true, "aria-describedby": rejectionId }
+    : (ariaAttrs.value ?? {}),
+);
 
 const { uploadWithProgress } = useUploadWithProgress();
 
@@ -264,21 +278,19 @@ const processFile = async (file: File) => {
 };
 
 const notifyRejected = (file: File, violation: FileConstraintViolation) => {
-  toast.add({
-    title: t("dms.form.file.rejected_title"),
-    description:
-      violation === "size"
-        ? t("dms.form.file.rejected_size", {
-            name: file.name,
-            size: maxSizeFormatted.value ?? "",
-          })
-        : t("dms.form.file.rejected_type", { name: file.name }),
-    color: "error",
-  });
+  rejections.value.push(
+    violation === "size"
+      ? t("dms.form.file.rejected_size", {
+          name: file.name,
+          size: maxSizeFormatted.value ?? "",
+        })
+      : t("dms.form.file.rejected_type", { name: file.name }),
+  );
 };
 
 watch(selectedFiles, async (value) => {
   if (!value) return;
+  rejections.value = [];
 
   const files = Array.isArray(value) ? value : [value];
 
@@ -359,19 +371,21 @@ onScopeDispose(() => {
       :multiple="multiple"
       :accept="acceptString"
       :disabled="disabled || isUploading"
+      :color="color"
+      :highlight="highlight"
+      v-bind="dropZoneAria"
     >
       <template v-if="maxSizeFormatted" #description>
-        <span class="text-muted text-sm">
-          {{ $t("dms.form.file.max_size", { size: maxSizeFormatted }) }}
-        </span>
+        {{ $t("dms.form.file.max_size", { size: maxSizeFormatted }) }}
       </template>
     </UFileUpload>
+    <DmsFieldError :id="rejectionId" :message="rejections.join(' ')" />
 
     <div v-if="uploadingFiles.length" class="flex flex-col gap-1">
       <div
         v-for="item in uploadingFiles"
         :key="item.id"
-        class="bg-elevated flex flex-col gap-1.5 rounded-md p-2"
+        class="border-default bg-default flex flex-col gap-1.5 rounded-md border p-2 ps-2.5"
       >
         <div class="flex items-center gap-2">
           <UIcon
@@ -397,10 +411,10 @@ onScopeDispose(() => {
         </div>
         <span
           v-if="!item.error"
-          class="bg-accented h-1 w-full overflow-hidden rounded-full"
+          class="bg-accented h-[3px] w-full overflow-hidden rounded-full"
         >
           <span
-            class="bg-primary block h-full rounded-full transition-[width] duration-200"
+            class="block h-full rounded-full bg-(--dms-accent-fill) transition-[width] duration-200"
             :style="{ width: `${item.progress}%` }"
           />
         </span>
@@ -411,7 +425,7 @@ onScopeDispose(() => {
       <div
         v-for="key in uploadedKeys"
         :key="key"
-        class="bg-elevated flex items-center gap-2 rounded-md p-2"
+        class="border-default bg-default flex items-center gap-2.5 rounded-md border p-2 ps-2.5"
       >
         <template v-if="getMetadata(key)">
           <img
@@ -433,7 +447,7 @@ onScopeDispose(() => {
           <ULink
             :to="getMetadata(key)!.url"
             target="_blank"
-            class="decoration-dimmed/40 hover:decoration-muted flex-1 truncate text-sm underline"
+            class="decoration-dimmed/40 hover:decoration-muted text-muted hover:text-default flex-1 truncate text-sm font-normal underline"
             @click.prevent="openFile(key)"
           >
             {{ getMetadata(key)!.filename }}

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

@@ -1,7 +1,10 @@
 <script setup lang="ts">
+import DmsFieldError from "../../field-error/FieldError.vue";
+import { fieldErrorId } from "#dms-core/app/composables/useFieldErrors";
 import { FORM_FIELD_LOADING_KEY } from "../../../composables/form/types/field-loading";
 import { FORM_CONTENT_LANGUAGE_KEY } from "../../../composables/form/types/content-language";
 import type { PresignResponse } from "../../../composables/form/useUploadWithProgress";
+import { useKeyboardPlatform } from "../../../composables/global/keyboardPlatform";
 import {
   type FileFieldConstraints,
   matchMimetype,
@@ -66,9 +69,14 @@ const emit = defineEmits<{
 }>();
 
 const { $authFetch } = useAuthFetch();
-const { emitFormChange } = useFormField();
+// The field state UFormField hands its control: the drop zone shows the
+// field's error border and carries its aria attributes.
+const { emitFormChange, color: fieldColor, ariaAttrs } = useFormField();
+const hasFieldError = computed(() => fieldColor.value === "error");
 const { t } = useI18n();
-const toast = useToast();
+const { formatShortcut } = useKeyboardPlatform();
+/** The paste key the hints mention: "⌘V" on macOS, "Ctrl V" elsewhere. */
+const pasteShortcut = computed(() => formatShortcut(["meta", "v"]));
 const { uploadWithProgress } = useUploadWithProgress();
 const setFieldLoading = inject(FORM_FIELD_LOADING_KEY, null);
 const contentLanguage = inject(FORM_CONTENT_LANGUAGE_KEY, undefined);
@@ -91,6 +99,17 @@ const detailAltInputId = `${fieldId}-alt-detail`;
 const items = ref<GalleryItem[]>([]);
 const fileInput = ref<HTMLInputElement | null>(null);
 const isDraggingOver = ref(false);
+
+// One border state at a time: a plain element merges no classes, so two
+// border colours would be settled by stylesheet order, not by intent.
+const dropZoneClass = computed(() => {
+  if (isDraggingOver.value) {
+    return "border-primary text-primary border-solid bg-(--dms-accent-tint) shadow-[0_0_0_6px_var(--dms-accent-tint)]";
+  }
+  return invalid.value
+    ? "border-error hover:border-error"
+    : "border-(--dms-border-top) hover:border-primary";
+});
 const dragItemId = ref<string | null>(null);
 const dragOverItemId = ref<string | null>(null);
 const detailItemId = ref<string | null>(null);
@@ -353,23 +372,37 @@ const createItemFromFile = (file: File): GalleryItem => ({
   progress: 0,
 });
 
+// Pictures refused by the field's constraints (size, type, count), named
+// under the field: an error of this field, not a toast.
+const rejections = ref<string[]>([]);
+const rejectionId = fieldErrorId(`${fieldId}-rejection`);
+
+// The field red: its own error, or a picture it just refused.
+const invalid = computed(
+  () => hasFieldError.value || rejections.value.length > 0,
+);
+
+// Once the field gets an error of its own (a refused submit), it says what
+// is wrong: the refusal of an earlier pick no longer stacks under it.
+watch(hasFieldError, (isInvalid) => {
+  if (isInvalid) rejections.value = [];
+});
+
 const notifyRejected = (file: File, reason: "size" | "mimetype") => {
   const maxSize = props.constraints?.maxSize;
-  toast.add({
-    title: t("dms.form.image.rejected_title"),
-    description:
-      reason === "size"
-        ? t("dms.form.image.rejected_size", {
-            name: file.name,
-            size: maxSize ? formatFileSize(maxSize) : "",
-          })
-        : t("dms.form.image.rejected_type", { name: file.name }),
-    color: "error",
-  });
+  rejections.value.push(
+    reason === "size"
+      ? t("dms.form.image.rejected_size", {
+          name: file.name,
+          size: maxSize ? formatFileSize(maxSize) : "",
+        })
+      : t("dms.form.image.rejected_type", { name: file.name }),
+  );
 };
 
 const addFiles = (files: FileList | File[] | null) => {
   if (props.disabled || !files?.length) return;
+  rejections.value = [];
 
   const accepted: File[] = [];
   for (const file of Array.from(files)) {
@@ -394,11 +427,7 @@ const addFiles = (files: FileList | File[] | null) => {
   const admitted = accepted.slice(0, room);
   const dropped = accepted.length - admitted.length;
   if (dropped > 0) {
-    toast.add({
-      title: t("dms.form.image.rejected_title"),
-      description: t("dms.form.image.rejected_max", { count: dropped }),
-      color: "error",
-    });
+    rejections.value.push(t("dms.form.image.rejected_max", { count: dropped }));
   }
 
   const newItems = admitted.map(createItemFromFile);
@@ -579,20 +608,32 @@ onBeforeUnmount(() => {
       :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">
+      <!-- A phone-narrow field still gets two tiles a row instead of one
+        full-width square. A class, not a multi-line style attribute: the
+        server and the browser serialise such an attribute differently, which
+        Vue reports as a hydration mismatch. -->
+      <!-- The gallery carries the field's state: a full one has no "Add"
+        tile left to show it. -->
       <div
-        class="grid gap-3"
-        style="grid-template-columns: repeat(auto-fill, minmax(8.25rem, 1fr))"
+        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-warning ring-2': item.principal && item.status === 'done',
+            '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,
           }"
@@ -622,7 +663,7 @@ onBeforeUnmount(() => {
 
           <span
             v-if="item.principal && item.status === 'done'"
-            class="bg-warning absolute top-1.5 left-1.5 z-[3] inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold text-white shadow-sm"
+            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") }}
@@ -641,7 +682,7 @@ onBeforeUnmount(() => {
                 size="xs"
                 color="neutral"
                 variant="solid"
-                class="hover:text-warning bg-white/90 text-neutral-600 shadow-sm backdrop-blur-sm hover:bg-white"
+                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>
@@ -717,11 +758,9 @@ onBeforeUnmount(() => {
         <button
           v-if="!isFull && !disabled"
           type="button"
-          class="border-default text-dimmed hover:border-primary hover:bg-primary/5 hover:text-primary flex aspect-square cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed transition-colors"
-          :class="{
-            'border-primary bg-primary/5 text-primary border-solid':
-              isDraggingOver,
-          }"
+          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"
@@ -739,7 +778,8 @@ onBeforeUnmount(() => {
 
       <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") }} · {{ formatsHint }}
+        {{ t("dms.form.image.gallery_hint", { shortcut: pasteShortcut }) }} ·
+        {{ formatsHint }}
       </p>
     </div>
 
@@ -747,11 +787,9 @@ onBeforeUnmount(() => {
       <button
         v-if="!singleItem"
         type="button"
-        class="border-default text-dimmed hover:border-primary hover:bg-primary/5 hover:text-primary flex min-h-36 w-full cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-[1.5px] border-dashed transition-colors"
-        :class="{
-          'border-primary bg-primary/5 text-primary border-solid':
-            isDraggingOver,
-        }"
+        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"
@@ -760,7 +798,7 @@ onBeforeUnmount(() => {
       >
         <UIcon name="i-lucide-upload" class="size-6" />
         <span class="text-[13px] font-medium">
-          {{ t("dms.form.image.single_prompt") }}
+          {{ t("dms.form.image.single_prompt", { shortcut: pasteShortcut }) }}
         </span>
         <span class="text-[11px]">
           {{ t("dms.form.image.single_hint") }} · {{ formatsHint }}
@@ -770,7 +808,12 @@ onBeforeUnmount(() => {
       <div v-else class="flex flex-col gap-4 sm:flex-row sm:items-stretch">
         <div
           class="group relative aspect-[4/3] w-full flex-none overflow-hidden rounded-xl shadow-sm sm:w-58"
-          :class="{ 'ring-primary ring-2': isDraggingOver }"
+          :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"
@@ -927,7 +970,7 @@ onBeforeUnmount(() => {
             />
             <span
               v-if="detailItem.principal"
-              class="bg-warning absolute top-2 left-2 inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-[11px] font-semibold text-white shadow-sm"
+              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") }}
@@ -957,7 +1000,7 @@ onBeforeUnmount(() => {
                     ? t('dms.form.image.principal_current')
                     : t('dms.form.image.set_principal')
                 "
-                color="warning"
+                color="primary"
                 variant="subtle"
                 size="sm"
                 :disabled="detailItem.principal"
@@ -975,5 +1018,10 @@ onBeforeUnmount(() => {
         </div>
       </template>
     </UModal>
+    <DmsFieldError
+      :id="rejectionId"
+      class="mt-2"
+      :message="rejections.join(' ')"
+    />
   </div>
 </template>