@antelopejs/dms 0.4.4 → 0.4.6

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

@@ -40,7 +40,9 @@
     "soon": "Bientôt disponible"
   },
   "quickActions": {
-    "title": "Actions rapides"
+    "title": "Actions rapides",
+    "category_members": "Membres",
+    "invite_member": "Inviter un membre"
   },
   "commandPalette": {
     "button": "Rechercher…",
@@ -222,7 +224,8 @@
           "cancel_confirm_description": "Êtes-vous sûr de vouloir annuler cette invitation ? Le lien d'invitation ne fonctionnera plus."
         },
         "error": {
-          "not_found": "Invitation introuvable"
+          "not_found": "Invitation introuvable",
+          "resolved": "Cette invitation a déjà été acceptée ou annulée"
         }
       },
       "roles": {
@@ -273,5 +276,21 @@
     "intro": "Parcourez les modules disponibles sur cette plateforme.",
     "empty": "Aucun module ne vous est accessible pour le moment.",
     "open": "Ouvrir le module"
+  },
+  "emails": {
+    "admin_invite": {
+      "title": "Vous êtes invité !",
+      "title_workspace": "Vous êtes invité à rejoindre {workspace}",
+      "greeting": "Bonjour,",
+      "invitation": "Vous avez été invité à rejoindre notre plateforme.",
+      "invitation_to_target": "Vous avez été invité à rejoindre {target}.",
+      "invitation_from_inviter": "{inviter} vous invite à rejoindre {target}.",
+      "workspace_on_platform": "{workspace} sur {platform}",
+      "call_to_action": "Cliquez sur le bouton ci-dessous pour créer votre compte :",
+      "button": "Créer mon compte",
+      "expires_label": "Cette invitation expire dans",
+      "expires_in": "{days} jours",
+      "footer": "Si vous n'attendiez pas cette invitation, vous pouvez ignorer cet e-mail."
+    }
   }
 }

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

@@ -1 +1 @@
-export * from "./useOnboardingMiddleware";
+export * from "./useOnboarding";

package/frontend-vue/layers/dms-onboarding/app/composables/onboarding/{useOnboardingMiddleware.ts → useOnboarding.ts}

@@ -37,15 +37,3 @@ export const setOnboardingComplete = () => {
   );
   cache.value = { hasOnboarded: true };
 };
-
-export const useOnboardingMiddleware = async () => {
-  const { hasOnboarded } = await useOnboarding();
-
-  if (!hasOnboarded) return;
-
-  throw createError({
-    statusCode: HTTP_PRECONDITION_FAILED,
-    statusMessage: "Invalid request",
-    message: "Onboarding already completed",
-  });
-};

package/frontend-vue/layers/dms-onboarding/app/custom-pages/onboarding.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import Register from "../components/onboarding/steps/register.vue";
 
-await useOnboardingMiddleware();
+// A custom page runs the global middleware only once it declares its meta:
+// that is what lets the onboarding middleware send a visitor away from a
+// wizard that is already finished, on a direct load as on a navigation.
+defineDmsPageMeta({});
 </script>
 
 <template>

package/frontend-vue/layers/dms-onboarding/app/middleware/onboarding.global.ts

@@ -1,6 +1,16 @@
+const ONBOARDING_PATH = "/onboarding";
+const LOGIN_PATH = "/auth";
+
+// Where a visit to the finished wizard lands: the app for a signed-in user, the
+// login page for anyone else rather than a homepage whose 401 would bounce
+// them there anyway.
+function completedOnboardingDestination(): string {
+  const { loggedIn } = useUserSession();
+  return loggedIn.value ? useHomepage() : LOGIN_PATH;
+}
+
 export default defineDmsMiddleware(async (to) => {
-  // The onboarding wizard itself must always be reachable so it can render.
-  if (to.path.startsWith("/onboarding")) return;
+  const isOnboardingRoute = to.path.startsWith(ONBOARDING_PATH);
 
   // While the instance has no admin yet, funnel every route to the onboarding
   // wizard. Running as a global middleware (instead of a plugin) lets this take
@@ -11,11 +21,18 @@ export default defineDmsMiddleware(async (to) => {
   try {
     info = await useOnboarding();
   } catch {
-    // If the onboarding status can't be resolved, don't block navigation.
+    // If the onboarding status can't be resolved, don't block navigation: the
+    // wizard stays reachable, and it is its own register call that refuses a
+    // second admin.
     return;
   }
 
+  if (isOnboardingRoute) {
+    if (!info.hasOnboarded) return;
+    return navigateDms(completedOnboardingDestination(), { replace: true });
+  }
+
   if (info.hasOnboarded) return;
 
-  return navigateDms("/onboarding");
+  return navigateDms(ONBOARDING_PATH);
 });

package/frontend-vue/layers/dms-ui/app/build/components/containers/drawer/DynamicDrawer.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Component } from "vue";
+import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
 
 type DrawerDirection = "top" | "bottom" | "left" | "right";
 
@@ -82,15 +83,24 @@ function onContentResolve() {
       <!-- Same container as the body so the title aligns with the form -->
       <UContainer class="flex w-full flex-1 items-center justify-between gap-4">
         <div v-if="headerComponent" class="flex-1">
+          <VisuallyHidden>
+            <DialogTitle>{{ title }}</DialogTitle>
+            <DialogDescription>{{ description }}</DialogDescription>
+          </VisuallyHidden>
           <Suspense>
             <component :is="headerComponent" v-bind="headerComponentOptions" />
           </Suspense>
         </div>
         <div v-else class="flex-1">
-          <h2 class="text-highlighted font-semibold">{{ title }}</h2>
-          <p v-if="description" class="text-muted text-sm">
+          <DialogTitle as="h2" class="text-highlighted font-semibold">
+            {{ title }}
+          </DialogTitle>
+          <DialogDescription v-if="description" class="text-muted text-sm">
             {{ description }}
-          </p>
+          </DialogDescription>
+          <VisuallyHidden v-else>
+            <DialogDescription />
+          </VisuallyHidden>
         </div>
         <UButton
           icon="i-lucide-x"

package/frontend-vue/layers/dms-ui/app/build/components/containers/modal/DynamicModal.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Component } from "vue";
+import { DialogDescription, DialogTitle, VisuallyHidden } from "reka-ui";
 import type { ModalSize } from "../../../../types/modal";
 
 interface DynamicModalProps {
@@ -98,15 +99,24 @@ function onContentResolve() {
     <template #header>
       <div class="flex w-full items-center justify-between gap-4">
         <div v-if="headerComponent" class="flex-1">
+          <VisuallyHidden>
+            <DialogTitle>{{ title }}</DialogTitle>
+            <DialogDescription>{{ description }}</DialogDescription>
+          </VisuallyHidden>
           <Suspense>
             <component :is="headerComponent" v-bind="headerComponentOptions" />
           </Suspense>
         </div>
         <div v-else class="flex-1">
-          <h2 class="text-highlighted font-semibold">{{ title }}</h2>
-          <p v-if="description" class="text-muted text-sm">
+          <DialogTitle as="h2" class="text-highlighted font-semibold">
+            {{ title }}
+          </DialogTitle>
+          <DialogDescription v-if="description" class="text-muted text-sm">
             {{ description }}
-          </p>
+          </DialogDescription>
+          <VisuallyHidden v-else>
+            <DialogDescription />
+          </VisuallyHidden>
         </div>
         <UButton
           icon="i-lucide-x"

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/registerDefaults.ts

@@ -1,8 +1,10 @@
 import { defineAsyncComponent, type VNode } from "vue";
 import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
 import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UBadge from "@nuxt/ui/components/Badge.vue";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import ULink from "@nuxt/ui/components/Link.vue";
+import { buildRelationBadges } from "./relationBadges";
 
 const FilePreview = defineAsyncComponent(
   () => import("../../../components/table-view/FilePreview.vue"),
@@ -37,6 +39,9 @@ const LINK_CLASS =
 const LINK_ICON_CLASS = "size-3 text-primary/70 flex-shrink-0";
 const LINK_ICON_NAME = "i-ph-arrow-up-right-light";
 const DEFAULT_RELATION_VALUE_KEY = "_id";
+const DEFAULT_RELATION_LABEL_KEY = "name";
+const RELATION_BADGES_CLASS = "inline-flex flex-wrap items-center gap-1";
+const RELATION_BADGE_CLASS = "max-w-40";
 const PERMISSION_SEPARATOR = ".";
 
 interface LinkRendererOptions {
@@ -263,18 +268,41 @@ function countLeafPermissions(value: string[]): number {
   return value.filter((id) => !parentIds.has(id)).length;
 }
 
+function renderRelationBadge(label: string, title?: string) {
+  return h(UBadge, {
+    label,
+    title: title ?? label,
+    color: "neutral",
+    variant: "subtle",
+    size: Size.small,
+    class: RELATION_BADGE_CLASS,
+  });
+}
+
+function renderRelationBadges(values: unknown[], labelKey: string) {
+  const { processI18n } = useTranslation();
+  const { visible, hidden } = buildRelationBadges(values, labelKey);
+  const badges = visible.map((label) =>
+    renderRelationBadge(processI18n(label)),
+  );
+  if (hidden.length > 0) {
+    const hiddenLabels = hidden.map((label) => processI18n(label)).join(", ");
+    badges.push(renderRelationBadge(`+${hidden.length}`, hiddenLabels));
+  }
+  return h("span", { class: RELATION_BADGES_CLASS }, badges);
+}
+
 function renderRelation(value: unknown, options: unknown) {
-  const { t } = useI18n();
   const opts = options as RelationOptions | undefined;
+  const labelKey = opts?.keyMapping?.label || DEFAULT_RELATION_LABEL_KEY;
 
   if (opts?.multiple && Array.isArray(value)) {
-    return t("dms.form.relation.selected_count", { count: value.length });
+    return renderRelationBadges(value, labelKey);
   }
 
   if (!value || !isObject(value)) return value;
 
   const valueObject = value as Record<string, string>;
-  const labelKey = opts?.keyMapping?.label || "name";
   const avatarKey = opts?.keyMapping?.avatar;
   const label = valueObject[labelKey] || String(value);
 

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/relationBadges.ts

@@ -0,0 +1,36 @@
+/** How many labels a multi-value relation cell shows before collapsing. */
+export const MAX_RELATION_BADGES = 3;
+
+/** The labels a multi-value cell shows, and how many it folds into `+N`. */
+export interface RelationBadges {
+  visible: string[];
+  hidden: string[];
+}
+
+function readRelationLabel(item: unknown, labelKey: string): string {
+  if (typeof item === "object" && item !== null) {
+    const label = (item as Record<string, unknown>)[labelKey];
+    return label === undefined || label === null ? "" : String(label);
+  }
+  return item === undefined || item === null ? "" : String(item);
+}
+
+/**
+ * Split a multi-value relation into the labels rendered as badges and the ones
+ * folded into a trailing `+N`. List rows carry the related rows resolved by the
+ * relation join, so each item is read through the `label` key mapping; a raw id
+ * (join skipped) is shown as is rather than dropped.
+ */
+export function buildRelationBadges(
+  values: unknown[],
+  labelKey: string,
+  maxVisible = MAX_RELATION_BADGES,
+): RelationBadges {
+  const labels = values
+    .map((item) => readRelationLabel(item, labelKey))
+    .filter((label) => label !== "");
+  return {
+    visible: labels.slice(0, maxVisible),
+    hidden: labels.slice(maxVisible),
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableViewConfig.ts

@@ -8,6 +8,7 @@ import {
   KANBAN_DISPLAY_ID,
 } from "../../../composables/table-view/types";
 import type { FormContainerType } from "./types";
+import { buildInitialColumnVisibility } from "./utils/columnVisibility";
 
 const BUILTIN_DISPLAYS: Record<
   string,
@@ -110,13 +111,7 @@ export const useTableViewConfig = <T extends Data>(
 
   const defaultDisplay = config.defaultDisplay ?? TABLE_DISPLAY_ID;
 
-  const initialVisibility = config.columns?.reduce(
-    (acc, column) => {
-      acc[column.id] = column.visible ?? true;
-      return acc;
-    },
-    {} as Record<string, boolean>,
-  );
+  const initialVisibility = buildInitialColumnVisibility(config.columns ?? []);
 
   const tableProps = computed<Partial<TableProps<T>>>(() => ({
     caption: processI18n(config.caption ?? ""),

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/utils/columnVisibility.ts

@@ -0,0 +1,13 @@
+import type { VisibilityState } from "@tanstack/vue-table";
+import type { TableViewColumn } from "../../../../composables/table-view/types/column";
+
+/**
+ * The visibility a table opens with before the user picks columns: a column
+ * declared `isVisible: false` starts hidden but stays in the column picker.
+ */
+export const buildInitialColumnVisibility = (
+  columns: Pick<TableViewColumn, "id" | "isVisible">[],
+): VisibilityState =>
+  Object.fromEntries(
+    columns.map((column) => [column.id, column.isVisible ?? true]),
+  );

package/frontend-vue/layers/dms-ui/app/build/types/tree.ts

@@ -1,4 +1,5 @@
 import type { LinkProps, NavigationMenuItem } from "@nuxt/ui";
+import { buildLinkWithQuery } from "#dms-core/app/utils/routePath";
 
 export interface TreeItem extends LinkProps {
   id: string;
@@ -29,18 +30,13 @@ function isExcludedFromRoot(item: SiteLayoutTree): boolean {
 
 // A registered entry links to its own slug, narrowed by the query parameters it
 // declares so a single page (with `validation.requiredQueryParams`) can back
-// several entries. `exactQuery: "partial"` keeps sibling entries of that page
-// from all highlighting at once while tolerating unrelated query parameters.
-export function buildMenuItemTarget(
-  item: SiteLayoutTree,
-): MenuItemTarget | string | undefined {
+// several entries. The sidebar tells those sibling entries apart itself (see
+// `isMenuItemActive`), so the link stays a plain string.
+export function buildMenuItemTarget(item: SiteLayoutTree): string | undefined {
   if (!item.layoutUrl) {
     return undefined;
   }
-  if (!item.query || Object.keys(item.query).length === 0) {
-    return item.fullSlug;
-  }
-  return { path: item.fullSlug, query: item.query };
+  return buildLinkWithQuery(item.fullSlug, item.query);
 }
 
 function buildNavigationItem(
@@ -54,7 +50,6 @@ function buildNavigationItem(
     label: item.displayName,
     icon: item.icon,
     to,
-    ...(typeof to === "object" ? { exactQuery: "partial" } : {}),
     variant: item.variant,
     status: item.status,
     children: children.length > 0 ? children : undefined,

package/frontend-vue/layers/dms-ui/app/components/PasswordStrength.vue

@@ -6,7 +6,7 @@
     <UProgress
       :color="props.color"
       :model-value="props.score"
-      :max="4"
+      :max="props.strength.length"
       size="sm"
     />
   </div>

package/frontend-vue/layers/dms-ui/app/components/activity/ActivityItem.vue

@@ -35,7 +35,7 @@ const bubbleClass = computed(() => SOFT_TINT[props.iconColor]);
       :class="bubbleClass"
       class="grid size-[26px] shrink-0 place-items-center rounded-full"
     >
-      <UIcon :name="icon" class="size-3.5" aria-hidden="true" />
+      <UIcon :name="icon" class="size-3.5" :aria-hidden="true" />
     </div>
 
     <div class="min-w-0 flex-1">

package/frontend-vue/layers/dms-ui/app/components/banner/Banner.vue

@@ -75,7 +75,7 @@ const iconBoxClass = computed(
   >
     <template #leading>
       <div :class="iconBoxClass">
-        <UIcon :name="icon" class="size-[21px]" aria-hidden="true" />
+        <UIcon :name="icon" class="size-[21px]" :aria-hidden="true" />
       </div>
     </template>
 

package/frontend-vue/layers/dms-ui/app/components/card/NavCard.vue

@@ -24,7 +24,7 @@ defineProps<Props>();
       <div
         class="bg-primary/10 ring-primary/20 group-hover:bg-primary/15 flex size-10 shrink-0 items-center justify-center rounded-lg ring transition-colors"
       >
-        <UIcon :name="icon" class="text-primary size-5" aria-hidden="true" />
+        <UIcon :name="icon" class="text-primary size-5" :aria-hidden="true" />
       </div>
 
       <h3 class="text-highlighted min-w-0 truncate text-base font-semibold">
@@ -34,7 +34,7 @@ defineProps<Props>();
       <UIcon
         name="i-ph-caret-right"
         class="text-dimmed ml-auto size-4 shrink-0 opacity-0 transition-all group-hover:translate-x-0.5 group-hover:opacity-100"
-        aria-hidden="true"
+        :aria-hidden="true"
       />
     </div>
 

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

@@ -5,6 +5,7 @@ import type { MixedSeriesDef } from "../../composables/chart/useApexChart.types"
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { useThemeRevision } from "../../composables/chart/useThemeRevision";
 import { formatValue } from "../../composables/chart/formatValue";
+import { toDonutRecords } from "../../composables/chart/donutRecords";
 import {
   CHART_EVENT_NAMES,
   isSegmentChart,
@@ -144,24 +145,13 @@ const finalSeries = computed<ChartSeries[]>(() => {
   return staticSeries.value;
 });
 
+// A donut plots the first series only; a nested one plots its card's, like
+// every other nested chart type.
 const finalDonutData = computed<DonutRecord[]>(() => {
   if (!isCircular.value) return [];
-  if (data.value && Array.isArray(data.value.series)) {
-    const first = data.value.series[0];
-    if (first && Array.isArray(first.data)) {
-      return first.data.map((entry) => {
-        if (typeof entry === "number") {
-          return { label: String(entry), value: entry };
-        }
-        const point = entry as { label?: string; x?: unknown; y?: unknown };
-        return {
-          label: point.label ?? String(point.x ?? ""),
-          value: Number(point.y ?? 0),
-        };
-      });
-    }
-  }
-  return staticDonut.value;
+  const source = nestedContext ? nestedContext.cardSeries : fetchSeries.value;
+  const records = toDonutRecords(source[0]);
+  return records.length > 0 ? records : staticDonut.value;
 });
 
 function buildCircularClickPayload(opts: {

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

@@ -155,10 +155,10 @@ const primaryDotColor = computed(() => resolveChartColor("primary"));
     <div class="mb-4 flex flex-wrap items-start justify-between gap-3">
       <div class="min-w-0">
         <p class="text-muted text-sm">{{ processI18n(title) }}</p>
-        <p class="text-2xl font-semibold tracking-tight tabular-nums">
+        <div class="text-2xl font-semibold tracking-tight tabular-nums">
           <USkeleton v-if="isLoading && data === null" class="h-8 w-32" />
           <span v-else>{{ formatted }}</span>
-        </p>
+        </div>
         <div
           v-if="
             (showDelta && delta !== null) || previousFormatted || description

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

@@ -51,7 +51,7 @@ const display = computed(() => {
     class="inline-flex items-center gap-1 rounded-md px-1.5 py-0.5 text-xs font-medium whitespace-nowrap tabular-nums transition-colors"
     :class="colorClass"
   >
-    <UIcon :name="icon" class="size-3" aria-hidden="true" />
+    <UIcon :name="icon" class="size-3" :aria-hidden="true" />
     {{ display }}
   </span>
 </template>

package/frontend-vue/layers/dms-ui/app/components/copy/CopyButton.vue

@@ -32,7 +32,7 @@ const label = computed(() =>
     <UIcon
       :name="copied ? 'i-lucide-check' : 'i-lucide-copy'"
       class="size-4"
-      aria-hidden="true"
+      :aria-hidden="true"
     />
   </button>
 </template>

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

@@ -118,7 +118,7 @@ const iconWrapClass = computed(() =>
     <div class="flex items-start justify-between gap-3">
       <div class="min-w-0 flex-1">
         <p :class="labelClass">{{ processI18n(title) }}</p>
-        <p class="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
+        <div class="mt-1 text-2xl font-semibold tracking-tight tabular-nums">
           <USkeleton v-if="isLoading && data === null" class="h-8 w-24" />
           <span v-else class="inline-flex items-baseline gap-x-1">
             <span
@@ -135,7 +135,7 @@ const iconWrapClass = computed(() =>
               {{ formattedParts.unit }}
             </span>
           </span>
-        </p>
+        </div>
         <div
           v-if="showTrend || compareLabel || description"
           class="mt-2 flex min-w-0 items-center gap-x-2"
@@ -153,7 +153,7 @@ const iconWrapClass = computed(() =>
         <UIcon
           :name="resolvedIcon"
           :class="isStat ? 'size-4' : 'size-5'"
-          aria-hidden="true"
+          :aria-hidden="true"
         />
       </div>
     </div>

package/frontend-vue/layers/dms-ui/app/components/master-detail/MasterDetail.vue

@@ -49,7 +49,11 @@ defineSlots<{
               class="grid size-[26px] shrink-0 place-items-center"
               :class="selected === item.value ? 'text-primary' : 'text-toned'"
             >
-              <UIcon :name="item.icon" class="size-[18px]" aria-hidden="true" />
+              <UIcon
+                :name="item.icon"
+                class="size-[18px]"
+                :aria-hidden="true"
+              />
             </span>
             <span class="min-w-0">
               <span class="text-highlighted block text-sm font-semibold">

package/frontend-vue/layers/dms-ui/app/components/segmented/Segmented.vue

@@ -98,7 +98,7 @@ function onKeydown(event: KeyboardEvent, index: number) {
         v-if="item.icon"
         :name="item.icon"
         class="size-3.5"
-        aria-hidden="true"
+        :aria-hidden="true"
       />
       {{ item.label }}
     </button>

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

@@ -68,7 +68,7 @@ const resolvedIcon = computed(() => props.icon || DEFAULT_ICON[props.status]);
           :class="RING[status]"
           class="grid size-16 shrink-0 place-items-center rounded-full border-2"
         >
-          <UIcon :name="resolvedIcon" class="size-[30px]" aria-hidden="true" />
+          <UIcon :name="resolvedIcon" class="size-[30px]" :aria-hidden="true" />
         </div>
         <div>
           <p

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

@@ -9,9 +9,11 @@ import type {
 } from "@tanstack/vue-table";
 import { refDebounced, watchDebounced } from "@vueuse/core";
 import {
-  QUICK_ACTION_ADD,
+  QUICK_ACTION_BUTTON_KEY,
   QUICK_ACTION_COMPONENT_KEY,
   QUICK_ACTION_QUERY_KEY,
+  type QuickActionIntent,
+  readQuickActionIntent,
 } from "../../types/quick-actions";
 import type {
   KanbanConfig,
@@ -957,24 +959,45 @@ async function clearQuickActionQuery() {
   const {
     [QUICK_ACTION_QUERY_KEY]: _discarded,
     [QUICK_ACTION_COMPONENT_KEY]: _discardedComponent,
+    [QUICK_ACTION_BUTTON_KEY]: _discardedButton,
     ...rest
   } = route.query;
   await router.replace({ query: rest });
 }
 
-// A page may mount several table views, so the quick action always names the
-// one it means — resolved server-side — and only that one answers.
-function isQuickActionTarget(): boolean {
-  return route.query[QUICK_ACTION_COMPONENT_KEY] === componentId;
+// The button is looked up among the ones the server kept for this caller: a
+// button it stripped cannot be pressed through the URL either.
+function pressCustomButton(id: string) {
+  const button = customButtons?.find((candidate) => candidate.id === id);
+  if (button) handleCustomButton(button);
 }
 
+const quickActionHandlers: {
+  [K in QuickActionIntent["kind"]]: (
+    intent: Extract<QuickActionIntent, { kind: K }>,
+  ) => void;
+} = {
+  add: () => handleRowAdd(),
+  button: (intent) => pressCustomButton(intent.button),
+};
+
+// Watched key by key rather than through the parsed intent: a fresh intent
+// object on every unrelated query change would press the button twice.
 watch(
-  () => route.query[QUICK_ACTION_QUERY_KEY],
-  async (value) => {
-    if (value !== QUICK_ACTION_ADD) return;
-    if (!isQuickActionTarget()) return;
+  [
+    QUICK_ACTION_QUERY_KEY,
+    QUICK_ACTION_COMPONENT_KEY,
+    QUICK_ACTION_BUTTON_KEY,
+  ].map((key) => () => route.query[key]),
+  async () => {
+    const intent = readQuickActionIntent(route.query, componentId);
+    if (!intent) return;
     await clearQuickActionQuery();
-    handleRowAdd();
+    // Keyed by the intent's own discriminant, so the handler always matches.
+    const handler = quickActionHandlers[intent.kind] as (
+      value: QuickActionIntent,
+    ) => void;
+    handler(intent);
   },
   { immediate: true },
 );

package/frontend-vue/layers/dms-ui/app/composables/chart/donutRecords.ts

@@ -0,0 +1,26 @@
+import type { ChartSeries, DonutRecord } from "./types";
+
+type ChartSeriesEntry = ChartSeries["data"][number];
+
+interface LabelledPoint {
+  label?: string;
+  x?: unknown;
+  y?: unknown;
+}
+
+function toDonutRecord(entry: ChartSeriesEntry): DonutRecord {
+  if (typeof entry === "number") {
+    return { label: String(entry), value: entry };
+  }
+  const point = entry as LabelledPoint;
+  return {
+    label: point.label ?? String(point.x ?? ""),
+    value: Number(point.y ?? 0),
+  };
+}
+
+/** Turns one chart series into the slices of a circular chart. */
+export function toDonutRecords(series: ChartSeries | undefined): DonutRecord[] {
+  if (!series || !Array.isArray(series.data)) return [];
+  return series.data.map(toDonutRecord);
+}