@antelopejs/dms 0.7.12 → 0.7.14

package/frontend-vue/layers/dms-ui/app/build/composables/actions/useActionTargets.ts

@@ -48,10 +48,36 @@ import {
   dispatchQuickActionTarget,
   findServedQuickAction,
 } from "../../utils/dispatchQuickActionTarget";
+import {
+  hasUrlVariables,
+  resolveLinkVariables,
+} from "../../utils/urlVariables";
 
 /** Runs a confirmed action from inside its dialog (see `onConfirm`). */
 type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
 
+/**
+ * A link target's URL with the page's `{{params.X}}` / `{{query.X}}` filled
+ * (a query pair without a value left out), then the row's `{field}`: a row
+ * action keeps the page's context (`?website={{query.website}}`) as a page
+ * header button does. Read when the link is followed, so it carries the URL
+ * as it is then.
+ */
+function linkTargetUrl(url: string, rowData?: Data): string {
+  const withPageValues = hasUrlVariables(url)
+    ? resolveLinkVariables(url, currentPageUrlValues())
+    : url;
+  return rowData ? interpolateUrl(withPageValues, rowData) : withPageValues;
+}
+
+function currentPageUrlValues() {
+  const route = useDmsRoute();
+  return {
+    routeParams: useSiteLayout().findMatchingRoute(route.path)?.params,
+    routeQuery: route.query as Record<string, unknown>,
+  };
+}
+
 /** Where the buttons run: the requests they send, what they refresh. */
 export interface ActionTargetsConfig {
   api: ReturnType<typeof $fetch.create>;
@@ -410,16 +436,11 @@ export function useActionTargets(config: ActionTargetsConfig) {
   const targetHandlers: Record<string, TargetHandler> = {
     page: (target, _label, rowData) => {
       const pageTarget = target as ActionTarget & { type: "page" };
-      const url = rowData
-        ? interpolateUrl(pageTarget.url, rowData)
-        : pageTarget.url;
-      navigateDms(url);
+      navigateDms(linkTargetUrl(pageTarget.url, rowData));
     },
     external: (target, _label, rowData) => {
       const externalTarget = target as ActionTarget & { type: "external" };
-      const url = rowData
-        ? interpolateUrl(externalTarget.url, rowData)
-        : externalTarget.url;
+      const url = linkTargetUrl(externalTarget.url, rowData);
       if (typeof window === "undefined" || !url) return;
       if (externalTarget.newTab) {
         window.open(url, "_blank", "noopener,noreferrer");

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/confirmTextMatch.ts

@@ -0,0 +1,16 @@
+/**
+ * Whether what the user typed confirms a type-to-confirm dialog: the text,
+ * trimmed, equal to `confirmText` — ignoring case when asked, in the
+ * reader's locale rules (`acme` matches `ACME`).
+ */
+export function isConfirmTextMatch(
+  typed: string,
+  confirmText: string,
+  isCaseInsensitive = false,
+): boolean {
+  const text = typed.trim();
+  if (!isCaseInsensitive) return text === confirmText;
+  return (
+    text.localeCompare(confirmText, undefined, { sensitivity: "accent" }) === 0
+  );
+}

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

@@ -0,0 +1,53 @@
+/** The bounds a number field takes. */
+export interface NumberBounds {
+  min?: number;
+  max?: number;
+}
+
+/** Whether a number field's steppers can still move its value. */
+export interface NumberStepperState {
+  incrementDisabled: boolean;
+  decrementDisabled: boolean;
+}
+
+export const BELOW_MIN_MESSAGE = "$dms.field_errors.too_small";
+export const ABOVE_MAX_MESSAGE = "$dms.field_errors.too_large";
+
+function isNumberValue(value: unknown): value is number {
+  return typeof value === "number" && !Number.isNaN(value);
+}
+
+/**
+ * The error of a value outside its bounds, for a field that keeps what was
+ * typed instead of clamping it; `undefined` when it is in range or empty.
+ */
+export function numberRangeError(
+  value: unknown,
+  bounds: NumberBounds,
+): string | undefined {
+  if (!isNumberValue(value)) return undefined;
+  if (bounds.min !== undefined && value < bounds.min) return BELOW_MIN_MESSAGE;
+  if (bounds.max !== undefined && value > bounds.max) return ABOVE_MAX_MESSAGE;
+  return undefined;
+}
+
+/**
+ * The steppers of a field that does not hand its bounds to the input: they
+ * stop at the bounds the input no longer knows of.
+ */
+export function numberStepperState(
+  value: unknown,
+  bounds: NumberBounds,
+): NumberStepperState {
+  const current = isNumberValue(value) ? value : undefined;
+  return {
+    incrementDisabled:
+      current !== undefined &&
+      bounds.max !== undefined &&
+      current >= bounds.max,
+    decrementDisabled:
+      current !== undefined &&
+      bounds.min !== undefined &&
+      current <= bounds.min,
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodQuery.ts

@@ -7,6 +7,12 @@ import {
   type PeriodPreset,
   type PeriodRange,
 } from "#dms-core/app/composables/period/types";
+import type { PeriodQueryKeys } from "#dms-core/app/composables/period/periodLink";
+
+export {
+  type PeriodQueryKeys,
+  periodQueryKeys,
+} from "#dms-core/app/composables/period/periodLink";
 
 /** The range half of a selector's choice: a preset, or a custom range. */
 export interface PeriodRangeChoice {
@@ -34,16 +40,6 @@ export interface PeriodChoices {
 /** A page URL query, or a selection kept in the preferences. */
 export type PeriodQuery = Record<string, unknown>;
 
-/** The keys one selector reads and writes. */
-export interface PeriodQueryKeys {
-  period: string;
-  compare: string;
-  from: string;
-  to: string;
-  compareFrom: string;
-  compareTo: string;
-}
-
 /** A source the halves of a selection are read from, in order. */
 export interface PeriodSource {
   query: PeriodQuery;
@@ -57,31 +53,12 @@ export interface PeriodSource {
 
 const CUSTOM_PRESET: PeriodPreset = "custom";
 const CUSTOM_COMPARISON: PeriodComparison = "custom";
-const KEY_NAMES: Array<keyof PeriodQueryKeys> = [
-  "period",
-  "compare",
-  "from",
-  "to",
-  "compareFrom",
-  "compareTo",
-];
 const ISO_DATE = /^(\d{4})-(\d{2})-(\d{2})$/;
 const ISO_DATE_TIME = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}/;
 const MONTH_OFFSET = 1;
 const DATE_PART_LENGTH = 2;
 const YEAR_PART_LENGTH = 4;
 
-/**
- * The keys of selector `id` in the page URL (`<id>.period`), or the bare keys
- * (`period`) of a selection kept on its own.
- */
-export function periodQueryKeys(id?: string): PeriodQueryKeys {
-  const prefix = id ? `${id}.` : "";
-  return Object.fromEntries(
-    KEY_NAMES.map((name) => [name, `${prefix}${name}`]),
-  ) as unknown as PeriodQueryKeys;
-}
-
 function readText(query: PeriodQuery, key: string): string | undefined {
   const raw = query[key];
   const value = Array.isArray(raw) ? raw[0] : raw;

package/frontend-vue/layers/dms-ui/app/build/utils/urlVariables.ts

@@ -120,9 +120,12 @@ export function resolveTextVariables(
   return hasUrlVariables(resolved) ? undefined : resolved;
 }
 
-// A route token left without a value: `{{params.id}}`, `{{query.workspace}}`.
-const UNRESOLVED_ROUTE_TOKEN = /\{\{(?:params|query)\.\w+(?::\d+)?\}\}/g;
-const UNRESOLVED_ROUTE_VALUE = /^\{\{(?:params|query)\.\w+(?::\d+)?\}\}$/;
+// A route token left without a value: `{{params.id}}`, `{{query.workspace}}`,
+// `{{query.sales.period}}` (a query key may carry dots and dashes, as above).
+const UNRESOLVED_ROUTE_TOKEN =
+  /\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}/g;
+const UNRESOLVED_ROUTE_VALUE =
+  /^\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}$/;
 const QUERY_SEPARATOR = "?";
 const FRAGMENT_SEPARATOR = "#";
 const PAIR_SEPARATOR = "&";

package/frontend-vue/layers/dms-ui/app/components/chart/ChartCard.vue

@@ -29,6 +29,7 @@ interface Props extends DefaultComponentProps {
   fetchUrl?: string;
   fetchUrlMethod?: string;
   periodScope?: string;
+  realtimeTopic?: string | string[];
   valueFormat?: ValueFormat;
   currencyCode?: string;
   valuePrecision?: ValuePrecision;
@@ -74,6 +75,7 @@ const { data, isLoading } = useChartFetch<ChartCardResponse>({
   fetchUrlMethod: props.fetchUrlMethod,
   routeParams: () => props.routeParams,
   periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
   watchSource: () => watchKey.value,
 });
 

package/frontend-vue/layers/dms-ui/app/components/confirm/ConfirmModal.vue

@@ -3,7 +3,7 @@ import { nextTick, useTemplateRef, watch, type FunctionalComponent } from "vue";
 import { DialogDescription, DialogTitle } from "reka-ui";
 import DmsIconWell from "../icon-well/IconWell.vue";
 import DmsModalEscHint from "../../build/components/modal/ModalEscHint.vue";
-import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
+import DmsFormRequiredLegend from "../form/FormRequiredLegend.vue";
 import {
   ConfirmActionError,
   type ConfirmBodyRender,
@@ -17,6 +17,7 @@ import {
   type ConfirmValues,
 } from "../../composables/confirm/types";
 import { resolveActionError } from "../../build/composables/confirm/actionError";
+import { isConfirmTextMatch } from "../../build/composables/confirm/confirmTextMatch";
 import type { ConfirmDialogField } from "#dms-core/app/types/confirm-dialog";
 import { resolveFieldErrors } from "#dms-core/app/composables/useFieldErrors";
 
@@ -46,6 +47,8 @@ interface ConfirmModalProps {
    * empty or different flags it under the field instead.
    */
   confirmText?: string;
+  /** Compares the typed text with `confirmText` ignoring case. */
+  confirmTextCaseInsensitive?: boolean;
   /**
    * Fields filled in before confirming (labels resolved); their values reach
    * `onConfirm`, and a field error it rejects with shows under its field.
@@ -92,6 +95,7 @@ const props = withDefaults(defineProps<ConfirmModalProps>(), {
   impact: () => [],
   body: undefined,
   confirmText: undefined,
+  confirmTextCaseInsensitive: false,
   fields: () => [],
   component: undefined,
   secondaryAction: undefined,
@@ -225,7 +229,13 @@ const modalContent = computed(() =>
 );
 
 const isTypedMatch = computed(
-  () => !props.confirmText || typedText.value.trim() === props.confirmText,
+  () =>
+    !props.confirmText ||
+    isConfirmTextMatch(
+      typedText.value,
+      props.confirmText,
+      props.confirmTextCaseInsensitive,
+    ),
 );
 
 function close(value: boolean) {

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

@@ -66,7 +66,7 @@ import {
   type FormRecordLoad,
   trackFormRecordLoad,
 } from "../../build/composables/form/formRecordLoad";
-import DmsFormRequiredLegend from "../../build/components/form/FormRequiredLegend.vue";
+import DmsFormRequiredLegend from "./FormRequiredLegend.vue";
 import DmsFormSections from "../../build/components/form/FormSections.vue";
 
 const REALTIME_PRESENCE_FLAG = "_presence=1";

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

@@ -4,9 +4,14 @@ import type {
   InputNumberEmits,
   InputNumberSlots,
 } from "@nuxt/ui/components/InputNumber.vue";
-import { computed, nextTick } from "vue";
+import { computed, nextTick, watch } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
 import { useControlError } from "../../../build/composables/form/useControlError";
+import {
+  BELOW_MIN_MESSAGE,
+  numberRangeError,
+  numberStepperState,
+} from "../../../build/composables/form/numberRange";
 import {
   numberAdjustment,
   parseTypedNumber,
@@ -18,6 +23,11 @@ defineOptions({ inheritAttrs: false });
 interface InputNumberFieldProps extends InputNumberProps {
   /** Unit after the field ("days"): an i18n key with `$`, or a literal. */
   suffix?: string;
+  /**
+   * `false` keeps a value typed outside `min` / `max` as typed and reports
+   * it as the field's error, instead of clamping it into range on blur.
+   */
+  clamp?: boolean;
 }
 
 interface InputNumberAdjustEmits {
@@ -30,14 +40,29 @@ interface InputNumberAdjustEmits {
 
 type InputNumberFieldEmits = InputNumberEmits & InputNumberAdjustEmits;
 
-const props = defineProps<InputNumberFieldProps>();
+const props = withDefaults(defineProps<InputNumberFieldProps>(), {
+  clamp: true,
+});
 const emits = defineEmits<InputNumberFieldEmits>();
 defineSlots<InputNumberSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
+const bounds = computed(() => ({ min: props.min, max: props.max }));
+// Unclamped, the input is not told the bounds (it would clamp to them on
+// blur): its steppers stop there instead, and the range is checked here.
 const inputProps = computed(() => {
-  const { suffix: _suffix, onAdjust: _onAdjust, ...rest } = forwarded.value;
-  return rest;
+  const {
+    suffix: _suffix,
+    clamp: _clamp,
+    onAdjust: _onAdjust,
+    ...rest
+  } = forwarded.value;
+  if (props.clamp) return rest;
+  const { min: _min, max: _max, ...unbounded } = rest;
+  return {
+    ...unbounded,
+    ...numberStepperState(props.modelValue, bounds.value),
+  };
 });
 const { processI18n } = useTranslation();
 const { locale } = useI18n();
@@ -48,16 +73,25 @@ const DEFAULT_ORIENTATION = "vertical";
 // A minus typed or pasted where no negative number is allowed is refused
 // by the field before it shows: it says why, rather than leaving an emptied
 // field to read as never filled.
-const BELOW_MIN = "$dms.field_errors.too_small";
 const { report } = useControlError();
 
 function onIncomingText(event: InputEvent): void {
+  if (!props.clamp) return;
   const text = event.data ?? event.dataTransfer?.getData("text/plain") ?? "";
   if (!text) return;
   const refusesNegative = props.min !== undefined && props.min >= 0;
-  report(refusesNegative && text.includes("-") ? BELOW_MIN : undefined);
+  report(refusesNegative && text.includes("-") ? BELOW_MIN_MESSAGE : undefined);
 }
 
+watch(
+  () =>
+    props.clamp ? undefined : numberRangeError(props.modelValue, bounds.value),
+  (message) => {
+    if (!props.clamp) report(message);
+  },
+  { immediate: true },
+);
+
 // What was typed since the field last settled, and the value it settled on.
 let typedText: string | null = null;
 let settledValue: number | null | undefined;
@@ -87,7 +121,12 @@ async function settle(event: Event): Promise<void> {
   await nextTick();
   const typed = parseTypedNumber(text, props.locale ?? locale.value);
   const kept = settledValue === undefined ? props.modelValue : settledValue;
-  const adjustment = numberAdjustment(typed, kept, props);
+  const adjustment = numberAdjustment(
+    typed,
+    kept,
+    // Unclamped, only the step changes what was typed.
+    props.clamp ? bounds.value : {},
+  );
   if (!adjustment) return;
   emits("adjust", adjustment);
   redraw(input);

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

@@ -14,6 +14,10 @@ import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { formatValue } from "../../composables/chart/formatValue";
 import { resolveSparklineAccent } from "../../composables/chart/resolveSparklineAccent";
 import { usePeriodScope } from "#dms-core/app/composables/period/usePeriodScope";
+import {
+  hasUrlVariables,
+  resolveLinkVariables,
+} from "../../build/utils/urlVariables";
 import type {
   TopListCardResponse,
   TopListItem,
@@ -30,6 +34,7 @@ interface Props extends DefaultComponentProps {
   fetchUrl?: string;
   fetchUrlMethod?: string;
   periodScope?: string;
+  realtimeTopic?: string | string[];
   valueFormat?: ValueFormat;
   currencyCode?: string;
   valuePrecision?: ValuePrecision;
@@ -120,11 +125,28 @@ const { data, isLoading } = useChartFetch<TopListCardResponse>({
   fetchUrlMethod: props.fetchUrlMethod,
   routeParams: () => props.routeParams,
   periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
   staticData: () => staticData.value,
   watchSource: () => watchKey.value,
 });
 
-const items = computed<TopListItem[]>(() => data.value?.items ?? []);
+// A row's link may name the page it is shown on (`{{query.website}}`), so a
+// list served once leads on with the page's own context, as the URL changes.
+// The route is only read for a list holding such a link.
+function withPageValues(item: TopListItem): TopListItem {
+  if (!item.to || !hasUrlVariables(item.to)) return item;
+  return {
+    ...item,
+    to: resolveLinkVariables(item.to, {
+      routeParams: props.routeParams,
+      routeQuery: useDmsRoute().query as Record<string, unknown>,
+    }),
+  };
+}
+
+const items = computed<TopListItem[]>(() =>
+  (data.value?.items ?? []).map(withPageValues),
+);
 const hasAnyIcon = computed(() =>
   items.value.some((item) => Boolean(item.icon || item.avatar)),
 );

package/frontend-vue/layers/dms-ui/app/composables/confirm/index.ts

@@ -1,3 +1,4 @@
 export * from "./types";
 export * from "./useConfirm";
+export * from "./useConfirmFrom";
 export * from "./usePresenceEditWarning";

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

@@ -70,6 +70,26 @@ export interface ConfirmOptions
   ) => Promise<void | boolean | ConfirmPartialOutcome>;
 }
 
+/**
+ * How `useConfirmFrom().confirmFrom(url, options)` asks a dialog the server
+ * words, as a declarative action's `confirm: { from }` does.
+ */
+export interface ConfirmFromOptions {
+  /**
+   * Fill-ins of the URL's `{placeholders}` and of the dialog's texts (a
+   * record's fields); the dialog's own `params` win in its texts.
+   */
+  params?: Record<string, unknown>;
+  /** What the dialog leaves out (a colour, an icon, a confirm label). */
+  fallback?: Partial<ConfirmOptions>;
+  /**
+   * Runs the action from inside the dialog with its fields' values, as
+   * {@link ConfirmOptions.onConfirm}; left out, run it once `confirmFrom`
+   * resolved `true`.
+   */
+  onConfirm?: ConfirmOptions["onConfirm"];
+}
+
 /** A secondary button of the confirm modal: its text resolved, its handler. */
 export interface ConfirmSecondaryAction {
   label: string;

package/frontend-vue/layers/dms-ui/app/composables/confirm/useConfirmFrom.ts

@@ -0,0 +1,32 @@
+import { useActionConfirm } from "../../build/composables/confirm/useActionConfirm";
+import type { ConfirmFromOptions } from "./types";
+
+/**
+ * Opens the confirmation dialog a route words (a `ConfirmDialogSerialized`,
+ * see `serializeConfirmDialog`), as a declarative action's
+ * `confirm: { from }` does: the URL is read, its texts resolved, then the
+ * standard confirm dialog shown. A failed read is a toast and resolves
+ * `false`.
+ *
+ * @returns `confirmFrom(url, options)`, resolving `true` when the user
+ *   confirmed — never for a `blocked` dialog, which only explains
+ */
+export function useConfirmFrom() {
+  const { confirmAction } = useActionConfirm();
+
+  function confirmFrom(
+    from: string,
+    options: ConfirmFromOptions = {},
+  ): Promise<boolean> {
+    return confirmAction(
+      { from },
+      {
+        row: options.params,
+        fallback: options.fallback,
+        run: options.onConfirm,
+      },
+    );
+  }
+
+  return { confirmFrom };
+}

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

@@ -721,10 +721,10 @@ export const useForm = (props: FormProps, options: UseFormOptions = {}) => {
         // them: the field shows which ones to fix.
         message: entry.values?.length
           ? t("dms.field_errors.with_values", {
-              message: processApiMessage(entry.message),
+              message: processApiMessage(entry.message, entry.params),
               values: entry.values.join(", "),
             })
-          : processApiMessage(entry.message),
+          : processApiMessage(entry.message, entry.params),
         values: entry.values,
         path: entry.path,
       })),

package/frontend-vue/tests/block-fetch-options-forwarding.test.ts

@@ -49,6 +49,8 @@ const BLOCKS: Record<string, string> = {
   ActivityFeed:
     "../layers/dms-ui/app/components/activity-feed/ActivityFeed.vue",
   MeterBlock: "../layers/dms-ui/app/components/meter/MeterBlock.vue",
+  ChartCard: "../layers/dms-ui/app/components/chart/ChartCard.vue",
+  TopListCard: "../layers/dms-ui/app/components/top-list/TopListCard.vue",
 };
 const GLOBAL_COMPONENTS = ["DmsCard", "UIcon", "USkeleton", "UButton", "ULink"];
 const SCOPE = "dashboard";
@@ -81,6 +83,9 @@ beforeEach(() => {
   vi.stubGlobal("useI18n", () => ({ locale: ref("en-GB"), t: String }));
   vi.stubGlobal("useTranslation", () => ({ processI18n: String }));
   vi.stubGlobal("useDmsCookie", () => ref<string[]>([]));
+  // The cards reach these through auto-imports rather than imports.
+  vi.stubGlobal("useComponentEvent", () => ({}));
+  vi.stubGlobal("useWatch", () => ({ state: ref({}) }));
 });
 
 afterEach(() => vi.unstubAllGlobals());

package/frontend-vue/tests/breadcrumb-target.test.ts

@@ -18,6 +18,16 @@ describe("buildBreadcrumbTarget", () => {
     expect(buildBreadcrumbTarget("/projects", {}, {})).to.equal(undefined);
   });
 
+  it("links a module's root to the module's landing page", () => {
+    expect(
+      buildBreadcrumbTarget(
+        "/modules/api",
+        { landingSlug: "/modules/api/overview" },
+        {},
+      ),
+    ).to.equal("/modules/api/overview");
+  });
+
   it("carries only the query values an ancestor page requires", () => {
     expect(
       buildBreadcrumbTarget("/projects/project", PROJECT_PAGE, {

package/frontend-vue/tests/confirm-from.test.ts

@@ -0,0 +1,101 @@
+// @vitest-environment jsdom
+/**
+ * `useConfirmFrom().confirmFrom(url)` opens the dialog a route words, as a
+ * declarative action's `confirm: { from }` does, for code of a module's own
+ * (a custom page, a block's button).
+ */
+import { createApp, defineComponent, h, type App } from "vue";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+import { interpolateUrl } from "../layers/dms-core/app/utils/url-interpolation";
+import { useConfirmFrom } from "../layers/dms-ui/app/composables/confirm/useConfirmFrom";
+import { isConfirmTextMatch } from "../layers/dms-ui/app/build/composables/confirm/confirmTextMatch";
+
+const authFetch = vi.fn();
+const confirm = vi.fn(async () => true);
+const addToast = vi.fn();
+let app: App | undefined;
+
+function mountConfirmFrom() {
+  let api: ReturnType<typeof useConfirmFrom> | undefined;
+  app = createApp(
+    defineComponent({
+      setup() {
+        api = useConfirmFrom();
+        return () => h("div");
+      },
+    }),
+  );
+  app.mount(document.createElement("div"));
+  return api!;
+}
+
+beforeEach(() => {
+  authFetch.mockReset();
+  confirm.mockClear();
+  addToast.mockClear();
+  const fetch = Object.assign(authFetch, { raw: vi.fn() });
+  vi.stubGlobal("useAuthFetch", () => ({ $authFetch: fetch }));
+  vi.stubGlobal("useConfirm", () => ({ confirm }));
+  vi.stubGlobal("useToast", () => ({ add: addToast }));
+  vi.stubGlobal("useI18n", () => ({
+    t: (key: string, params?: Record<string, unknown>) =>
+      params?.name ? `${key}(${String(params.name)})` : key,
+  }));
+  vi.stubGlobal("interpolateUrl", interpolateUrl);
+  vi.stubGlobal("Color", { error: "error" });
+});
+
+afterEach(() => {
+  app?.unmount();
+  app = undefined;
+  vi.unstubAllGlobals();
+});
+
+describe("confirmFrom", () => {
+  it("reads the dialog from the URL filled with the params and shows it", async () => {
+    authFetch.mockResolvedValue({
+      title: "$campaigns.delete_title",
+      color: "error",
+    });
+    const onConfirm = vi.fn(async () => undefined);
+    const confirmed = await mountConfirmFrom().confirmFrom(
+      "/api/campaigns/{id}/delete-confirm",
+      {
+        params: { id: "c1", name: "Spring" },
+        fallback: { icon: "i-ph-trash" },
+        onConfirm,
+      },
+    );
+    expect(confirmed).toBe(true);
+    expect(authFetch).toHaveBeenCalledWith("/api/campaigns/c1/delete-confirm");
+    expect(confirm).toHaveBeenCalledWith(
+      expect.objectContaining({
+        title: "campaigns.delete_title(Spring)",
+        color: "error",
+        icon: "i-ph-trash",
+        onConfirm,
+      }),
+    );
+  });
+
+  it("never resolves true for a blocked dialog", async () => {
+    authFetch.mockResolvedValue({ title: "Cannot delete", blocked: true });
+    expect(await mountConfirmFrom().confirmFrom("/api/x")).toBe(false);
+  });
+
+  it("toasts a failed read and resolves false", async () => {
+    authFetch.mockRejectedValue(new Error("down"));
+    expect(await mountConfirmFrom().confirmFrom("/api/x")).toBe(false);
+    expect(confirm).not.toHaveBeenCalled();
+    expect(addToast).toHaveBeenCalledOnce();
+  });
+});
+
+describe("isConfirmTextMatch", () => {
+  it("compares the trimmed text, ignoring case only when asked", () => {
+    expect(isConfirmTextMatch(" ACME ", "ACME")).toBe(true);
+    expect(isConfirmTextMatch("acme", "ACME")).toBe(false);
+    expect(isConfirmTextMatch("acme", "ACME", true)).toBe(true);
+    expect(isConfirmTextMatch("acmé", "ACME", true)).toBe(false);
+  });
+});