@antelopejs/dms 0.6.1 → 0.7.0

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

@@ -8,6 +8,10 @@ interface DisplayProps {
 }
 
 const props = defineProps<DisplayProps>();
+// The field's options, spread on the display as on its input: the
+// formatter reads them as a table cell does (a status' labels and tones,
+// a select's items).
+const options = useAttrs();
 
 const { getDataType } = useDataTypes();
 const { locale, t } = useI18n();
@@ -29,7 +33,7 @@ const formattedValue = computed(() => {
   if (isEmptyValue(props.modelValue)) return EMPTY_FALLBACK;
   const formatter = dataType.value?.formatter?.default;
   if (!formatter) return String(props.modelValue);
-  return formatter(props.modelValue, locale.value, props);
+  return formatter(props.modelValue, locale.value, options);
 });
 
 const isVNodeValue = computed(() => isVNode(formattedValue.value));

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

@@ -5,6 +5,7 @@ import {
   type FormKind,
   saveBarState,
 } from "../../build/composables/form/formFooter";
+import { trackFloatingSaveBar } from "../../build/composables/form/floatingSaveBars";
 import DmsUnsavedStatus from "../../build/components/form/UnsavedStatus.vue";
 
 /**
@@ -107,6 +108,9 @@ const ui = computed(() =>
   theme({ variant: props.variant, hidden: state.value.isHidden }),
 );
 const buttons = computed(() => BUTTONS[props.variant]);
+trackFloatingSaveBar(
+  () => props.variant === "floating" && !state.value.isHidden,
+);
 
 // Empty while there is nothing to save: the hidden bar keeps its line.
 const statusText = computed(() => {

package/frontend-vue/layers/dms-ui/app/components/status-pill/StatusPill.vue

@@ -70,8 +70,13 @@ const theme = tv({
   },
   variants: {
     variant: {
-      soft: { root: "rounded-full" },
-      outline: { root: "rounded-full border bg-transparent" },
+      // A pill wider than its cell keeps its shape: the label gives way
+      // with an ellipsis instead of the pill being cut at the cell's edge.
+      soft: { root: "max-w-full rounded-full", label: "min-w-0 truncate" },
+      outline: {
+        root: "max-w-full rounded-full border bg-transparent",
+        label: "min-w-0 truncate",
+      },
       // A state line may run long: it wraps like text instead of a pill.
       text: { root: "whitespace-normal" },
     },

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

@@ -33,6 +33,7 @@ import type {
   TableViewPaginationMode,
   TableViewSourceConfig,
   TableViewReorderConfig,
+  TableViewTab,
 } from "../../composables/table-view/types";
 import {
   TABLE_DISPLAY_ID,
@@ -563,7 +564,7 @@ interface ResolvedTab {
   to?: string;
   toPage?: string;
   countFrom?: string;
-  navBadge?: boolean;
+  navBadge?: TableViewTab["navBadge"];
 }
 
 // A configured "all" tab stands in for the implicit one, at its own place.
@@ -1175,7 +1176,11 @@ watch(
       const source = resolvedTabs.value.find((entry) => entry.id === tab.id);
       if (!source?.navBadge || tab.count === undefined) continue;
       const fullId = source.to ? source.toPage : pageId;
-      if (fullId) setNavBadge(fullId, tab.count > 0 ? String(tab.count) : "");
+      const tone =
+        typeof source.navBadge === "object" ? source.navBadge.tone : undefined;
+      if (fullId) {
+        setNavBadge(fullId, tab.count > 0 ? String(tab.count) : "", tone);
+      }
     }
   },
   { immediate: true },

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

@@ -1,6 +1,6 @@
 import type { FormSubmitEvent } from "@nuxt/ui";
 import { z } from "zod";
-import { unref } from "vue";
+import { onMounted, unref } from "vue";
 import type { FormProps, FormFetchResponse, FormSubmitResponse } from "./types";
 import { jsonSchemaToZod } from "json-schema-to-zod";
 import { FormEvents } from "./types/events";
@@ -62,8 +62,8 @@ export interface UseFormOptions {
   showFieldErrors?: (errors: FormServerFieldError[]) => boolean;
   /**
    * Called once a submit succeeded and the values are the saved ones (or
-   * back to the opening ones for an `action` form), before any redirect:
-   * the form has nothing unsaved from there on.
+   * back to the opening ones for an `action` form), before the success event
+   * goes out and any redirect: the form has nothing unsaved from there on.
    */
   onSaved?: () => void;
 }
@@ -458,32 +458,35 @@ function watchFieldChanges(
   ) => void,
 ): void {
   if (!componentId) return;
+  const id = componentId;
   const previousValuesJson: Record<string, string> = {};
 
-  watch(
-    () => state.value,
-    (newState) => {
-      for (const fieldId of Object.keys(newState)) {
-        if (INTERNAL_STATE_KEYS.has(fieldId)) continue;
-
-        let newJson: string;
-        try {
-          newJson = JSON.stringify(newState[fieldId]);
-        } catch {
-          newJson = String(newState[fieldId]);
-        }
-        if (newJson !== previousValuesJson[fieldId]) {
-          sendComponentEvent(FormEvents.FIELD_CHANGE, componentId, {
-            fieldId,
-            value: newState[fieldId],
-            formValues: newState,
-          });
-          previousValuesJson[fieldId] = newJson;
-        }
+  // From mount, once `useWatch` listens: the values the form starts from
+  // (defaults, loaded row) reach the watch rules too, not only later edits.
+  onMounted(() => {
+    watch(() => state.value, sendChanges, { deep: true, immediate: true });
+  });
+
+  function sendChanges(newState: Record<string, unknown>): void {
+    for (const fieldId of Object.keys(newState)) {
+      if (INTERNAL_STATE_KEYS.has(fieldId)) continue;
+
+      let newJson: string;
+      try {
+        newJson = JSON.stringify(newState[fieldId]);
+      } catch {
+        newJson = String(newState[fieldId]);
       }
-    },
-    { deep: true },
-  );
+      if (newJson !== previousValuesJson[fieldId]) {
+        sendComponentEvent(FormEvents.FIELD_CHANGE, id, {
+          fieldId,
+          value: newState[fieldId],
+          formValues: newState,
+        });
+        previousValuesJson[fieldId] = newJson;
+      }
+    }
+  }
 }
 
 /**
@@ -748,6 +751,16 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     );
   };
 
+  /** A submit the server accepted: nothing is left unsaved. */
+  const markSubmitSaved = (): void => {
+    submitSucceeded.value = true;
+    // A form sending something new each time starts over from the values it
+    // opened with; any other keeps what it saved as its new starting point.
+    if (props.kind === "action") restoreInitialValues();
+    else initialValues.value = snapshotFormState(state.value);
+    options.onSaved?.();
+  };
+
   const handleSubmitSuccess = async (
     response: FormSubmitResponse | undefined,
     plainData: FormData,
@@ -755,11 +768,6 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     showSubmitSuccessToast(response);
     showSubmitNotice(response);
     props.onSuccessCallback?.(response, plainData);
-    // A form sending something new each time starts over from the values it
-    // opened with; any other keeps what it saved as its new starting point.
-    if (props.kind === "action") restoreInitialValues();
-    else initialValues.value = snapshotFormState(state.value);
-    options.onSaved?.();
     if (props.redirectOnSuccess) {
       const target = replaceUrlVariables(
         props.redirectOnSuccess,
@@ -777,10 +785,16 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
     });
   };
 
-  /** Sends a body to the submit URL, through the form's submit events. */
+  /**
+   * Sends a body to the submit URL, through the form's submit events.
+   * `onAccepted` runs once the server took it, before the success event goes
+   * out: what watches that event (a form page's way back to its list) finds
+   * the form with nothing unsaved, and leaves it without asking.
+   */
   const sendSubmit = async (
     submitUrl: string,
     body: FormData,
+    onAccepted?: () => void,
   ): Promise<FormSubmitResponse | undefined> => {
     let submitResponse: FormSubmitResponse | undefined;
     await executeSubmit(
@@ -791,6 +805,7 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
           headers: { [CONTENT_LANGUAGE_HEADER]: "*" },
         }).then((res) => {
           submitResponse = res;
+          onAccepted?.();
           return res;
         }),
       {
@@ -831,8 +846,7 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
 
     loading.value = true;
     try {
-      const response = await sendSubmit(target.url, plainData);
-      submitSucceeded.value = true;
+      const response = await sendSubmit(target.url, plainData, markSubmitSaved);
       await handleSubmitSuccess(response, plainData);
     } catch (error) {
       reportSubmitError(error);

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

@@ -7,6 +7,7 @@ import type { TableViewDisplayCapabilities } from "./display";
 import type { CustomButton } from "./custom-button";
 import type { FormProps } from "../../form/types";
 import type { TableProps, TableFilter } from "../../../types/table";
+import type { Tone } from "../../../types/tone";
 import type { BlockAction } from "../../../build/components/blocks/BlockActions.vue";
 
 export interface QueryParamFilter {
@@ -37,13 +38,22 @@ export interface TableViewTab {
   toPage?: string;
   /** Data API location whose row total a link tab shows. */
   countFrom?: string;
-  /** Keeps the nav badge of the page it stands for up to date. */
-  navBadge?: boolean;
+  /**
+   * Keeps the nav badge of the page it stands for up to date; `{ tone }`
+   * draws it in that tone.
+   */
+  navBadge?: boolean | TableViewTabNavBadge;
+}
+
+/** A tab's nav badge drawn in a tone (interface-dms `TableViewTabNavBadge`). */
+export interface TableViewTabNavBadge {
+  tone?: Tone;
 }
 
 /**
  * How much a table draws around its rows (backend `layout`): the full
- * dashboard grid, or the compact list of a settings page.
+ * dashboard grid, or the compact list of a settings page (no caption,
+ * refresh, ⋯ menu nor column menus; the footer keeps the page size picker).
  */
 export type TableViewLayout = "full" | "compact";
 

package/frontend-vue/layers/dms-ui/i18n/locales/ui-en-GB.json

@@ -276,6 +276,13 @@
       "unsaved_changes": "Unsaved changes",
       "fetch_error_title": "Failed to fetch data",
       "fetch_error_unknown": "An unexpected error occurred. Please try again later.",
+      "load_error": {
+        "error_title": "Couldn't load this entry",
+        "error_description": "Check your connection, then try again. Nothing can be saved until the entry loads.",
+        "forbidden_title": "You can't view this entry",
+        "forbidden_description": "Your role doesn't let you view this entry, so the form can't open on its current values. Ask an administrator for access.",
+        "retry": "Try again"
+      },
       "select_date": "Select date",
       "relation": {
         "selected_count": "{count} selected",
@@ -489,11 +496,7 @@
     "notifications": {
       "categories": {
         "system": "System",
-        "system_desc": "Core system notifications and security alerts",
-        "module_one": "Security",
-        "module_one_desc": "Security monitoring and threat detection",
-        "module_two": "Logistics",
-        "module_two_desc": "Shipping, inventory and supply chain updates"
+        "system_desc": "Core system notifications and security alerts"
       },
       "subjects": {
         "general": "General",
@@ -508,12 +511,6 @@
         "automation_desc": "Notifications sent by automation procedures",
         "updates": "Module updates",
         "updates_desc": "Available updates for the project's Antelope modules (development mode)",
-        "module_one_alerts": "Security alerts",
-        "module_one_alerts_desc": "Critical security events requiring immediate attention",
-        "module_one_updates": "Threat reports",
-        "module_one_updates_desc": "Updates on security threats and vulnerabilities",
-        "module_two_notifications": "Shipment updates",
-        "module_two_notifications_desc": "Updates on shipping and inventory",
         "updates_badge": "Developer mode"
       },
       "preferences": {
@@ -544,8 +541,8 @@
           "description": "You can now sign in with {provider}. Not you? Change your password and review your sign-in methods in Security."
         },
         "password_reset": {
-          "title": "Password reset with an email link",
-          "description": "The link was sent to {email}. Not you? Someone can read that mailbox: secure it first, then reset your password again."
+          "title": "Password reset with an email code",
+          "description": "The code was sent to {email}. Not you? Someone can read that mailbox: secure it first, then reset your password again."
         },
         "email_changed": {
           "title": "Sign-in email changed to {email}",
@@ -599,6 +596,10 @@
           "description": "Someone entered a wrong password in the last {minutes} minutes. Don't recognise this? Change your password and turn on two-factor authentication in Security.",
           "description_two_factor": "Someone entered a wrong password in the last {minutes} minutes; two-factor authentication still stood in the way. Don't recognise this? Change your password in Security."
         },
+        "two_factor_lockout": {
+          "title": "{count} wrong two-factor codes on your account",
+          "description": "Someone gave your password, then {count} wrong two-factor codes within {minutes} minutes; codes are refused for a while. Don't recognise this? Your password is known: change it in Security."
+        },
         "roles_changed": {
           "title": "Your roles are now {roles}",
           "title_one": "Your role is now {roles}",
@@ -678,7 +679,8 @@
       "empty_title": "No activity yet",
       "error_title": "Activity could not be loaded",
       "error_description": "Check your connection, then try again.",
-      "retry": "Try again"
+      "retry": "Try again",
+      "list_label": "Activity"
     },
     "leave_guard": {
       "title": "Discard unsaved changes?",

package/frontend-vue/layers/dms-ui/i18n/locales/ui-fr-FR.json

@@ -277,6 +277,13 @@
       "error_not_submitted": "Le formulaire n'a pas été soumis",
       "fetch_error_title": "Échec de la récupération des données",
       "fetch_error_unknown": "Une erreur inattendue s'est produite. Veuillez réessayer plus tard.",
+      "load_error": {
+        "error_title": "Impossible de charger cet élément",
+        "error_description": "Vérifiez votre connexion, puis réessayez. Rien ne peut être enregistré tant que l'élément n'est pas chargé.",
+        "forbidden_title": "Vous ne pouvez pas voir cet élément",
+        "forbidden_description": "Votre rôle ne vous permet pas de voir cet élément, le formulaire ne peut donc pas s'ouvrir sur ses valeurs actuelles. Demandez l'accès à un administrateur.",
+        "retry": "Réessayer"
+      },
       "select_date": "Sélectionner une date",
       "relation": {
         "selected_count": "{count} sélectionné(s)",
@@ -490,11 +497,7 @@
     "notifications": {
       "categories": {
         "system": "Système",
-        "system_desc": "Notifications système et alertes de sécurité",
-        "module_one": "Sécurité",
-        "module_one_desc": "Surveillance et détection des menaces",
-        "module_two": "Logistique",
-        "module_two_desc": "Expéditions, inventaire et chaîne d'approvisionnement"
+        "system_desc": "Notifications système et alertes de sécurité"
       },
       "subjects": {
         "general": "Général",
@@ -509,12 +512,6 @@
         "automation_desc": "Notifications envoyées par les procédures d'automatisation",
         "updates": "Mises à jour des modules",
         "updates_desc": "Mises à jour disponibles des modules Antelope du projet (mode développement)",
-        "module_one_alerts": "Alertes de sécurité",
-        "module_one_alerts_desc": "Événements critiques nécessitant une attention immédiate",
-        "module_one_updates": "Rapports de menaces",
-        "module_one_updates_desc": "Mises à jour sur les menaces et vulnérabilités de sécurité",
-        "module_two_notifications": "Suivi des expéditions",
-        "module_two_notifications_desc": "Mises à jour sur les expéditions et l'inventaire",
         "updates_badge": "Mode développeur"
       },
       "preferences": {
@@ -545,8 +542,8 @@
           "description": "Vous pouvez désormais vous connecter avec {provider}. Ce n'était pas vous ? Changez votre mot de passe et vérifiez vos méthodes de connexion dans Sécurité."
         },
         "password_reset": {
-          "title": "Mot de passe réinitialisé par lien e-mail",
-          "description": "Le lien a été envoyé à {email}. Ce n'était pas vous ? Quelqu'un a accès à cette boîte mail : sécurisez-la d'abord, puis réinitialisez à nouveau votre mot de passe."
+          "title": "Mot de passe réinitialisé par code e-mail",
+          "description": "Le code a été envoyé à {email}. Ce n'était pas vous ? Quelqu'un a accès à cette boîte mail : sécurisez-la d'abord, puis réinitialisez à nouveau votre mot de passe."
         },
         "email_changed": {
           "title": "E-mail de connexion changé pour {email}",
@@ -600,6 +597,10 @@
           "description": "Quelqu'un a saisi un mauvais mot de passe ces {minutes} dernières minutes. Vous ne reconnaissez pas ces tentatives ? Changez votre mot de passe et activez la double authentification dans Sécurité.",
           "description_two_factor": "Quelqu'un a saisi un mauvais mot de passe ces {minutes} dernières minutes ; la double authentification a tout de même barré la route. Vous ne reconnaissez pas ces tentatives ? Changez votre mot de passe dans Sécurité."
         },
+        "two_factor_lockout": {
+          "title": "{count} codes de double authentification erronés sur votre compte",
+          "description": "Quelqu'un a saisi votre mot de passe, puis {count} codes de double authentification erronés en moins de {minutes} minutes ; les codes sont refusés pour un temps. Vous ne reconnaissez pas ces tentatives ? Votre mot de passe est connu : changez-le dans Sécurité."
+        },
         "roles_changed": {
           "title": "Vos rôles sont désormais : {roles}",
           "title_one": "Votre rôle est désormais : {roles}",
@@ -679,7 +680,8 @@
       "empty_title": "Aucune activité pour l'instant",
       "error_title": "Impossible de charger l'activité",
       "error_description": "Vérifiez votre connexion, puis réessayez.",
-      "retry": "Réessayer"
+      "retry": "Réessayer",
+      "list_label": "Activité"
     },
     "leave_guard": {
       "title": "Abandonner les modifications non enregistrées ?",

package/frontend-vue/package.json

@@ -11,7 +11,7 @@
   "license": "Apache-2.0",
   "packageManager": "pnpm@10.6.5",
   "engines": {
-    "@antelopejs/dms-frontend": ">=0.5.0 <0.6.0"
+    "@antelopejs/dms-frontend": ">=0.5.1 <0.6.0"
   },
   "scripts": {
     "typecheck": "ajs dms verify-source --layer \"$PWD\" --local-package @antelopejs/dms=.. --local-package @antelopejs/interface-dms=../../interface-dms",
@@ -73,7 +73,7 @@
   },
   "devDependencies": {
     "@antelopejs/core": ">=1.13.4 <2",
-    "@antelopejs/dms-frontend": ">=0.5.0 <0.6.0",
+    "@antelopejs/dms-frontend": ">=0.5.1 <0.6.0",
     "@eslint/js": "^8.57.0",
     "@inertiajs/vue3": "^3.7.0",
     "@nuxt/ui": "4.10.0",

package/frontend-vue/pnpm-lock.yaml

@@ -157,8 +157,8 @@ importers:
         specifier: '>=1.13.4 <2'
         version: 1.13.5
       '@antelopejs/dms-frontend':
-        specifier: '>=0.5.0 <0.6.0'
-        version: 0.5.0(@antelopejs/core@1.13.5)
+        specifier: '>=0.5.1 <0.6.0'
+        version: 0.5.1(@antelopejs/core@1.13.5)
       '@eslint/js':
         specifier: ^8.57.0
         version: 8.57.0
@@ -234,8 +234,8 @@ packages:
     engines: {node: '>=20.19'}
     hasBin: true
 
-  '@antelopejs/dms-frontend@0.5.0':
-    resolution: {integrity: sha512-pwoE21xA5H3AqwHgLdMJN9F8K7uo9VLzBp97JbPm3cXo10TGVCwWSgoEBJ/1+2mgS9HlWmwUDzkAqwhG0YtktA==}
+  '@antelopejs/dms-frontend@0.5.1':
+    resolution: {integrity: sha512-ykrqlHfYF+BqNy+h4FuZBbqAW6UjviauCiI8cQCW1M55MzIxk2Ar3ZnMH1VKH8QsfDBBNapDik5rd/AMLQ33dw==}
     engines: {node: '>=20.12.0'}
     hasBin: true
     peerDependencies:
@@ -4205,7 +4205,7 @@ snapshots:
       semver: 7.8.5
       typescript: 5.9.3
 
-  '@antelopejs/dms-frontend@0.5.0(@antelopejs/core@1.13.5)':
+  '@antelopejs/dms-frontend@0.5.1(@antelopejs/core@1.13.5)':
     dependencies:
       '@antelopejs/core': 1.13.5
       chokidar: 4.0.3

package/frontend-vue/tests/activity-feed-fill-height.test.ts

@@ -0,0 +1,107 @@
+import { computed, createSSRApp, defineComponent, h, ref } from "vue";
+import { renderToString } from "vue/server-renderer";
+import { afterEach, beforeEach, expect, it, vi } from "vitest";
+import ActivityFeed from "../layers/dms-ui/app/components/activity-feed/ActivityFeed.vue";
+
+const items = ref<Array<Record<string, unknown>>>([]);
+
+vi.mock("../layers/dms-ui/app/build/composables/blocks/useBlockItems", () => ({
+  useBlockItems: () => ({
+    items: computed(() => items.value),
+    isPending: computed(() => false),
+    hasError: computed(() => false),
+    refresh: async () => {},
+  }),
+}));
+
+const Slot = defineComponent({
+  props: { title: { type: String, default: undefined } },
+  setup:
+    (props, { slots, attrs }) =>
+    () =>
+      h("div", attrs, [props.title, slots.default?.()]),
+});
+
+async function render(props: Record<string, unknown>): Promise<string> {
+  const app = createSSRApp({
+    render: () =>
+      h(ActivityFeed, {
+        componentId: "activity",
+        pageId: "settings",
+        title: "Recent account activity",
+        fetchUrl: "/settings/activity",
+        ...props,
+      }),
+  });
+  for (const name of [
+    "DmsCard",
+    "UIcon",
+    "USkeleton",
+    "UButton",
+    "ULink",
+    "NuxtLink",
+  ]) {
+    app.component(name, Slot);
+  }
+  return renderToString(app);
+}
+
+/** The opening tag of the feed's scroll area, if it has one. */
+function scrollArea(html: string): string | undefined {
+  return html.match(/<div[^>]*role="region"[^>]*>/)?.[0];
+}
+
+beforeEach(() => {
+  items.value = Array.from({ length: 25 }, (_, index) => ({
+    id: `e${index}`,
+    title: `Entry ${index}`,
+    date: new Date(Date.UTC(2026, 9, 9, 23 - index)).toISOString(),
+  }));
+  vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
+  vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
+});
+
+afterEach(() => vi.unstubAllGlobals());
+
+it("filling its cell, scrolls the entries in a focusable region sized to nothing", async () => {
+  const area = scrollArea(await render({ fillHeight: true }));
+  expect(area).toBeDefined();
+  expect(area).toContain('tabindex="0"');
+  expect(area).toContain('aria-label="Recent account activity"');
+  // Sized to nothing, it leaves the row's height to the cards beside it…
+  expect(area).toMatch(/\bcontain-size\b/);
+  expect(area).toMatch(/\boverflow-y-auto\b/);
+  expect(area).toMatch(/\bh-full\b/);
+  // …and once the grid stacks its cells, takes its own height, capped.
+  expect(area).toContain(
+    "[@container_style(--dms-grid-tracks:1)]:max-h-[24rem]",
+  );
+  expect(area).toContain(
+    "[@container_style(--dms-grid-tracks:1)]:contain-none",
+  );
+});
+
+it("keeps each day's separator on top of the scrolled entries", async () => {
+  const html = await render({ fillHeight: true });
+  expect(html).toMatch(/<div[^>]*class="[^"]*\bsticky top-0\b[^"]*"[^>]*><h3/);
+});
+
+it("names the region after the feed when it has no title", async () => {
+  const area = scrollArea(await render({ fillHeight: true, title: undefined }));
+  expect(area).toContain('aria-label="dms.activity_feed.list_label"');
+});
+
+it("grows with its entries by default, without a scroll area", async () => {
+  const html = await render({});
+  expect(scrollArea(html)).toBeUndefined();
+  expect(html).not.toContain("contain-size");
+  expect(html).not.toContain("sticky");
+});
+
+it("shows only the latest `maxItems` entries", async () => {
+  const html = await render({ fillHeight: true, maxItems: 20 });
+  expect(html).toContain("Entry 0");
+  expect(html).toContain("Entry 19");
+  expect(html).not.toContain("Entry 20");
+  expect(new Set(html.match(/Entry \d+/g)).size).toBe(20);
+});

package/frontend-vue/tests/category-nav-cards.test.ts

@@ -1,15 +1,9 @@
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 import { computed, ref } from "vue";
 import { useCategoryNavCards } from "../layers/dms-layout/app/build/composables/navigation/useCategoryNavCards";
+import type { NavBadge } from "../layers/dms-ui/app/build/composables/navigation/useNavBadges";
 
-const badges = ref<Record<string, string>>({});
-
-vi.mock(
-  "../layers/dms-ui/app/build/composables/navigation/useNavBadges",
-  () => ({
-    useNavBadges: () => ({ badges }),
-  }),
-);
+const badges = ref<Record<string, NavBadge>>({});
 vi.mock(
   "../layers/dms-core/app/build/composables/auth/usePermissionPreview",
   () => ({
@@ -40,7 +34,10 @@ const tree = ref({
           children: {
             profile: node("settings.user.profile", { icon: "i-ph-user" }),
             security: node("settings.user.security", { badge: "1" }),
-            notifications: node("settings.user.notifications", { badge: "4" }),
+            notifications: node("settings.user.notifications", {
+              badge: "4",
+              badgeTone: "warning",
+            }),
             locked: node("settings.user.locked", { hasAccess: false }),
           },
           childrenOrders: ["profile", "security", "notifications", "locked"],
@@ -57,6 +54,7 @@ beforeEach(() => {
   vi.stubGlobal("computed", computed);
   vi.stubGlobal("useI18n", () => ({ t: (key: string) => key }));
   vi.stubGlobal("useSiteLayout", () => ({ siteLayoutTree: tree }));
+  vi.stubGlobal("useDmsState", () => badges);
 });
 
 afterEach(() => {
@@ -74,21 +72,31 @@ it("makes a card of each page the viewer can open, in menu order", () => {
     title: "$settings.user.profile",
     icon: "i-ph-user",
     to: "/settings/user/profile",
-    state: undefined,
+    badge: undefined,
   });
 });
 
 it("shows the navigation badge, a fresher count first", () => {
   badges.value = {
-    "settings.user.notifications": "",
-    "settings.user.security": "2",
+    "settings.user.notifications": { label: "" },
+    "settings.user.security": { label: "2", tone: "error" },
   };
   const { cards } = useCategoryNavCards(() => "settings.user");
-  expect(cards.value.map((card) => card.state)).toEqual([
+  expect(cards.value.map((card) => card.badge)).toEqual([
     undefined,
     "2",
     undefined,
   ]);
+  expect(cards.value[1]?.badgeTone).toBe("error");
+});
+
+it("draws the served badge in the tone the server gave it", () => {
+  const { cards } = useCategoryNavCards(() => "settings.user");
+  expect(cards.value[2]).toMatchObject({ badge: "4", badgeTone: "warning" });
+  expect(cards.value[1]).toMatchObject({ badge: "1", badgeTone: undefined });
+  // The badge is the card's corner pill, not the live state line under the
+  // description that a fetched card closes on.
+  expect(cards.value[2]).not.toHaveProperty("state");
 });
 
 it("lists nothing for a category the site layout does not hold", () => {