@antelopejs/dms 0.7.14 → 0.7.16

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

@@ -14,7 +14,7 @@ import {
 } from "@internationalized/date";
 import { reactivePick } from "@vueuse/core";
 import { useFormField } from "@nuxt/ui/composables/useFormField";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import {
   FIELD_TRIGGER_CLASS,
   FIELD_TRIGGER_INVALID_CLASS,

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

@@ -2,7 +2,7 @@
 import { getCurrentInstance, h, render } from "vue";
 import { useFormField } from "@nuxt/ui/composables/useFormField";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import { codeLanguageLabel } from "../../../build/utils/codeLanguages";
 import type {
   CodeEditor,

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

@@ -6,7 +6,7 @@ import type {
 } from "@nuxt/ui/components/InputNumber.vue";
 import { computed, nextTick, watch } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import {
   BELOW_MIN_MESSAGE,
   numberRangeError,

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

@@ -3,7 +3,7 @@ import {
   formErrorsInjectionKey,
   formFieldInjectionKey,
 } from "@nuxt/ui/composables/useFormField";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import {
   addTags,
   invalidTags,

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { InputProps } from "@nuxt/ui/components/Input.vue";
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 
 interface InputTimeProps extends Omit<InputProps, "modelValue" | "type"> {
   modelValue?: number | null;

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useControlError } from "../../../build/composables/form/useControlError";
+import { useControlError } from "../../../composables/form/useControlError";
 import {
   type KeyValueRow,
   keyValueProblem,

package/frontend-vue/layers/dms-ui/app/components/period/PeriodSelector.vue

@@ -23,9 +23,11 @@ import { isRelativePreset } from "#dms-core/app/composables/period/presetResolve
 import { usePeriodLocation } from "../../build/composables/period/usePeriodLocation";
 import {
   type CalendarRange,
+  type CalendarRangeAnchor,
   calendarToRange,
   formatPeriodRange,
   formatRelativeInstant,
+  limitCalendarRange,
   periodDuration,
   rangeToCalendar,
 } from "../../build/composables/period/periodDisplay";
@@ -49,6 +51,7 @@ interface Props extends DefaultComponentProps {
   comparisonControl?: ComparisonControl;
   rememberKey?: string;
   variant?: "default" | "segmented";
+  maxDays?: number;
 }
 
 const CALENDAR_ICON = "i-ph-calendar-blank-light";
@@ -232,9 +235,18 @@ function setOpen(open: boolean) {
   isOpen.value = open;
 }
 
+// A custom range starts from the days on screen, which a long preset can
+// stretch past `maxDays`: it keeps its most recent days.
+function selectDraftPreset(preset: PeriodPreset) {
+  draft.selectPreset(preset);
+  const custom = draft.customRange.value;
+  if (preset !== CUSTOM_PRESET || !custom) return;
+  selectCalendarRange(rangeToCalendar(custom), "end");
+}
+
 function openCustom() {
   draft.reset();
-  draft.selectPreset(CUSTOM_PRESET);
+  selectDraftPreset(CUSTOM_PRESET);
   pendingStart.value = null;
   isOpen.value = true;
 }
@@ -253,9 +265,14 @@ const draftCompareCalendar = computed<CalendarRange | null>(() => {
   return compare ? rangeToCalendar(compare) : null;
 });
 
-function selectCalendarRange(range: CalendarRange) {
+function selectCalendarRange(
+  range: CalendarRange,
+  anchor: CalendarRangeAnchor = "start",
+) {
   if (!isCustomEnabled.value) return;
-  draft.selectRange(calendarToRange(range));
+  draft.selectRange(
+    calendarToRange(limitCalendarRange(range, props.maxDays, anchor)),
+  );
 }
 
 function updateStart(value: DateValue | null | undefined) {
@@ -273,6 +290,7 @@ function updateEnd(value: DateValue | null | undefined) {
   const start = draftCalendar.value.start;
   selectCalendarRange(
     end.compare(start) < 0 ? { start: end, end } : { start, end },
+    "end",
   );
 }
 
@@ -297,6 +315,12 @@ const draftDurationLabel = computed(() => {
   return t(`dms.period.popover.${unit}`, { count }, count);
 });
 
+const maxDaysHint = computed(() =>
+  props.maxDays && isCustomEnabled.value
+    ? t("dms.period.popover.max_days", { count: props.maxDays }, props.maxDays)
+    : null,
+);
+
 const draftCompareLabel = computed(() => {
   const compare = draft.compareRange.value;
   return compare ? formatPeriodRange(compare, locale.value) : null;
@@ -557,7 +581,7 @@ function onSegmentedClick(event: MouseEvent) {
                   role="option"
                   :aria-selected="draft.preset.value === entry.preset"
                   :class="presetItemClass(entry.preset)"
-                  @click="draft.selectPreset(entry.preset)"
+                  @click="selectDraftPreset(entry.preset)"
                 >
                   <span class="truncate">{{ entry.label }}</span>
                   <span
@@ -583,7 +607,7 @@ function onSegmentedClick(event: MouseEvent) {
                   role="option"
                   :aria-selected="draft.preset.value === CUSTOM_PRESET"
                   :class="presetItemClass(CUSTOM_PRESET)"
-                  @click="draft.selectPreset(CUSTOM_PRESET)"
+                  @click="selectDraftPreset(CUSTOM_PRESET)"
                 >
                   <UIcon :name="CALENDAR_ICON" class="size-4 shrink-0" />
                   {{ $t("dms.period.popover.custom_range", "Custom range") }}
@@ -662,7 +686,8 @@ function onSegmentedClick(event: MouseEvent) {
               :week-starts-on="weekStartsOn"
               :number-of-months="isWide ? 2 : 1"
               :readonly="!isCustomEnabled"
-              @update:model-value="selectCalendarRange"
+              :max-days="maxDays"
+              @update:model-value="selectCalendarRange($event)"
               @pending="pendingStart = $event"
             />
 
@@ -680,6 +705,7 @@ function onSegmentedClick(event: MouseEvent) {
                   </span>
                   {{ draftCompareLabel }}
                 </template>
+                <template v-if="maxDaysHint">· {{ maxDaysHint }}</template>
               </span>
               <UButton
                 color="neutral"

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

@@ -78,9 +78,12 @@ import { selectedRowIds } from "../../build/composables/table-view/utils/bulkAct
 import { isBulkAction } from "../../build/composables/actions/bulkSelection";
 import { selectionScopeKey } from "../../build/utils/selectionScope";
 import {
+  type DeepLinkOutcome,
+  deepLinkOutcome,
   isDeepLinkAction,
   readRecordId,
   resolveDeepLinkedRow,
+  writeRecordId,
 } from "../../build/composables/table-view/utils/recordLink";
 import {
   rowSidePanelOwnerKey,
@@ -112,8 +115,13 @@ import {
 } from "../../build/composables/table-view/useExpandedRowDetails";
 import type {
   TableAccumulation,
+  TableUrlFilter,
   TableViewSwitcherItem,
 } from "../../build/components/table/Table.vue";
+import {
+  visibleUrlFilters,
+  withoutQueryParam,
+} from "../../build/composables/table-view/utils/urlFilters";
 import {
   defineAsyncComponent,
   useTemplateRef,
@@ -143,7 +151,10 @@ import {
   groupedSorting,
   isGroupableColumn,
 } from "../../build/composables/table-view/utils/groupedRows";
-import { readTableUrlKey } from "../../build/composables/table-view/utils/views";
+import {
+  readTableUrlTab,
+  useTableUrlTab,
+} from "../../build/composables/table-view/useTableUrlTab";
 import TableViews, {
   type TableViewItem,
 } from "../../build/components/table/Views.vue";
@@ -396,6 +407,15 @@ const queryParamHiddenFilters = computed<TableFilter[]>(() => {
     }));
 });
 
+const shownUrlFilters = computed<TableUrlFilter[]>(() =>
+  visibleUrlFilters(queryParamFilters, route.query as Record<string, unknown>),
+);
+
+const removeUrlFilter = (param: string) =>
+  router.replace({
+    query: withoutQueryParam(route.query, param),
+  });
+
 const routeParamHiddenFilters = computed<TableFilter[]>(() => {
   if (!routeParamFilters || !routeParams) return [];
 
@@ -589,11 +609,10 @@ const ALL_TAB_ID = "all";
 
 const { t, te } = useI18n();
 
-const TAB_URL_KEY = "tab";
-const urlTab = readTableUrlKey(useDmsRoute().query, urlScope, TAB_URL_KEY);
 // A tab named by the URL wins over the one kept from the last visit.
 const activeTabId = ref<string>(
-  urlTab.value ?? tablePreferences.get<string>("activeTab", ALL_TAB_ID),
+  readTableUrlTab(route.query, urlScope) ??
+    tablePreferences.get<string>("activeTab", ALL_TAB_ID),
 );
 
 interface ResolvedTab {
@@ -644,6 +663,14 @@ const activeTabFilters = computed<TableFilter[]>(() => {
   return tab?.filters || [];
 });
 
+useTableUrlTab({
+  route,
+  urlScope,
+  activeTabId,
+  isOpenable: (tabId) =>
+    resolvedTabs.value.some((tab) => !tab.to && tab.id === tabId),
+});
+
 watch(resolvedTabs, (next) => {
   if (next.length === 0) return;
   if (!next.some((tab) => !tab.to && tab.id === activeTabId.value)) {
@@ -1686,10 +1713,50 @@ const openRecordFromUrl = async () => {
     idOf: getRowId,
     getRow: tableRows.getRow,
   });
-  if (row) handleCustomRowAction(deepLinkAction, row as Data);
-  else if (isMissing) handleMissingRow(deepLinkAction, id);
+  const outcome = deepLinkOutcome({ row, isMissing }, deepLinkAction);
+  deepLinkOutcomes[outcome](deepLinkAction, id, row as Data);
 };
 
+const notifyUnresolvedRecordLink = () => {
+  writeRecordId(urlScope);
+  toast.add({
+    title: t("dms.record_link.not_found_title"),
+    description: t("dms.record_link.not_found_description"),
+    color: Color.warning,
+    icon: "i-ph-link-break",
+  });
+};
+
+const notifyFailedRecordLink = () => {
+  writeRecordId(urlScope);
+  toast.add({
+    title: t("dms.record_link.failed_title"),
+    description: t("dms.record_link.failed_description"),
+    color: Color.error,
+    icon: "i-ph-warning-circle",
+  });
+};
+
+const deepLinkOutcomes: Record<
+  DeepLinkOutcome,
+  (action: CustomRowAction, id: string, row: Data) => void
+> = {
+  open: (action, _id, row) => handleCustomRowAction(action, row),
+  missingPanel: (action, id) => handleMissingRow(action, id),
+  notify: notifyUnresolvedRecordLink,
+  notifyFailed: notifyFailedRecordLink,
+};
+
+// A visit that keeps the page mounted (a link to the same page with another
+// `?record=`) opens the row it names, as a fresh load would. The table's own
+// writes replace the URL in place and never reach the route.
+watch(
+  () => readRecordId(route.query, urlScope),
+  (id, previous) => {
+    if (id && id !== previous) void openRecordFromUrl();
+  },
+);
+
 const selectedIds = computed(() => selectedRowIds(rowSelect.value));
 
 const isRowActionEnabled = (
@@ -2065,6 +2132,7 @@ onMounted(() => {
     :footer="resolvedFooter"
     :empty-states="props.emptyStates"
     :hidden-filters-apply="queryParamHiddenFilters.length > 0"
+    :url-filters="shownUrlFilters"
     :default-page-size="props.pageSize"
     :archive-toggle="canToggleArchived"
     :displays="availableDisplays"
@@ -2102,6 +2170,7 @@ onMounted(() => {
     @export-all="handleExportTable"
     @bulk-action="runBulkAction"
     @duplicate="handleRowDuplicate"
+    @remove-url-filter="removeUrlFilter"
     @edit="handleRowEdit"
   >
     <template

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

@@ -0,0 +1,30 @@
+import { formFieldInjectionKey } from "@nuxt/ui/composables/useFormField";
+import { inject, onBeforeUnmount, ref } from "vue";
+import { FORM_CONTROL_ERRORS_KEY } from "../../build/composables/form/formControlErrors";
+
+/**
+ * Lets a control refuse what was typed into it (a duration or JSON it cannot
+ * read): inside a form, the message becomes the field's error, which blocks
+ * the submit and joins the form's summary like any other. `message` holds it
+ * for a control used outside a form.
+ *
+ * Call it in the setup of a field's input component. `report(message)` sets
+ * the error, `report(undefined)` clears it; the error is cleared when the
+ * component unmounts.
+ */
+export function useControlError() {
+  const field = inject(formFieldInjectionKey, undefined);
+  const errors = inject(FORM_CONTROL_ERRORS_KEY, null);
+  const message = ref<string>();
+
+  function report(next: string | undefined): void {
+    if (message.value === next) return;
+    message.value = next;
+    const name = field?.value?.name;
+    if (name) errors?.report(name, next);
+  }
+
+  onBeforeUnmount(() => report(undefined));
+
+  return { message, report };
+}

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

@@ -14,6 +14,10 @@ import type { BlockAction } from "../../../build/components/blocks/BlockActions.
 export interface QueryParamFilter {
   field: string;
   mode?: string;
+  /** Shown as a removable chip while the URL applies it. */
+  visible?: boolean;
+  /** The chip's name; the field's column label by default. */
+  label?: string;
 }
 
 export type QueryParamFilters = Record<string, QueryParamFilter>;

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

@@ -753,6 +753,12 @@
       "held_searching": "search active",
       "held_sorted": "sorted otherwise than by default",
       "held_scrolled": "scrolled down"
+    },
+    "record_link": {
+      "not_found_title": "This entry is no longer available",
+      "not_found_description": "The link points to an entry that was deleted, or that this list cannot show.",
+      "failed_title": "This entry could not be opened",
+      "failed_description": "Loading it failed. Try again in a moment."
     }
   }
 }

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

@@ -754,6 +754,12 @@
       "held_searching": "recherche active",
       "held_sorted": "tri autre que celui par défaut",
       "held_scrolled": "défilé vers le bas"
+    },
+    "record_link": {
+      "not_found_title": "Cette entrée n’est plus disponible",
+      "not_found_description": "Le lien mène à une entrée supprimée, ou que cette liste ne peut pas afficher.",
+      "failed_title": "Impossible d’ouvrir cette entrée",
+      "failed_description": "Son chargement a échoué. Réessayez dans un instant."
     }
   }
 }

package/frontend-vue/tests/control-error-path.test.ts

@@ -0,0 +1,11 @@
+import { describe, expect, it } from "vitest";
+import * as legacy from "../layers/dms-ui/app/build/composables/form/useControlError";
+import { useControlError } from "../layers/dms-ui/app/composables/form/useControlError";
+import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/formControlErrors";
+
+describe("useControlError location", () => {
+  it("stays importable from its former build/ path", () => {
+    expect(legacy.useControlError).toBe(useControlError);
+    expect(legacy.FORM_CONTROL_ERRORS_KEY).toBe(FORM_CONTROL_ERRORS_KEY);
+  });
+});

package/frontend-vue/tests/email-layout.test.ts

@@ -0,0 +1,124 @@
+import { describe, expect, it, vi } from "vitest";
+import { createSSRApp, defineComponent, h } from "vue";
+import { renderToString } from "vue/server-renderer";
+import EmailLayout from "../layers/dms-layout/app/emails/components/EmailLayout.vue";
+import { emailLogoUrl } from "../layers/dms-layout/app/emails/components/index";
+
+const PUBLIC_BASE = "https://admin.example.com";
+const ELEMENTS: Record<string, string> = {
+  EHtml: "html",
+  EHead: "head",
+  EBody: "body",
+  EContainer: "div",
+  ESection: "section",
+  EHeading: "h1",
+  EImg: "img",
+  EHr: "hr",
+  EPreview: "span",
+};
+
+function element(tag: string) {
+  return defineComponent({
+    inheritAttrs: false,
+    setup:
+      (_, { attrs, slots }) =>
+      () =>
+        h(tag, { src: attrs.src, alt: attrs.alt }, slots.default?.()),
+  });
+}
+
+async function renderLayout(
+  props: Record<string, unknown>,
+  logo = "/images/logo.png",
+  clientBaseUrl = PUBLIC_BASE,
+): Promise<string> {
+  vi.stubGlobal("useDmsAppConfig", () => ({
+    branding: { logo: { default: { light: logo } } },
+  }));
+  vi.stubGlobal("useDmsRuntimeConfig", () => ({
+    public: { dms: { clientBaseUrl } },
+  }));
+  const app = createSSRApp({
+    render: () =>
+      h(EmailLayout, props, {
+        default: () => h("p", "Body"),
+        footer: () => h("small", "Footer"),
+      }),
+  });
+  Object.entries(ELEMENTS).forEach(([name, tag]) =>
+    app.component(name, element(tag)),
+  );
+  const html = await renderToString(app);
+  vi.unstubAllGlobals();
+  return html;
+}
+
+describe("EmailLayout", () => {
+  it("keeps the heading, the separator and the logo by default", async () => {
+    const html = await renderLayout({ title: "Welcome" });
+    expect(html).toContain("<h1>Welcome</h1>");
+    expect(html).toContain("<hr>");
+    expect(html).toContain(
+      `<img src="${PUBLIC_BASE}/images/logo.png" alt="Logo">`,
+    );
+  });
+
+  it("drops the heading without a title and the separator on request", async () => {
+    const html = await renderLayout({ divider: false, preheader: "Preview" });
+    expect(html).not.toContain("<h1>");
+    expect(html).not.toContain("<hr>");
+    expect(html).toContain("<span>Preview</span>");
+    expect(html).toContain("<p>Body</p>");
+    expect(html).toContain("<small>Footer</small>");
+  });
+
+  it("keeps any logo by default", async () => {
+    expect(
+      await renderLayout({ title: "Hi" }, "/images/logo.svg", ""),
+    ).toContain('<img src="/images/logo.svg" alt="Logo">');
+  });
+
+  it("leaves out a logo a mail client cannot load with publicLogoOnly", async () => {
+    const guarded = { title: "Hi", publicLogoOnly: true };
+    expect(await renderLayout(guarded, "/images/logo.svg")).not.toContain(
+      "<img",
+    );
+    expect(
+      await renderLayout(guarded, "/logo.png", "http://localhost:3001"),
+    ).not.toContain("<img");
+    expect(await renderLayout(guarded)).toContain(
+      `<img src="${PUBLIC_BASE}/images/logo.png" alt="Logo">`,
+    );
+  });
+});
+
+describe("emailLogoUrl", () => {
+  it("resolves a root path against the public base URL", () => {
+    expect(emailLogoUrl("/logo.png", PUBLIC_BASE)).toBe(
+      `${PUBLIC_BASE}/logo.png`,
+    );
+    expect(emailLogoUrl("https://cdn.example.com/logo.png", "")).toBe(
+      "https://cdn.example.com/logo.png",
+    );
+  });
+
+  it.each([
+    [undefined, PUBLIC_BASE],
+    ["/logo.svg", PUBLIC_BASE],
+    ["https://cdn.example.com/logo.SVG?v=2", ""],
+    ["data:image/png;base64,AAAA", ""],
+    ["/logo.png", ""],
+    ["/logo.png", "http://localhost:3001"],
+    ["/logo.png", "http://dms.localhost"],
+    ["/logo.png", "http://127.0.0.1:3001"],
+    ["/logo.png", "http://10.0.0.5"],
+    ["/logo.png", "http://172.20.1.1"],
+    ["/logo.png", "http://192.168.1.10"],
+    ["/logo.png", "http://169.254.169.254"],
+    ["/logo.png", "http://[::1]:3001"],
+    ["/logo.png", "http://[fd00::1]"],
+    ["/logo.png", "http://intranet.internal"],
+  ])("leaves out %s on %s", (logo, base) => {
+    expect(emailLogoUrl(logo, base)).toBe("");
+  });
+});

package/frontend-vue/tests/header-action-page-query.test.ts

@@ -3,7 +3,8 @@
  * A page header's buttons follow the page URL: a target URL takes the
  * `{{params.X}}` / `{{query.X}}` tokens of a block's `fetchUrl`, and a
  * button whose availability reads the query is asked for again when the
- * query changes.
+ * query changes. The served buttons and a page's own actions
+ * (`usePageHeaderActions`) share one order.
  */
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import {
@@ -23,6 +24,11 @@ import {
   layoutUrlWithQuery,
   pageQueryValues,
 } from "../layers/dms-layout/app/utils/pageQuery";
+import {
+  providePageHeaderActions,
+  usePageHeaderActions,
+  type PageHeaderActionsOptions,
+} from "../layers/dms-layout/app/composables/layout/usePageHeaderActions";
 
 const handleCustomButton = vi.fn();
 vi.mock("#dms-ui/app/build/composables/actions/useActionTargets", () => ({
@@ -106,6 +112,7 @@ const mountBar = (actions: unknown[]) =>
   );
 
 const buttons = () => [...host.querySelectorAll("button")];
+const labels = () => buttons().map((button) => button.textContent);
 
 describe("resolveLinkVariables", () => {
   const context = {
@@ -277,6 +284,33 @@ describe("a header button's availability", () => {
     expect(buttons()[0]?.disabled).toBe(false);
   });
 
+  it("shows a button it hides only for the queries it does not hide it for", async () => {
+    const addKey = {
+      id: "add-key",
+      label: "Add key",
+      target: download(false).target,
+    };
+    authFetch.mockResolvedValue({
+      components: {},
+      layout: { options: { headerActions: [download(false)] } },
+    });
+    await mount(
+      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue",
+      { actions: [download(false), addKey], servedQuery: { workspace: "web" } },
+    );
+    expect(labels()).toEqual(["Download", "Add key"]);
+
+    route.query = { workspace: "modules" };
+    await nextTick();
+    await new Promise((resolve) => setTimeout(resolve));
+    expect(authFetch).toHaveBeenCalledWith(`${LAYOUT_URL}?workspace=modules`);
+    expect(labels()).toEqual(["Download"]);
+
+    route.query = { workspace: "web" };
+    await nextTick();
+    expect(labels()).toEqual(["Download", "Add key"]);
+  });
+
   it("is never asked again when no button declares one", async () => {
     await mountOutlet(undefined);
     route.query = { workspace: "gone" };
@@ -284,3 +318,64 @@ describe("a header button's availability", () => {
     expect(authFetch).not.toHaveBeenCalled();
   });
 });
+
+describe("the order of the header's buttons", () => {
+  const served = (id: string, order?: number) => ({
+    id,
+    label: id,
+    target: { type: "page", url: `/${id}` },
+    order,
+  });
+
+  // A layout's page body: the outlet, then the page calling
+  // usePageHeaderActions, then the marker saying the page has rendered.
+  async function mountPage(
+    actions: unknown[],
+    options?: PageHeaderActionsOptions,
+  ) {
+    const { default: Outlet } = await import(
+      "../layers/dms-layout/app/build/components/layout/PageHeaderActionsOutlet.vue"
+    );
+    const Page = defineComponent({
+      setup() {
+        usePageHeaderActions(() => h("button", "Export"), options);
+        return () => null;
+      },
+    });
+    const Body = defineComponent({
+      setup() {
+        const pageHost = providePageHeaderActions();
+        const Rendered = defineComponent({
+          setup() {
+            pageHost.markSlotRendered();
+            return () => null;
+          },
+        });
+        return () => [h(Outlet, { actions }), h(Page), h(Rendered)];
+      },
+    });
+    app = createApp(Body);
+    app.component("UButton", ButtonStub);
+    app.component("UTooltip", SlotStub);
+    app.mount(host);
+    await nextTick();
+  }
+
+  it("puts the page's actions after the served buttons by default", async () => {
+    await mountPage([served("add-key"), served("add-language")]);
+    expect(labels()).toEqual(["add-key", "add-language", "Export"]);
+  });
+
+  it("puts them before the served buttons of a greater order", async () => {
+    await mountPage([served("add-key")], { order: -1 });
+    expect(labels()).toEqual(["Export", "add-key"]);
+  });
+
+  it("sorts the served buttons by order, the declared order breaking ties", async () => {
+    await mountPage(
+      [served("last", 2), served("first"), served("second"), served("mid", 1)],
+      { order: 1 },
+    );
+    expect(labels()).toEqual(["first", "second", "mid", "Export", "last"]);
+  });
+});

package/frontend-vue/tests/input-number-range.test.ts

@@ -17,7 +17,7 @@ import {
   nextTick,
   ref,
 } from "vue";
-import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/useControlError";
+import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/formControlErrors";
 import {
   ABOVE_MAX_MESSAGE,
   BELOW_MIN_MESSAGE,

package/frontend-vue/tests/input-tags.test.ts

@@ -16,7 +16,7 @@ import {
   formErrorsInjectionKey,
   formFieldInjectionKey,
 } from "@nuxt/ui/composables/useFormField";
-import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/useControlError";
+import { FORM_CONTROL_ERRORS_KEY } from "../layers/dms-ui/app/build/composables/form/formControlErrors";
 
 const formErrors = ref<Array<Record<string, unknown>>>([]);
 const model = ref<string[]>([]);