@antelopejs/dms 0.7.14 → 0.7.16

package/frontend-vue/tests/period-day-rollover.test.ts

@@ -0,0 +1,80 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { ref } from "vue";
+import { usePeriod } from "../layers/dms-core/app/composables/period/usePeriod";
+import {
+  isCalendarPreset,
+  msUntilNextMidnight,
+} from "../layers/dms-core/app/composables/period/presetResolvers";
+
+const MS_PER_MINUTE = 60000;
+const MS_PER_DAY = 24 * 60 * MS_PER_MINUTE;
+const LATE_EVENING = new Date(2026, 9, 12, 23, 58);
+const NEXT_DAY = new Date(2026, 9, 13);
+
+describe("calendar presets at midnight", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+    vi.setSystemTime(LATE_EVENING);
+    vi.stubGlobal("window", globalThis);
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.unstubAllGlobals();
+  });
+
+  it("classifies the day-bound presets as calendar presets", () => {
+    expect(isCalendarPreset("today")).toBe(true);
+    expect(isCalendarPreset("last-7-days")).toBe(true);
+    expect(isCalendarPreset("this-month")).toBe(true);
+    expect(isCalendarPreset("last-hour")).toBe(false);
+    expect(isCalendarPreset("custom")).toBe(false);
+    expect(isCalendarPreset("all")).toBe(false);
+  });
+
+  it("measures the time left until the next local midnight", () => {
+    expect(msUntilNextMidnight(LATE_EVENING)).toBe(2 * MS_PER_MINUTE);
+  });
+
+  it("moves `today` onto the new day once midnight passes", () => {
+    const period = usePeriod({ defaultPreset: "today" });
+    const initialKey = period.state.value.key;
+    vi.advanceTimersByTime(MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+    vi.advanceTimersByTime(MS_PER_MINUTE);
+    expect(period.state.value.range?.from).toEqual(NEXT_DAY);
+  });
+
+  it("keeps moving on the following midnights", () => {
+    const period = usePeriod({ defaultPreset: "last-7-days" });
+    vi.advanceTimersByTime(2 * MS_PER_MINUTE);
+    expect(period.state.value.range?.to.getDate()).toBe(13);
+    vi.advanceTimersByTime(MS_PER_DAY);
+    expect(period.state.value.range?.to.getDate()).toBe(14);
+  });
+
+  it("waits for the hold to end before moving", async () => {
+    const isHeld = ref(true);
+    const period = usePeriod({
+      defaultPreset: "today",
+      holdClock: () => isHeld.value,
+    });
+    const initialKey = period.state.value.key;
+    await vi.advanceTimersByTimeAsync(3 * MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+    isHeld.value = false;
+    await vi.advanceTimersByTimeAsync(0);
+    expect(period.state.value.range?.from).toEqual(NEXT_DAY);
+  });
+
+  it("leaves a custom range alone", async () => {
+    const period = usePeriod({ defaultPreset: "today" });
+    period.setCustomRange({
+      from: new Date(2026, 9, 1),
+      to: new Date(2026, 9, 2),
+    });
+    const initialKey = period.state.value.key;
+    await vi.advanceTimersByTimeAsync(3 * MS_PER_MINUTE);
+    expect(period.state.value.key).toBe(initialKey);
+  });
+});

package/frontend-vue/tests/period-max-days.test.ts

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+/**
+ * `maxDays` caps the custom range a PeriodSelector lets the user pick: the
+ * calendar disables the days past it once a start day is picked, and a range
+ * from the date fields or a long preset is cut to it.
+ */
+import { CalendarDate } from "@internationalized/date";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, defineComponent, h, nextTick, type App } from "vue";
+import { afterEach, describe, expect, it } from "vitest";
+import PeriodRangeCalendar from "../layers/dms-ui/app/build/components/period/PeriodRangeCalendar.vue";
+import {
+  calendarRangeDays,
+  isBeyondMaxDays,
+  limitCalendarRange,
+} from "../layers/dms-ui/app/build/composables/period/periodDisplay";
+
+const OCTOBER_FIRST = new CalendarDate(2026, 10, 1);
+const OCTOBER_LAST = new CalendarDate(2026, 10, 31);
+
+describe("limitCalendarRange", () => {
+  const october = { start: OCTOBER_FIRST, end: OCTOBER_LAST };
+
+  it("keeps a range within the limit", () => {
+    expect(limitCalendarRange(october, 31, "start")).toBe(october);
+    expect(limitCalendarRange(october, undefined, "start")).toBe(october);
+  });
+
+  it("moves the end when the start is kept", () => {
+    const limited = limitCalendarRange(october, 7, "start");
+    expect(limited.start.toString()).toBe("2026-10-01");
+    expect(limited.end.toString()).toBe("2026-10-07");
+    expect(calendarRangeDays(limited)).toBe(7);
+  });
+
+  it("moves the start when the end is kept", () => {
+    const limited = limitCalendarRange(october, 7, "end");
+    expect(limited.start.toString()).toBe("2026-10-25");
+    expect(limited.end.toString()).toBe("2026-10-31");
+  });
+});
+
+describe("isBeyondMaxDays", () => {
+  it("allows exactly maxDays days on either side of the picked day", () => {
+    const picked = new CalendarDate(2026, 10, 10);
+    expect(isBeyondMaxDays(picked.add({ days: 6 }), picked, 7)).toBe(false);
+    expect(isBeyondMaxDays(picked.add({ days: 7 }), picked, 7)).toBe(true);
+    expect(isBeyondMaxDays(picked.subtract({ days: 6 }), picked, 7)).toBe(
+      false,
+    );
+    expect(isBeyondMaxDays(picked.subtract({ days: 7 }), picked, 7)).toBe(true);
+    expect(isBeyondMaxDays(picked.add({ days: 400 }), picked, undefined)).toBe(
+      false,
+    );
+  });
+});
+
+describe("the range calendar with maxDays", () => {
+  let app: App | undefined;
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+  });
+
+  function mountCalendar(maxDays?: number): HTMLElement {
+    const host = document.createElement("div");
+    document.body.appendChild(host);
+    app = createApp(
+      defineComponent({
+        setup: () => () =>
+          h(PeriodRangeCalendar, {
+            modelValue: {
+              start: new CalendarDate(2026, 9, 1),
+              end: new CalendarDate(2026, 9, 2),
+            },
+            locale: "en-US",
+            numberOfMonths: 1,
+            maxDays,
+          }),
+      }),
+    );
+    app.config.globalProperties.$t = (_key: string, fallback: string) =>
+      fallback;
+    app.component(
+      "UButton",
+      defineComponent({ setup: () => () => h("button") }),
+    );
+    app.mount(host);
+    return host;
+  }
+
+  function day(host: HTMLElement, value: string): HTMLElement {
+    const cell = host.querySelector<HTMLElement>(`[data-value="${value}"]`);
+    if (!cell) throw new Error(`No day ${value}`);
+    return cell;
+  }
+
+  it("disables the days past the limit once a start day is picked", async () => {
+    const host = mountCalendar(7);
+    expect(day(host, "2026-09-20").hasAttribute("data-disabled")).toBe(false);
+    day(host, "2026-09-10").click();
+    await nextTick();
+    expect(day(host, "2026-09-16").hasAttribute("data-disabled")).toBe(false);
+    expect(day(host, "2026-09-17").hasAttribute("data-disabled")).toBe(true);
+    expect(day(host, "2026-09-03").hasAttribute("data-disabled")).toBe(true);
+  });
+
+  it("leaves every day enabled without a limit", async () => {
+    const host = mountCalendar();
+    day(host, "2026-09-10").click();
+    await nextTick();
+    expect(day(host, "2026-09-30").hasAttribute("data-disabled")).toBe(false);
+  });
+});
+
+it("hands maxDays to the calendar and cuts the date fields to it", () => {
+  const source = readFileSync(
+    resolve(
+      __dirname,
+      "../layers/dms-ui/app/components/period/PeriodSelector.vue",
+    ),
+    "utf8",
+  );
+  expect(source).toContain(':max-days="maxDays"');
+  expect(source).toContain("limitCalendarRange(range, props.maxDays, anchor)");
+});

package/frontend-vue/tests/period-selector-url.test.ts

@@ -25,12 +25,13 @@ const preferences = new Map<string, unknown>();
 vi.stubGlobal("useDmsRoute", () => route);
 // Inertia's client-side replace moves its page URL, which the DMS route
 // follows: the route then holds the query the browser shows.
+function followInertiaPage({ url }: { url: string }): void {
+  route.query = Object.fromEntries(
+    new URL(url, "http://dms.local").searchParams,
+  );
+}
 const { inertiaReplace } = vi.hoisted(() => ({
-  inertiaReplace: vi.fn(({ url }: { url: string }) => {
-    route.query = Object.fromEntries(
-      new URL(url, "http://dms.local").searchParams,
-    );
-  }),
+  inertiaReplace: vi.fn(),
 }));
 vi.mock("@inertiajs/vue3", () => ({ router: { replace: inertiaReplace } }));
 vi.stubGlobal("usePreferences", () => ({
@@ -116,13 +117,24 @@ function mount(...ids: string[]): void {
 
 const search = () => new URLSearchParams(window.location.search);
 
+/** A navigation from outside: the browser's URL moves, then the route. */
+function navigate(query: Record<string, string>): void {
+  window.history.replaceState(
+    null,
+    "",
+    `${PAGE_PATH}?${new URLSearchParams(query)}`,
+  );
+  route.query = query;
+}
+
 const remember = (query: Record<string, string>) =>
   preferences.set(PERIOD_PREFERENCE_KEY, { [`${PAGE_ID}#page`]: query });
 
 beforeEach(() => {
   route.query = {};
   preferences.clear();
-  inertiaReplace.mockClear();
+  inertiaReplace.mockReset();
+  inertiaReplace.mockImplementation(followInertiaPage);
   window.history.replaceState(null, "", PAGE_PATH);
 });
 
@@ -272,10 +284,34 @@ describe("a change of period", () => {
   });
 });
 
+describe("the route while Inertia catches up", () => {
+  it("holds the new period at once", async () => {
+    inertiaReplace.mockImplementation(() => {});
+    mount("page");
+    handles.page!.setPreset("last-7-days");
+    await nextTick();
+    expect(route.query["page.period"]).toBe("last-7-days");
+    expect(search().get("page.period")).toBe("last-7-days");
+  });
+
+  it("does not move the period back when it reports the old URL late", async () => {
+    inertiaReplace.mockImplementation(() => {});
+    mount("page");
+    await nextTick();
+    const before = { ...route.query };
+    handles.page!.setPreset("last-7-days");
+    await nextTick();
+    route.query = before;
+    await nextTick();
+    expect(handles.page!.preset.value).toBe("last-7-days");
+    expect(search().get("page.period")).toBe("last-7-days");
+  });
+});
+
 describe("a route changed from outside", () => {
   it("moves the period of the selector it names", async () => {
     mount("sales", "traffic");
-    route.query = { "sales.period": "last-30-days" };
+    navigate({ "sales.period": "last-30-days" });
     await nextTick();
     expect(handles.sales!.preset.value).toBe("last-30-days");
     expect(handles.traffic!.preset.value).toBe("this-month");
@@ -285,7 +321,7 @@ describe("a route changed from outside", () => {
     mount("page");
     handles.page!.setPreset("last-7-days");
     await nextTick();
-    route.query = { "page.period": "last-decade" };
+    navigate({ "page.period": "last-decade" });
     await nextTick();
     expect(handles.page!.preset.value).toBe("last-7-days");
   });

package/frontend-vue/tests/row-side-panel.test.ts

@@ -453,13 +453,13 @@ describe("deep link to a row the table does not list", () => {
     ).toEqual({ isMissing: true });
   });
 
-  it("finds nothing, missing or not, on a refusal or without a row route", async () => {
+  it("marks a refused read as failed and finds nothing without a row route", async () => {
     const refused = async () => {
       throw Object.assign(new Error("Forbidden"), { status: 403 });
     };
     expect(
       await resolveDeepLinkedRow("r9", { listed: rows, idOf, getRow: refused }),
-    ).toEqual({ isMissing: false });
+    ).toEqual({ isMissing: false, isFailed: true });
     const noRoute = async () => undefined;
     expect(
       await resolveDeepLinkedRow("r9", { listed: rows, idOf, getRow: noRoute }),

package/frontend-vue/tests/table-url-filters.test.ts

@@ -0,0 +1,158 @@
+// @vitest-environment jsdom
+import {
+  computed,
+  createApp,
+  defineComponent,
+  h,
+  nextTick,
+  provide,
+  ref,
+  shallowRef,
+  type App,
+  type FunctionalComponent,
+} from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import TableFiltersRow from "../layers/dms-ui/app/build/components/table/FiltersRow.vue";
+import type { TableUrlFilter } from "../layers/dms-ui/app/build/components/table/Table.vue";
+import {
+  visibleUrlFilters,
+  withoutQueryParam,
+} from "../layers/dms-ui/app/build/composables/table-view/utils/urlFilters";
+
+describe("visibleUrlFilters", () => {
+  const declared = {
+    email: { field: "email", visible: true, label: "$app.email" },
+    template: { field: "templateSlug", mode: "is_not", visible: true },
+    tenant: { field: "tenantId" },
+  };
+
+  it("lists the visible filters the URL applies, hidden ones left out", () => {
+    expect(
+      visibleUrlFilters(declared, {
+        email: "a@b.test",
+        tenant: "t1",
+        page: "2",
+      }),
+    ).toEqual([
+      {
+        param: "email",
+        label: "$app.email",
+        accessorKey: "email",
+        mode: "is",
+        value: "a@b.test",
+      },
+    ]);
+    expect(visibleUrlFilters(declared, { template: "welcome" })).toEqual([
+      {
+        param: "template",
+        label: undefined,
+        accessorKey: "templateSlug",
+        mode: "is_not",
+        value: "welcome",
+      },
+    ]);
+    expect(visibleUrlFilters(undefined, { email: "a@b.test" })).toEqual([]);
+  });
+
+  it("removes one parameter from the query", () => {
+    expect(withoutQueryParam({ email: "a", tab: "all" }, "email")).toEqual({
+      tab: "all",
+    });
+  });
+});
+
+describe("filters row URL chips", () => {
+  let app: App | undefined;
+  const emits = vi.fn();
+
+  const mount = (urlFilters: TableUrlFilter[]) => {
+    const Host = defineComponent({
+      setup() {
+        provide(
+          "tableSharedData",
+          shallowRef({
+            columnFiltersState: ref([]),
+            labeledColumns: computed(() => [
+              {
+                column: { id: "templateSlug", columnDef: {} },
+                label: "Template",
+              },
+            ]),
+            clearableFilters: computed(() => ({
+              filters: false,
+              search: false,
+            })),
+            urlFilters,
+            emits,
+          }),
+        );
+        return () => h(TableFiltersRow);
+      },
+    });
+    app = createApp(Host);
+    const passthrough =
+      (tag: string): FunctionalComponent =>
+      (_props, { slots }) =>
+        h(tag, slots.default?.());
+    app.component("UPopover", passthrough("div"));
+    app.component("UButton", passthrough("button"));
+    app.component("UIcon", passthrough("i"));
+    app.component("Suspense", passthrough("div"));
+    const container = document.createElement("div");
+    app.mount(container);
+    return container;
+  };
+
+  beforeEach(() => {
+    emits.mockClear();
+    vi.stubGlobal("computed", computed);
+    vi.stubGlobal("ref", ref);
+    vi.stubGlobal("useI18n", () => ({
+      t: (key: string) => key,
+      locale: ref("en"),
+    }));
+    vi.stubGlobal("useTranslation", () => ({
+      processI18n: (text: string) =>
+        text.startsWith("$") ? `t:${text.slice(1)}` : text,
+    }));
+    vi.stubGlobal("useDmsAppConfig", () => ({
+      ui: { icons: { close: "i-close", plus: "i-plus" } },
+    }));
+    vi.stubGlobal("useDataTypes", () => ({ getDataType: () => undefined }));
+    vi.stubGlobal("isString", (value: unknown) => typeof value === "string");
+    vi.stubGlobal("resolveDmsComponent", () => undefined);
+  });
+
+  afterEach(() => {
+    app?.unmount();
+    app = undefined;
+    vi.unstubAllGlobals();
+  });
+
+  it("draws a chip per URL filter and asks to remove its parameter", async () => {
+    const container = mount([
+      {
+        param: "email",
+        label: "$app.email",
+        accessorKey: "email",
+        mode: "is",
+        value: "a@b.test",
+      },
+      {
+        param: "template",
+        accessorKey: "templateSlug",
+        mode: "is",
+        value: "welcome",
+      },
+    ]);
+    const chips = container.querySelectorAll("[data-dms-url-filter]");
+    expect(chips).toHaveLength(2);
+    expect(chips[0]!.textContent).toContain("t:app.email");
+    expect(chips[0]!.textContent).toContain("a@b.test");
+    expect(chips[1]!.textContent).toContain("Template");
+
+    chips[1]!.querySelector("button")!.click();
+    await nextTick();
+    expect(emits).toHaveBeenCalledWith("removeUrlFilter", "template");
+  });
+});

package/frontend-vue/tests/table-view-bulk-drawer.test.ts

@@ -13,6 +13,7 @@ import {
   rowNavigation,
 } from "../layers/dms-ui/app/build/composables/actions/rowNavigation";
 import {
+  deepLinkOutcome,
   readRecordId,
   recordUrlKey,
   writeRecordId,
@@ -130,6 +131,28 @@ describe("record deep links", () => {
     writeRecordId({ tableId: "runs", isSoleTableView: true });
     expect(window.location.search).toBe("?tab=open");
   });
+
+  it("notifies a link no row answers, unless a side panel shows it missing", () => {
+    const panel = {
+      target: { type: "sidePanel" },
+    } as unknown as CustomRowAction;
+    const drawer = {
+      target: { type: "drawer" },
+      deepLink: true,
+    } as unknown as CustomRowAction;
+    const row = { id: "r1" };
+    expect(deepLinkOutcome({ row, isMissing: false }, drawer)).toBe("open");
+    expect(deepLinkOutcome({ isMissing: true }, panel)).toBe("missingPanel");
+    expect(deepLinkOutcome({ isMissing: true }, drawer)).toBe("notify");
+    expect(deepLinkOutcome({ isMissing: false }, panel)).toBe("notify");
+    expect(deepLinkOutcome({ isMissing: false }, drawer)).toBe("notify");
+    expect(deepLinkOutcome({ isMissing: false, isFailed: true }, panel)).toBe(
+      "notifyFailed",
+    );
+    expect(deepLinkOutcome({ isMissing: false, isFailed: true }, drawer)).toBe(
+      "notifyFailed",
+    );
+  });
 });
 
 describe("action targets on a selection and on a listed row", () => {

package/frontend-vue/tests/table-view-url-tab.test.ts

@@ -0,0 +1,115 @@
+// @vitest-environment jsdom
+/**
+ * A table view opens the tab its URL names (`?<tableId>.tab=`, or `?tab=` on
+ * a page with a single table view), on arrival and afterwards: a link or a
+ * `router.replace` naming another tab switches to it in place, without
+ * remounting the page.
+ */
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { createApp, defineComponent, h, nextTick, reactive, ref } from "vue";
+import { afterEach, describe, expect, it } from "vitest";
+import {
+  readTableUrlTab,
+  useTableUrlTab,
+} from "../layers/dms-ui/app/build/composables/table-view/useTableUrlTab";
+import type { TableUrlScope } from "../layers/dms-ui/app/build/composables/table-view/utils/views";
+
+const OPENABLE_TABS = new Set(["all", "active", "archived"]);
+const mounted: Array<{ unmount: () => void }> = [];
+
+function mountTable(scope: TableUrlScope, query: Record<string, string>) {
+  const route = reactive({ query });
+  const activeTabId = ref(readTableUrlTab(route.query, scope) ?? "all");
+  const app = createApp(
+    defineComponent({
+      setup() {
+        useTableUrlTab({
+          route,
+          urlScope: scope,
+          activeTabId,
+          isOpenable: (tabId) => OPENABLE_TABS.has(tabId),
+        });
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  mounted.push(app);
+  return { route, activeTabId };
+}
+
+afterEach(() => {
+  mounted.splice(0).forEach((app) => app.unmount());
+});
+
+describe("the tab a URL names", () => {
+  it("opens on arrival", () => {
+    const { activeTabId } = mountTable(
+      { tableId: "runs" },
+      { "runs.tab": "active" },
+    );
+    expect(activeTabId.value).toBe("active");
+  });
+
+  it("switches the tab when the prefixed key changes after mount", async () => {
+    const { route, activeTabId } = mountTable({ tableId: "runs" }, {});
+    route.query = { "runs.tab": "archived" };
+    await nextTick();
+    expect(activeTabId.value).toBe("archived");
+  });
+
+  it("follows the short key on a page with a single table view", async () => {
+    const { route, activeTabId } = mountTable(
+      { tableId: "runs", isSoleTableView: true },
+      { tab: "active" },
+    );
+    expect(activeTabId.value).toBe("active");
+    route.query = { tab: "archived" };
+    await nextTick();
+    expect(activeTabId.value).toBe("archived");
+  });
+
+  it("ignores the short key on a page with several table views", async () => {
+    const { route, activeTabId } = mountTable({ tableId: "runs" }, {});
+    route.query = { tab: "archived" };
+    await nextTick();
+    expect(activeTabId.value).toBe("all");
+  });
+
+  it("keeps the open tab when the key is dropped or unknown", async () => {
+    const { route, activeTabId } = mountTable(
+      { tableId: "runs" },
+      { "runs.tab": "active" },
+    );
+    route.query = {};
+    await nextTick();
+    expect(activeTabId.value).toBe("active");
+    route.query = { "runs.tab": "missing" };
+    await nextTick();
+    expect(activeTabId.value).toBe("active");
+  });
+
+  it("lets the user change tabs while the URL stays put", async () => {
+    const { route, activeTabId } = mountTable(
+      { tableId: "runs" },
+      { "runs.tab": "active" },
+    );
+    activeTabId.value = "archived";
+    route.query = { "runs.tab": "active", other: "1" };
+    await nextTick();
+    expect(activeTabId.value).toBe("archived");
+  });
+});
+
+it("wires the URL tab into the table view", () => {
+  const source = readFileSync(
+    resolve(
+      __dirname,
+      "../layers/dms-ui/app/components/table-view/TableView.vue",
+    ),
+    "utf8",
+  );
+  expect(source).toContain("readTableUrlTab(route.query, urlScope)");
+  expect(source).toContain("useTableUrlTab({");
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antelopejs/dms",
-  "version": "0.7.14",
+  "version": "0.7.16",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/AntelopeJS/dms.git"
@@ -37,7 +37,7 @@
     "@antelopejs/interface-data-api": ">=0.2.0 <1.0.0",
     "@antelopejs/interface-database": ">=0.1.8 <1.0.0",
     "@antelopejs/interface-database-decorators": ">=0.1.7 <1.0.0",
-    "@antelopejs/interface-dms": ">=0.5.9 <0.6.0",
+    "@antelopejs/interface-dms": ">=0.5.11 <0.6.0",
     "@antelopejs/interface-email": ">=0.0.5 <1.0.0",
     "@antelopejs/interface-file-storage": ">=0.1.3 <1.0.0",
     "archiver": "^7.0.1",

package/skills/dms-pages/REFERENCE.md

@@ -39,7 +39,12 @@ A page's `headerActions` follow its URL: a target URL takes `{{params.X}}` / `{{
 (`?workspace={{query.workspace}}`, a pair the page has no value for is dropped), and an
 `availability` reads `context.query`, asked again when the query changes — no need to build
 the header in Vue with `usePageHeaderActions` to carry the scope —
-`docs/07.interfaces/3.base/6.layout.md#buttons-that-follow-the-page-url`.
+`docs/07.interfaces/3.base/6.layout.md#buttons-that-follow-the-page-url`. An `availability`
+answering `{ hidden: true }` leaves the button out for that query (`{ reason }` only
+disables it): no Vue header to hide "Add key" on a read-only workspace. `order` on a
+header button and `usePageHeaderActions(render, { order })` interleave served buttons with a
+component's client-side ones (default `0`, served first on a tie: `order: -1` puts a Vue
+"Export" before a served "Add key") — `docs/07.interfaces/3.base/6.layout.md#ordering-the-header`.
 
 A button or row action (`customButtons`, `rowActions.custom`, a page's `headerActions`)
 points at an `ActionTarget`. A `drawer` target opens from the bottom; give it