@antelopejs/dms 0.7.4 → 0.7.6

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

@@ -314,10 +314,19 @@ const toolbarButtons = computed(() => [
              padding, so the swap to the editor moves nothing below it. -->
         <template #fallback>
           <div class="min-h-[140px] px-3 py-2.5" aria-busy="true">
-            <USkeleton class="mb-4 h-8 w-3/4" />
-            <USkeleton class="mb-3 h-4 w-full" />
-            <USkeleton class="mb-3 h-4 w-5/6" />
-            <USkeleton class="h-4 w-4/5" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mb-4 h-8 w-3/4"
+            />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mb-3 h-4 w-full"
+            />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="mb-3 h-4 w-5/6"
+            />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-4 w-4/5" />
           </div>
         </template>
       </DmsClientOnly>

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

@@ -4,15 +4,40 @@ import type {
   TextareaEmits,
   TextareaSlots,
 } from "@nuxt/ui/components/Textarea.vue";
+import { computed } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
+import { characterCountText } from "../../../build/utils/characterCount";
 
-const props = defineProps<TextareaProps>();
+interface TextareaFieldProps extends TextareaProps {
+  /** Longest value accepted; the counter reads against it. */
+  maxLength?: number;
+  /** Shows the characters typed under the field ("4 / 60"). */
+  showCount?: boolean;
+}
+
+const props = defineProps<TextareaFieldProps>();
 const emits = defineEmits<TextareaEmits>();
 defineSlots<TextareaSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const textareaProps = computed(() => {
+  const { showCount: _showCount, ...rest } = forwarded.value;
+  return rest;
+});
+const countText = computed(() =>
+  characterCountText(props.modelValue, props.maxLength),
+);
 </script>
 
 <template>
-  <UTextarea v-bind="forwarded" />
+  <div v-if="props.showCount" class="grid gap-1">
+    <UTextarea v-bind="textareaProps" class="w-full" />
+    <span
+      class="text-dimmed justify-self-end text-xs tabular-nums"
+      data-character-count
+    >
+      {{ countText }}
+    </span>
+  </div>
+  <UTextarea v-else v-bind="textareaProps" />
 </template>

package/frontend-vue/layers/dms-ui/app/components/key-value-list/KeyValueList.vue

@@ -82,7 +82,7 @@ const COLUMN_CLASSES: Record<number, string> = {
   3: "gap-x-8 sm:grid-cols-2 lg:grid-cols-3 [&>div:first-child]:border-t-0 sm:[&>div:nth-child(2)]:border-t-0 lg:[&>div:nth-child(3)]:border-t-0",
 };
 
-const { locale } = useI18n();
+const { locale, t } = useI18n();
 
 const columnClass = computed(
   () =>
@@ -185,10 +185,10 @@ function keyOf(item: KeyValueItem, index: number): string {
     <template v-if="showPlaceholders">
       <div v-for="index in props.skeletonCount" :key="index" :class="rowClass">
         <dt class="min-w-[120px] flex-none">
-          <USkeleton class="h-3 w-20" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-20" />
         </dt>
         <dd class="ms-auto">
-          <USkeleton class="h-3 w-24" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-24" />
         </dd>
       </div>
     </template>
@@ -202,7 +202,11 @@ function keyOf(item: KeyValueItem, index: number): string {
         <dd
           class="ms-auto flex min-w-0 flex-wrap items-center justify-end gap-x-1.5 gap-y-0.5 text-end"
         >
-          <USkeleton v-if="props.loading || item.loading" class="h-3 w-24" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-if="props.loading || item.loading"
+            class="h-3 w-24"
+          />
           <slot
             v-else-if="slots.value"
             name="value"

package/frontend-vue/layers/dms-ui/app/components/kpi/KpiCard.vue

@@ -196,7 +196,11 @@ const isStat = computed(() => props.variant === "stat");
       />
     </div>
     <!-- The value's placeholder takes its 33px line. -->
-    <USkeleton v-if="isFirstLoad" class="mt-1 h-[33px] w-32" />
+    <USkeleton
+      :aria-label="t('dms.a11y.loading')"
+      v-if="isFirstLoad"
+      class="mt-1 h-[33px] w-32"
+    />
     <div
       v-else-if="hasError"
       class="mt-auto flex items-center justify-between gap-2"
@@ -242,13 +246,17 @@ const isStat = computed(() => props.variant === "stat");
     >
       <div class="grid">
         <div v-if="showDelta" class="flex h-6 items-center">
-          <USkeleton class="h-3 w-[58px]" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-[58px]" />
         </div>
         <div v-if="footnote" class="flex h-4 items-center">
-          <USkeleton class="h-2.5 w-28" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-2.5 w-28" />
         </div>
       </div>
-      <USkeleton v-if="showSparkline" class="ml-auto h-[34px] w-24" />
+      <USkeleton
+        :aria-label="t('dms.a11y.loading')"
+        v-if="showSparkline"
+        class="ml-auto h-[34px] w-24"
+      />
     </div>
     <!-- The trend's line holds its place, as in the skeleton, while there is
          no change to show (no comparison period): no "0%" stand-in, and

package/frontend-vue/layers/dms-ui/app/components/meter/MeterBlock.vue

@@ -143,12 +143,23 @@ const Wrapper = props.card ? resolveComponent("DmsCard") : "div";
         <span v-if="props.label" class="text-toned">
           {{ translate(props.label) }}
         </span>
-        <USkeleton v-else class="h-3 w-1/3" />
-        <USkeleton class="ms-auto h-3 w-12" />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          v-else
+          class="h-3 w-1/3"
+        />
+        <USkeleton
+          :aria-label="t('dms.a11y.loading')"
+          class="ms-auto h-3 w-12"
+        />
       </span>
-      <USkeleton class="w-full rounded-full" :class="skeletonTrackClass" />
+      <USkeleton
+        :aria-label="t('dms.a11y.loading')"
+        class="w-full rounded-full"
+        :class="skeletonTrackClass"
+      />
       <span v-if="skeletonHasLegend" class="flex h-4 items-center">
-        <USkeleton class="h-2.5 w-40" />
+        <USkeleton :aria-label="t('dms.a11y.loading')" class="h-2.5 w-40" />
       </span>
     </div>
     <div v-else-if="hasError" class="grid min-w-0 gap-1.5" role="alert">

package/frontend-vue/layers/dms-ui/app/components/save-bar/SaveBar.vue

@@ -9,9 +9,10 @@ import { trackFloatingSaveBar } from "../../build/composables/form/floatingSaveB
 import DmsUnsavedStatus from "../../build/components/form/UnsavedStatus.vue";
 
 /**
- * `floating`: the v2 save bar, a card that sticks to the bottom of the panel
- * while the form runs past it. `band`: the footer band of a form card, a
- * drawer or a modal (its surface classes come from the form).
+ * `floating`: the v2 save bar, a card floating over the bottom of the panel
+ * while the form runs past it, taking no space while hidden. `band`: the
+ * footer band of a form card, a drawer or a modal (its surface classes come
+ * from the form).
  */
 export type SaveBarVariant = "floating" | "band";
 
@@ -66,26 +67,50 @@ const SECONDARY_LABELS: Record<FormKind, string> = {
   action: "dms.button.reset",
 };
 
-// Its states have the same height, and hidden it keeps its place (one line,
-// whatever the changes): switching never moves the content around it.
+// Its states have the same height, so switching between them never moves the
+// content around it. The floating bar overlays the form: its root is a sticky
+// anchor at the form's end that takes no space while the bar hides, and the
+// bar's height plus its gaps while it shows, so the last field scrolls clear
+// of it and nothing above it moves. The band, a footer, keeps its place.
 const theme = tv({
   slots: {
-    root: "flex items-center transition-[opacity,translate,visibility] duration-200 ease-out",
+    root: "",
+    bar: "flex items-center",
     actions: "ms-auto flex shrink-0 items-center gap-2",
   },
   variants: {
     variant: {
       floating: {
-        root: "border-accented sticky bottom-4 z-5 mt-5 gap-3 rounded-[10px] border bg-(--ui-bg) py-2.5 ps-4 pe-3 text-[13px] shadow-lg",
+        root: "pointer-events-none sticky bottom-1 z-5 h-0 [--dms-save-bar-h:50px]",
+        bar: "border-accented pointer-events-auto absolute inset-x-0 bottom-3 h-(--dms-save-bar-h) gap-3 rounded-[10px] border bg-(--ui-bg) ps-4 pe-3 text-[13px] shadow-lg transition-[opacity,translate,visibility] duration-200 ease-out",
       },
       band: {
-        root: "gap-2",
+        root: "transition-[opacity,translate,visibility] duration-200 ease-out",
+        bar: "gap-2",
       },
     },
     hidden: {
-      true: { root: "invisible translate-y-2 opacity-0" },
+      true: "",
+      false: "",
     },
   },
+  compoundVariants: [
+    {
+      variant: "floating",
+      hidden: false,
+      class: { root: "h-[calc(var(--dms-save-bar-h)+2rem)]" },
+    },
+    {
+      variant: "floating",
+      hidden: true,
+      class: { bar: "invisible translate-y-2 opacity-0" },
+    },
+    {
+      variant: "band",
+      hidden: true,
+      class: { root: "invisible translate-y-2 opacity-0" },
+    },
+  ],
 });
 
 const BUTTONS = {
@@ -112,7 +137,7 @@ trackFloatingSaveBar(
   () => props.variant === "floating" && !state.value.isHidden,
 );
 
-// Empty while there is nothing to save: the hidden bar keeps its line.
+// Empty while there is nothing to save: the hidden bar keeps its one line.
 const statusText = computed(() => {
   if (!props.dirty) return "";
   const changed = props.changes.map((label) => processI18n(label)).join(", ");
@@ -133,39 +158,41 @@ const saveText = computed(() => {
     :inert="state.isHidden || undefined"
     :aria-hidden="state.isHidden || undefined"
   >
-    <DmsUnsavedStatus
-      v-if="state.showsStatus"
-      :text="statusText"
-      :is-band="props.variant === 'band'"
-    />
-    <div :class="ui.actions()">
-      <UButton
-        v-if="state.secondary === 'discard'"
-        :label="t(SECONDARY_LABELS[props.kind])"
-        color="neutral"
-        :variant="buttons.discardVariant"
-        :size="buttons.size"
-        :disabled="props.saving"
-        @click="emit('discard')"
-      />
-      <UButton
-        v-else-if="state.secondary === 'cancel'"
-        :label="t('dms.button.cancel')"
-        color="neutral"
-        variant="outline"
-        :size="buttons.size"
-        @click="emit('cancel')"
-      />
-      <UButton
-        v-if="state.showsSubmit"
-        :label="saveText"
-        :size="buttons.size"
-        :loading="props.saving"
-        :disabled="state.isSubmitHeld"
-        :type="props.form ? 'submit' : 'button'"
-        :form="props.form"
-        @click="props.form ? undefined : emit('save')"
+    <div :class="ui.bar()">
+      <DmsUnsavedStatus
+        v-if="state.showsStatus"
+        :text="statusText"
+        :is-band="props.variant === 'band'"
       />
+      <div :class="ui.actions()">
+        <UButton
+          v-if="state.secondary === 'discard'"
+          :label="t(SECONDARY_LABELS[props.kind])"
+          color="neutral"
+          :variant="buttons.discardVariant"
+          :size="buttons.size"
+          :disabled="props.saving"
+          @click="emit('discard')"
+        />
+        <UButton
+          v-else-if="state.secondary === 'cancel'"
+          :label="t('dms.button.cancel')"
+          color="neutral"
+          variant="outline"
+          :size="buttons.size"
+          @click="emit('cancel')"
+        />
+        <UButton
+          v-if="state.showsSubmit"
+          :label="saveText"
+          :size="buttons.size"
+          :loading="props.saving"
+          :disabled="state.isSubmitHeld"
+          :type="props.form ? 'submit' : 'button'"
+          :form="props.form"
+          @click="props.form ? undefined : emit('save')"
+        />
+      </div>
     </div>
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/components/tab/Tab.vue

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<TabProps>(), {
   stateKey: "tab",
   badgesUrl: undefined,
   realtimeTopic: undefined,
+  fit: false,
 });
 
 // The badges a module counts for a record's tabs, in one request, again when
@@ -72,10 +73,23 @@ const ROOT_CLASSES: Record<AxeOrientation, string> = {
   [AxeOrientation.vertical]: "max-sm:flex-col max-sm:items-stretch",
 };
 
+// A fitted pill list hugs its tabs: the triggers stop growing to share the
+// full width. Link tabs never grow, and a vertical list has its own width.
+const FIT_CLASSES: Record<TabVariant, { list: string; trigger: string }> = {
+  [TabVariant.pill]: { list: "w-fit max-w-full", trigger: "grow-0" },
+  [TabVariant.link]: { list: "", trigger: "" },
+};
+
 const panelClass = computed(() => PANEL_CLASSES[props.orientation]);
+const fitClasses = computed(() =>
+  props.fit && props.orientation === AxeOrientation.horizontal
+    ? FIT_CLASSES[props.variant]
+    : undefined,
+);
 const tabsUi = computed(() => ({
   root: ROOT_CLASSES[props.orientation],
-  list: LIST_CLASSES[props.orientation],
+  list: [LIST_CLASSES[props.orientation], fitClasses.value?.list],
+  trigger: fitClasses.value?.trigger,
   // The panel may shrink below its content's width (a wide table scrolls
   // inside it instead of pushing the page sideways).
   content: "min-w-0",

package/frontend-vue/layers/dms-ui/app/components/table-view/KanbanBoard.vue

@@ -451,6 +451,7 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
             {{ col.label }}
           </span>
           <USkeleton
+            :aria-label="t('dms.a11y.loading')"
             v-if="isBoardLoading && !cells[col.value]"
             aria-hidden="true"
             class="ms-auto h-[16.5px] w-5 shrink-0 rounded-[5px]"
@@ -478,17 +479,26 @@ const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
               class="border-default grid gap-2 rounded-lg border bg-(--dms-surface-card) px-3 pt-2.5 pb-[11px] shadow-xs"
             >
               <div class="-mb-0.5 flex min-h-5 items-center">
-                <USkeleton class="h-2.5 w-10" />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-2.5 w-10"
+                />
               </div>
               <div class="flex h-[17px] items-center">
-                <USkeleton class="h-3 w-3/4" />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-3 w-3/4"
+                />
               </div>
               <div
                 v-for="fieldColumn in cardColumns"
                 :key="fieldColumn.id"
                 class="-mt-0.5 flex h-[18px] items-center"
               >
-                <USkeleton class="h-2.5 w-1/2" />
+                <USkeleton
+                  :aria-label="t('dms.a11y.loading')"
+                  class="h-2.5 w-1/2"
+                />
               </div>
             </div>
           </div>

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -37,6 +37,7 @@ import type {
 } from "../../composables/table-view/types";
 import {
   TABLE_DISPLAY_ID,
+  CARDS_DISPLAY_ID,
   KANBAN_DISPLAY_ID,
   GROUPED_DISPLAY_ID,
   TableViewEvents,
@@ -1019,7 +1020,9 @@ const accumulation = computed<TableAccumulation | undefined>(() =>
     : undefined,
 );
 
-// Rows ordered by hand: moving is off while anything narrows the rows.
+// Rows ordered by hand: moving is off while anything narrows the rows, and
+// only the displays drawing the rows in their order move them.
+const ORDERED_DISPLAY_IDS = new Set([TABLE_DISPLAY_ID, CARDS_DISPLAY_ID]);
 const { reorderState } = useTableReorder<T>({
   reorder: reorderConfig,
   data,
@@ -1033,7 +1036,9 @@ const { reorderState } = useTableReorder<T>({
       !!effectiveGlobalFilter.value ||
       activeTabFilters.value.length > 0,
   ),
-  isGrid: computed(() => activeDisplayId.value === TABLE_DISPLAY_ID),
+  isOrderedDisplay: computed(() =>
+    ORDERED_DISPLAY_IDS.has(activeDisplayId.value),
+  ),
   refresh: () => refresh(),
   onError: (failure) =>
     toast.add({
@@ -1742,6 +1747,7 @@ const displayContext = computed(
     pageId,
     options: optionsForDisplay(activeDisplayId.value),
     refresh: refreshAll,
+    reorder: reorderState.value,
     table: displayTable.value,
   }),
 );

package/frontend-vue/layers/dms-ui/app/components/top-list/TopListCard.vue

@@ -3,6 +3,9 @@ import { computed, nextTick, onMounted, ref, watch } from "vue";
 import { useMounted } from "@vueuse/core";
 import DmsEmptyState from "../empty-state/EmptyState.vue";
 import DmsSectionHeader from "../section-header/SectionHeader.vue";
+import DmsBlockActions, {
+  type BlockAction,
+} from "../../build/components/blocks/BlockActions.vue";
 // Imported rather than resolved from the registry: a registered component is
 // a lazy chunk of its own, and a list whose rows only arrive with its data
 // would draw an empty card for the moment that chunk takes.
@@ -42,6 +45,8 @@ interface Props extends DefaultComponentProps {
   maxHeight?: string;
   staticItems?: TopListItem[];
   emptyLabel?: string;
+  /** Link buttons in the card head, after the period badge. */
+  actions?: BlockAction[];
   /**
    * Placeholder rows while `fetchUrl` loads: the "top N" it answers.
    * Optional. Defaults to 10, enough to fill the default `maxHeight`.
@@ -90,6 +95,7 @@ const props = withDefaults(defineProps<Props>(), {
   currencyCode: "EUR",
   maxHeight: DEFAULT_MAX_HEIGHT,
   skeletonCount: SKELETON_ROW_COUNT,
+  actions: () => [],
 });
 
 const { locale, t } = useI18n();
@@ -247,11 +253,33 @@ const gridStyle = computed(() => ({
       :title="processI18n(title)"
       :description="description ? processI18n(description) : undefined"
     >
-      <template v-if="periodScope" #trailing>
-        <UBadge v-if="badgeLabel" :color="badgeColor" variant="soft" size="sm">
-          {{ badgeLabel }}
-        </UBadge>
-        <USkeleton v-else class="h-5 w-16 rounded-[5px]" aria-hidden="true" />
+      <template v-if="periodScope || props.actions.length" #trailing>
+        <template v-if="periodScope">
+          <UBadge
+            v-if="badgeLabel"
+            :color="badgeColor"
+            variant="soft"
+            size="sm"
+          >
+            {{ badgeLabel }}
+          </UBadge>
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-else
+            class="h-5 w-16 rounded-[5px]"
+            aria-hidden="true"
+          />
+        </template>
+        <!-- Quiet links, as in an ActivityFeed head: the rows stay the
+          card's content. -->
+        <DmsBlockActions
+          v-if="props.actions.length"
+          :actions="props.actions"
+          size="xs"
+          lead-variant="ghost"
+          lead-color="neutral"
+          rest-variant="ghost"
+        />
       </template>
     </DmsSectionHeader>
 
@@ -308,15 +336,23 @@ const gridStyle = computed(() => ({
           class="flex h-14 items-center gap-3 px-[18px]"
         >
           <USkeleton
+            :aria-label="t('dms.a11y.loading')"
             v-if="showRank"
             class="size-[26px] shrink-0 rounded-[7px]"
           />
           <div class="grid flex-1 gap-1.5">
-            <USkeleton class="h-3 w-2/5" />
-            <USkeleton class="h-2.5 w-1/4" />
+            <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-2/5" />
+            <USkeleton
+              :aria-label="t('dms.a11y.loading')"
+              class="h-2.5 w-1/4"
+            />
           </div>
-          <USkeleton class="h-3 w-14" />
-          <USkeleton v-if="showDelta" class="h-3 w-[46px]" />
+          <USkeleton :aria-label="t('dms.a11y.loading')" class="h-3 w-14" />
+          <USkeleton
+            :aria-label="t('dms.a11y.loading')"
+            v-if="showDelta"
+            class="h-3 w-[46px]"
+          />
         </div>
       </div>
     </div>

package/frontend-vue/layers/dms-ui/app/composables/form/types/field.ts

@@ -54,6 +54,8 @@ export interface FormSection {
   label: string;
   description?: string;
   icon?: string;
+  /** Heading of the side navigation the section's entry sits under. */
+  navGroup?: string;
   fieldIds: string[];
 }
 

package/frontend-vue/layers/dms-ui/app/composables/tab/types/props.ts

@@ -31,6 +31,11 @@ export interface TabProps extends TabComponentProps {
   badgesUrl?: string;
   /** Topics whose events make the tab set read `badgesUrl` again. */
   realtimeTopic?: string | string[];
+  /**
+   * A horizontal `pill` list as wide as its tabs, not the full width; a
+   * `link` list already sizes its tabs to their labels.
+   */
+  fit?: boolean;
 }
 
 /** The badges `badgesUrl` answers with, by tab slot. */

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/display.ts

@@ -95,6 +95,47 @@ export interface TableViewDisplayActions<T> {
   custom: (action: CustomRowAction) => void;
 }
 
+/**
+ * Rows ordered by hand (backend `reorder`), as a display moves them. Set on
+ * the displays that draw the rows in their order (the grid and `cards`), for
+ * a caller who may edit them.
+ */
+export interface TableViewDisplayReorder {
+  /** Off while a search, a filter or a tab narrows the rows. */
+  enabled: boolean;
+  /** Moves the row at `from` to `to`, both indexes into `items`. */
+  move: (from: number, to: number) => void;
+}
+
+/**
+ * The attributes and listeners of a move handle: `v-bind` them on a
+ * `<button>`. Dragged, it moves its row onto the card it is dropped on; with
+ * it focused, the arrow keys move the row one place back (up, left) or
+ * forward (down, right).
+ */
+export interface TableViewReorderHandle {
+  type: "button";
+  draggable: boolean;
+  disabled: boolean;
+  "aria-label": string;
+  /** Says how to move the row, or, while moving is off, how to turn it on. */
+  title: string;
+  onClick: (event: MouseEvent) => void;
+  onDragstart: (event: DragEvent) => void;
+  onDragend: () => void;
+  onKeydown: (event: KeyboardEvent) => void;
+}
+
+/** A card's move handle, on a hand-ordered `cards` display. */
+export interface TableViewCardReorder {
+  /** Off while a search, a filter or a tab narrows the rows. */
+  enabled: boolean;
+  /** The card is the one being dragged. */
+  dragging: boolean;
+  /** Bind on the element the card is moved by. */
+  handle: TableViewReorderHandle;
+}
+
 /**
  * The card the `kanban` and `cards` displays draw (backend `card` option):
  * the columns it shows, or a component drawing it whole.
@@ -127,6 +168,11 @@ export interface TableViewCardProps<T = Record<string, unknown>> {
   open: () => void;
   /** Kanban only: the value of the column the card sits in. */
   groupValue?: string;
+  /**
+   * `cards` only, on a hand-ordered table (backend `reorder`) and for a
+   * caller who may edit: the card's move handle, to draw somewhere on it.
+   */
+  reorder?: TableViewCardReorder;
 }
 
 /**
@@ -182,6 +228,11 @@ export interface TableViewDisplayContext<T = Record<string, unknown>> {
   options?: Record<string, unknown>;
   /** Re-fetch the table view (shared list + tab counts + active display). */
   refresh: () => Promise<void> | void;
+  /**
+   * Rows ordered by hand (backend `reorder`): set on the grid and the
+   * `cards` display, for a caller who may edit the rows.
+   */
+  reorder?: TableViewDisplayReorder;
 
   /**
    * Escape hatch: the TanStack table instance, present when the display is

package/frontend-vue/tests/confirm-dialog-fields.test.ts

@@ -231,6 +231,18 @@ describe("ConfirmModal fields", () => {
     expect(closed).toHaveBeenCalledWith(true);
   });
 
+  it("says what the required mark means under the fields", async () => {
+    mount({ title: "Delete?", fields: [reassign] });
+    await flush();
+    expect(host.textContent).toContain("dms.form.required_legend");
+  });
+
+  it("draws no legend when no field is required", async () => {
+    mount({ title: "Delete?", fields: [{ ...reassign, required: false }] });
+    await flush();
+    expect(host.textContent).not.toContain("dms.form.required_legend");
+  });
+
   it("flags a required field left empty instead of confirming", async () => {
     const onConfirm = vi.fn();
     mount({ title: "Delete?", fields: [reassign], onConfirm });

package/frontend-vue/tests/drawer-target-direction.test.ts

@@ -184,6 +184,7 @@ describe("the drawer container", () => {
       clearGuards: vi.fn(),
     }));
     vi.stubGlobal("useDmsRoute", () => reactive({ path: "/" }));
+    vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
   });
 
   it("slides in from the bottom, full width, by default", async () => {