@antelopejs/dms 0.9.7 → 0.10.0

package/frontend-vue/layers/dms-ui/app/build/components/table/Tabs.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import { MONO_CHIP_CLASS } from "../../utils/monoChip";
 import { onMounted, ref, resolveComponent, useTemplateRef } from "vue";
 import { useResizeObserver } from "@vueuse/core";
@@ -143,7 +144,7 @@ const fadeStyle = computed(() => {
 });
 
 const { locale, t } = useI18n();
-const countFormat = computed(() => new Intl.NumberFormat(locale.value));
+const countFormat = computed(() => readableNumberFormat(locale.value));
 </script>
 
 <template>

package/frontend-vue/layers/dms-ui/app/build/components/table/Views.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import { EYEBROW_CLASS } from "../../utils/eyebrow";
 import { tv } from "tailwind-variants";
 import type { DmsAppConfig } from "#dms-core/shared/types/app-config";
@@ -78,7 +79,7 @@ const uiVariant = tv({
 const ui = computed(() => uiVariant({ divided: props.divided }));
 
 const { t, locale } = useI18n();
-const countFormat = computed(() => new Intl.NumberFormat(locale.value));
+const countFormat = computed(() => readableNumberFormat(locale.value));
 
 const activeView = computed(() =>
   props.items.find((view) => view.id === props.activeId),

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

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, watch } from "vue";
+import { useFileReadUrls } from "../../../composables/useFileReadUrls";
+
+/**
+ * The leading tile of a built-in card: the row's avatar when its title column
+ * declares one (an image value, read through the file API, or a URL), else
+ * the initials of its title.
+ */
+interface CardAvatarProps {
+  avatar?: { key: string } | string;
+  /** File storage the avatar's key lives in. */
+  storage?: string;
+  /** The card's title, whose initials stand in for a missing avatar. */
+  label: string;
+}
+
+const props = defineProps<CardAvatarProps>();
+
+const INITIALS_LENGTH = 2;
+
+const { getUrl, resolve } = useFileReadUrls(props.storage);
+
+const avatarKey = computed(() =>
+  props.avatar && typeof props.avatar === "object" ? props.avatar.key : null,
+);
+watch(avatarKey, (key) => key && resolve(key), { immediate: true });
+
+const src = computed(() => {
+  if (typeof props.avatar === "string") return props.avatar;
+  return avatarKey.value ? getUrl(avatarKey.value) : undefined;
+});
+
+const initials = computed(() =>
+  props.label
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, INITIALS_LENGTH)
+    .map((word) => word.charAt(0).toUpperCase())
+    .join(""),
+);
+</script>
+
+<template>
+  <UAvatar
+    v-if="src"
+    :src="src"
+    :alt="props.label"
+    :text="initials"
+    size="sm"
+    class="size-7 shrink-0 rounded-[7px]"
+  />
+  <span
+    v-else
+    class="bg-accented text-default grid size-7 shrink-0 place-items-center rounded-[7px] font-mono text-[10.5px] font-bold"
+  >
+    {{ initials }}
+  </span>
+</template>

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

@@ -1,4 +1,10 @@
 <script setup lang="ts">
+import { MAX_PAGE_SIZE } from "../../composables/table/constants";
+import {
+  CARD_GRID_CLASS,
+  cardGridStyle,
+} from "../../composables/table-view/utils/card";
+
 /**
  * Placeholder of a table view card grid while its first page loads: cards
  * built like the cards display's (same frame, same line boxes), so nothing
@@ -11,13 +17,22 @@ interface CardGridSkeletonProps {
   fields: number;
   /** Size classes of a field label, to match the real card's line box. */
   labelClass?: string;
+  /** The narrowest card, a CSS length: the table's `card.minWidth`. */
+  minWidth?: string;
+  /**
+   * The height of a card, a CSS length: the table's `card.skeletonHeight`,
+   * for a custom card taller than the built-in one.
+   */
+  cardHeight?: string;
 }
 
 const props = withDefaults(defineProps<CardGridSkeletonProps>(), {
   labelClass: "text-[10.5px] leading-[1.2]",
 });
 
-const MAX_CARD_COUNT = 12;
+// A full page of cards, as for the rows of a table: the pagination footer
+// below them stands where the loaded page puts it.
+const MAX_CARD_COUNT = MAX_PAGE_SIZE;
 const cardCount = computed(() =>
   Math.max(1, Math.min(props.count, MAX_CARD_COUNT)),
 );
@@ -28,12 +43,14 @@ const { t } = useI18n();
 <template>
   <div
     aria-hidden="true"
-    class="grid grid-cols-[repeat(auto-fill,minmax(min(230px,100%),1fr))] gap-3 px-[18px] pt-4 pb-[18px]"
+    :class="CARD_GRID_CLASS"
+    :style="cardGridStyle(props.minWidth, cardCount)"
   >
     <div
       v-for="n in cardCount"
       :key="n"
       class="border-default @container rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px]"
+      :style="props.cardHeight ? { minHeight: props.cardHeight } : undefined"
     >
       <div class="flex items-center gap-2.5">
         <USkeleton

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

@@ -0,0 +1,38 @@
+<script setup lang="ts" generic="T extends Record<string, unknown>">
+import { computed } from "vue";
+import { FlexRender, type Table } from "@tanstack/vue-table";
+import { ACTIONS_COLUMN_ID } from "../../composables/table/constants";
+
+/**
+ * A card's row actions: the cell of the grid's actions column for the card's
+ * row, so its buttons and its … menu offer the same actions, under the same
+ * rules and confirmations, as the row does in the grid. Nothing is drawn
+ * outside a table (no TanStack instance) or for a table with no row action.
+ */
+interface CardRowActionsProps {
+  table?: Table<T>;
+  rowId: string;
+}
+
+const props = defineProps<CardRowActionsProps>();
+
+// The core model holds every listed row: the paginated one may not, when the
+// table pages on the client.
+const cell = computed(() =>
+  props.table
+    ?.getCoreRowModel()
+    .rowsById[props.rowId]?.getAllCells()
+    .find((candidate) => candidate.column.id === ACTIONS_COLUMN_ID),
+);
+</script>
+
+<template>
+  <!-- Full strength: the grid fades a row's actions until it is hovered,
+       which a phone never does. -->
+  <div v-if="cell" class="flex shrink-0 [&>div]:opacity-100" @click.stop>
+    <FlexRender
+      :render="cell.column.columnDef.cell"
+      :props="cell.getContext()"
+    />
+  </div>
+</template>

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

@@ -1,8 +1,12 @@
 <script setup lang="ts" generic="T extends Record<string, unknown>">
+import { defineComponent, markRaw, type Component } from "vue";
 import { get } from "@nuxt/ui/runtime/utils/index.js";
+import type { Table } from "@tanstack/vue-table";
 import TablePagination from "../table/Pagination.vue";
 import TableEmpty from "../table/Empty.vue";
 import CardGridSkeleton from "./CardGridSkeleton.vue";
+import CardAvatar from "./CardAvatar.vue";
+import CardRowActions from "./CardRowActions.vue";
 import type { TableViewColumn } from "../../../composables/table-view/types/column";
 import type {
   TableViewCardConfig,
@@ -11,12 +15,20 @@ import type {
 } from "../../../composables/table-view/types/display";
 import {
   buildCardProps,
+  CARD_GRID_CLASS,
+  cardAvatar,
   cardFieldColumns,
+  cardGridStyle,
+  cardIdentity,
+  cardSubtitle,
 } from "../../composables/table-view/utils/card";
+import { readSubline } from "../../composables/data-types/cellHelpers";
+import { useComposedText } from "#dms-core/app/composables/translation/useComposedText";
 import {
   REORDER_HANDLE_CLASS,
   useReorderHandles,
 } from "../../composables/table-view/useReorderHandles";
+import { useCardFields } from "../../composables/table-view/useCardFields";
 
 interface CardsDisplayProps {
   context: TableViewDisplayContext<T>;
@@ -24,12 +36,9 @@ interface CardsDisplayProps {
 
 const props = defineProps<CardsDisplayProps>();
 
-const INITIALS_LENGTH = 2;
-const EMPTY_VALUE = "—";
-
-const { locale } = useI18n();
 const { processI18n } = useTranslation();
-const { getDataType } = useDataTypes();
+const { processText } = useComposedText();
+const { renderField } = useCardFields();
 
 const rowId = (item: T): string =>
   String(get(item, props.context.rowIdKey) ?? "");
@@ -43,13 +52,20 @@ const titleOf = (item: T): string => {
     : rowId(item);
 };
 
-const initialsOf = (item: T): string =>
-  titleOf(item)
-    .split(/\s+/)
-    .filter(Boolean)
-    .slice(0, INITIALS_LENGTH)
-    .map((word) => word.charAt(0).toUpperCase())
-    .join("");
+// The subtitle and avatar the title column's identity display declares.
+const identity = computed(() =>
+  cardIdentity(props.context.columns, props.context.labelKey),
+);
+
+// An id or an address is data: only a composed text is translated.
+const subtitleOf = (item: T): string | undefined =>
+  readSubline(
+    cardSubtitle(item, identity.value, {
+      labelKey: props.context.labelKey,
+      rowIdKey: props.context.rowIdKey,
+    }),
+    { processText, isStringTranslated: false },
+  )?.text;
 
 const card = computed(
   () =>
@@ -69,28 +85,35 @@ const fieldColumns = computed<TableViewColumn[]>(() =>
   }),
 );
 
-// A field renders the same way a table cell does: through the formatter of
-// the column's data type (status pills, links, dates…).
-const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) => {
-  const value = get(fieldProps.item, fieldProps.column.accessorKey);
-  if (value === null || value === undefined || value === "") {
-    return h("span", { class: "text-dimmed" }, EMPTY_VALUE);
-  }
-  const options = fieldProps.column.type.inputComponent?.options as
-    | Record<string, unknown>
-    | undefined;
-  const formatter = getDataType(fieldProps.column.type.id)?.formatter;
-  const rendered = formatter
-    ? formatter.default(value, locale.value, options)
-    : value;
-  if (typeof rendered === "string" || typeof rendered === "number") {
-    return h("span", { class: "truncate" }, String(rendered));
-  }
-  return rendered as ReturnType<typeof h>;
-};
+// A field renders the same way a table cell does: through its column's
+// display, else its data type (status pills, links, dates…).
+const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) =>
+  renderField(fieldProps.column, fieldProps.item);
 
 const openItem = (item: T) => props.context.actions.open(item);
 
+// A custom card draws its row's actions where it likes, as a component: one
+// per row, kept across renders so an open menu is not remounted shut.
+const rowActionsComponents = new Map<string, Component>();
+const rowActionsFor = (id: string): Component => {
+  let component = rowActionsComponents.get(id);
+  if (!component) {
+    component = markRaw(
+      defineComponent({
+        name: "CardRowActionsOf",
+        render: () =>
+          h(CardRowActions, {
+            // `h` cannot carry the display's row type to a generic component.
+            table: props.context.table as Table<Record<string, unknown>>,
+            rowId: id,
+          }),
+      }),
+    );
+    rowActionsComponents.set(id, component);
+  }
+  return component;
+};
+
 // A hand-ordered table (backend `reorder`): each card carries a move handle,
 // and is where another card dragged by its handle drops.
 const { draggedIndex, handleFor, drop, allowDrop } = useReorderHandles({
@@ -110,12 +133,14 @@ const cardReorder = (index: number): TableViewCardReorder | undefined =>
 
 <template>
   <div>
-    <!-- v2 cards display: an auto-fill grid inside the table card, sharing
+    <!-- v2 cards display: an auto-fit grid inside the table card, sharing
          its selection and its pagination footer. -->
     <CardGridSkeleton
       v-if="props.context.firstPageLoading"
       :count="props.context.pagination.pageSize"
       :fields="fieldColumns.length"
+      :min-width="card?.minWidth"
+      :card-height="card?.skeletonHeight"
     />
 
     <TableEmpty
@@ -123,11 +148,15 @@ const cardReorder = (index: number): TableViewCardReorder | undefined =>
       :can-add-row="props.context.actions.canAdd"
     />
 
-    <div
-      v-else
-      class="grid grid-cols-[repeat(auto-fill,minmax(min(230px,100%),1fr))] gap-3 px-[18px] pt-4 pb-[18px]"
-    >
-      <template v-if="cardComponent">
+    <!-- A custom card loads lazily, and so may the components it draws (a
+         record card, a pill): the skeleton stays until every one of them is
+         there, rather than an empty grid lifting the footer for a beat. A
+         server render and a hydration draw the cards at once. -->
+    <Suspense v-else-if="cardComponent">
+      <div
+        :class="CARD_GRID_CLASS"
+        :style="cardGridStyle(card?.minWidth, props.context.items.length)"
+      >
         <!-- A wrapper out of the grid's layout, catching the drop on the
              card whatever its root element. -->
         <div
@@ -143,82 +172,97 @@ const cardReorder = (index: number): TableViewCardReorder | undefined =>
               ...(card?.component?.options ?? {}),
               ...buildCardProps(item, props.context),
               reorder: cardReorder(index),
+              rowActions: rowActionsFor(rowId(item)),
             }"
           />
         </div>
+      </div>
+      <template #fallback>
+        <CardGridSkeleton
+          :count="props.context.pagination.pageSize"
+          :fields="fieldColumns.length"
+          :min-width="card?.minWidth"
+          :card-height="card?.skeletonHeight"
+        />
       </template>
-      <template v-else>
-        <article
-          v-for="(item, index) in props.context.items"
-          :key="rowId(item)"
-          class="group border-default hover:border-primary/35 @container cursor-pointer rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px] transition-colors focus-visible:outline-2 focus-visible:outline-(--dms-accent-line)"
-          :class="{
-            'border-primary ring-primary ring-1':
-              props.context.selection.isSelected(rowId(item)),
-            'opacity-50': draggedIndex === index,
-          }"
-          tabindex="0"
-          @click="openItem(item)"
-          @keydown.enter.self="openItem(item)"
-          @dragover="allowDrop"
-          @drop="drop(index)"
-        >
-          <header class="flex items-center gap-2.5">
-            <button
-              v-if="props.context.reorder"
-              v-bind="handleFor(index)"
-              :class="['-ms-1.5', REORDER_HANDLE_CLASS]"
-            >
-              <UIcon name="i-ph-dots-six-vertical" />
-            </button>
-            <span
-              class="bg-accented text-default grid size-7 shrink-0 place-items-center rounded-[7px] font-mono text-[10.5px] font-bold"
+    </Suspense>
+
+    <div
+      v-else
+      :class="CARD_GRID_CLASS"
+      :style="cardGridStyle(card?.minWidth, props.context.items.length)"
+    >
+      <article
+        v-for="(item, index) in props.context.items"
+        :key="rowId(item)"
+        class="group border-default hover:border-primary/35 @container cursor-pointer rounded-[10px] border bg-(--ui-bg) p-3.5 text-[12.5px] transition-colors focus-visible:outline-2 focus-visible:outline-(--dms-accent-line)"
+        :class="{
+          'border-primary ring-primary ring-1':
+            props.context.selection.isSelected(rowId(item)),
+          'opacity-50': draggedIndex === index,
+        }"
+        tabindex="0"
+        @click="openItem(item)"
+        @keydown.enter.self="openItem(item)"
+        @dragover="allowDrop"
+        @drop="drop(index)"
+      >
+        <header class="flex items-center gap-2.5">
+          <button
+            v-if="props.context.reorder"
+            v-bind="handleFor(index)"
+            :class="['-ms-1.5', REORDER_HANDLE_CLASS]"
+          >
+            <UIcon name="i-ph-dots-six-vertical" />
+          </button>
+          <CardAvatar
+            :avatar="cardAvatar(item, identity)"
+            :storage="identity.storage"
+            :label="titleOf(item)"
+          />
+          <div class="min-w-0 flex-1">
+            <div
+              class="text-highlighted truncate text-[13px] font-semibold"
+              :title="titleOf(item)"
             >
-              {{ initialsOf(item) }}
-            </span>
-            <div class="min-w-0 flex-1">
-              <div
-                class="text-highlighted truncate text-[13px] font-semibold"
-                :title="titleOf(item)"
-              >
-                {{ titleOf(item) }}
-              </div>
-              <div class="text-dimmed truncate font-mono text-[11px]">
-                {{ rowId(item) }}
-              </div>
+              {{ titleOf(item) }}
             </div>
-            <UCheckbox
-              :model-value="props.context.selection.isSelected(rowId(item))"
-              :aria-label="titleOf(item)"
-              @click.stop
-              @update:model-value="
-                props.context.selection.toggle(rowId(item), !!$event)
-              "
-            />
-          </header>
-
-          <!-- A phone-narrow card stacks its fields: two columns would clip
-          every value. -->
-          <dl
-            class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2.5 max-sm:@max-[16rem]:grid-cols-1"
-          >
             <div
-              v-for="column in fieldColumns"
-              :key="column.id"
-              class="min-w-0"
+              v-if="subtitleOf(item)"
+              class="text-dimmed truncate font-mono text-[11px]"
+              :title="subtitleOf(item)"
             >
-              <DmsEyebrow
-                as="dt"
-                truncate
-                :label="processI18n(column.header)"
-              />
-              <dd class="text-default mt-0.5 flex min-w-0">
-                <FieldValue :column="column" :item="item" />
-              </dd>
+              {{ subtitleOf(item) }}
             </div>
-          </dl>
-        </article>
-      </template>
+          </div>
+          <UCheckbox
+            :model-value="props.context.selection.isSelected(rowId(item))"
+            :aria-label="titleOf(item)"
+            @click.stop
+            @update:model-value="
+              props.context.selection.toggle(rowId(item), !!$event)
+            "
+          />
+          <CardRowActions
+            :table="props.context.table"
+            :row-id="rowId(item)"
+            class="-me-1.5"
+          />
+        </header>
+
+        <!-- A phone-narrow card stacks its fields: two columns would clip
+          every value. -->
+        <dl
+          class="mt-3 grid grid-cols-2 gap-x-3 gap-y-2.5 max-sm:@max-[16rem]:grid-cols-1"
+        >
+          <div v-for="column in fieldColumns" :key="column.id" class="min-w-0">
+            <DmsEyebrow as="dt" truncate :label="processI18n(column.header)" />
+            <dd class="text-default mt-0.5 flex min-w-0">
+              <FieldValue :column="column" :item="item" />
+            </dd>
+          </div>
+        </dl>
+      </article>
     </div>
 
     <TablePagination />

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

@@ -11,6 +11,9 @@ import type { PageLiveNote } from "../../../types/live";
  * live ("Table on hold · search active · 3 new · Show"), and followed, while
  * the page is paused, by the breakdown a component gave the page ("12 new
  * requests · 2 in 5xx · Show"). Show reads the rows once; the hold stays.
+ * `floating`, it is a pill laid over the first rows, under the column header band instead: what came
+ * in while the user had the rows on screen, or the page paused, says so
+ * without pushing them down.
  */
 const props = withDefaults(
   defineProps<{
@@ -22,10 +25,20 @@ const props = withDefaults(
     missedLabel?: string;
     /** The breakdown of what the paused page missed. */
     detail?: PageLiveNote | null;
+    /** A pill over the rows, taking no room, in place of the strip. */
+    floating?: boolean;
   }>(),
-  { reason: null, missedLabel: undefined, detail: null },
+  { reason: null, missedLabel: undefined, detail: null, floating: false },
 );
 
+// Literal class strings (Tailwind extracts them). The pill is opaque and
+// lifted by the theme's pop shadow (deeper in dark), so the rows under it
+// stay apart from it.
+const STRIP_CLASS =
+  "border-b border-(--dms-info-line) bg-(--dms-info-tint) py-[7px] ps-[18px] pe-3.5 text-[13px]";
+const PILL_CLASS =
+  "rounded-full border border-(--dms-info-line) bg-(--ui-bg) py-1 ps-2.5 pe-3.5 text-[12.5px] shadow-(--dms-shadow-pop)";
+
 const emit = defineEmits<{ show: [] }>();
 
 const { t } = useI18n();
@@ -55,7 +68,9 @@ const detailNote = computed(() =>
 <template>
   <div
     role="status"
-    class="dms-live-hold-banner text-highlighted flex items-center gap-2.5 border-b border-(--dms-info-line) bg-(--dms-info-tint) py-[7px] ps-[18px] pe-3.5 text-[13px]"
+    aria-live="polite"
+    class="dms-live-hold-banner text-highlighted flex items-center gap-2.5"
+    :class="props.floating ? PILL_CLASS : STRIP_CLASS"
   >
     <UIcon name="i-ph-pause-circle" class="text-info size-4 shrink-0" />
     <span v-if="reasonText" class="dms-live-hold-banner__reason min-w-0">

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

@@ -1,5 +1,7 @@
 import type { ActionTarget } from "../../../composables/table-view/types/action-target";
 import type { CustomRowAction } from "../../../types/row-action";
+import { namesRowField } from "#dms-core/app/utils/url-interpolation";
+import { dropRowTokens } from "../../utils/urlVariables";
 
 /** Query flag of a bulk request covering every matching row. */
 export const ALL_MATCHING_QUERY_KEY = "allMatching";
@@ -34,17 +36,27 @@ export function bulkSelectionQuery(
   return query;
 }
 
-/** `url` with `query` appended, a list value as a repeated key. */
+const FRAGMENT_SEPARATOR = "#";
+
+/**
+ * `url` with `query` appended, a list value as a repeated key. The URL's own
+ * query is kept as written: its tokens (`{{query.X}}`, `{{row.X}}`) are filled
+ * after, which percent-encoded braces would no longer match.
+ */
 export function withQuery(url: string, query: Record<string, QueryValue>) {
-  const [path, search = ""] = url.split("?");
-  const params = new URLSearchParams(search);
+  const params = new URLSearchParams();
   for (const [key, value] of Object.entries(query)) {
     for (const entry of Array.isArray(value) ? value : [value]) {
       params.append(key, entry);
     }
   }
-  const joined = params.toString();
-  return joined ? `${path}?${joined}` : (path ?? url);
+  const appended = params.toString();
+  if (!appended) return url;
+  const [base = "", ...fragment] = url.split(FRAGMENT_SEPARATOR);
+  const separator = !base.includes("?") ? "?" : /[?&]$/.test(base) ? "" : "&";
+  return [`${base}${separator}${appended}`, ...fragment].join(
+    FRAGMENT_SEPARATOR,
+  );
 }
 
 const URL_TARGET_TYPES = new Set([
@@ -55,14 +67,36 @@ const URL_TARGET_TYPES = new Set([
   "exportJob",
 ]);
 
-/** A target sending the selection along: its URL carries the query. */
+type UrlTarget = ActionTarget & { url: string };
+
+export const isUrlTarget = (target: ActionTarget): target is UrlTarget =>
+  URL_TARGET_TYPES.has(target.type);
+
+/**
+ * A target sending the selection along: its URL carries the query. Sent
+ * without a row, its `{{row.X}}` tokens are taken out (a `?ids={{row._id}}`
+ * pair gives way to the selection's `ids`).
+ */
 export function targetWithSelection(
   target: ActionTarget,
   query: Record<string, QueryValue>,
 ): ActionTarget {
-  if (!URL_TARGET_TYPES.has(target.type)) return target;
-  const { url } = target as ActionTarget & { url: string };
-  return { ...target, url: withQuery(url, query) } as ActionTarget;
+  if (!isUrlTarget(target)) return target;
+  const url = withQuery(dropRowTokens(target.url), query);
+  return { ...target, url } as ActionTarget;
+}
+
+/**
+ * A bulk action's target run on one row: its URL carries that row's id as the
+ * selection bar's carries the selection's, unless it names the row itself
+ * (`{{row._id}}`), which then fills it.
+ */
+export function targetForRow(
+  target: ActionTarget,
+  query: Record<string, QueryValue>,
+): ActionTarget {
+  if (!isUrlTarget(target) || namesRowField(target.url)) return target;
+  return { ...target, url: withQuery(target.url, query) } as ActionTarget;
 }
 
 /** Whether a custom action runs on the selection bar. */