@antelopejs/dms 0.7.0 → 0.7.2

package/frontend-vue/layers/dms-ui/app/components/empty-state/EmptyState.vue

@@ -35,6 +35,8 @@ interface EmptyStateProps {
 interface EmptyStateSlots {
   /** Rich description, replaces `description`. */
   default?: () => unknown;
+  /** Under the text, above the actions: a snippet to start with. */
+  content?: () => unknown;
   /** Buttons or links under the text. */
   actions?: () => unknown;
 }
@@ -71,6 +73,7 @@ const theme = tv({
     well: "mb-1.5",
     title: "text-highlighted",
     description: "text-muted",
+    content: "mt-2.5 w-full max-w-[60ch] text-start",
     actions: "mt-2.5 flex flex-wrap items-center justify-center gap-2",
   },
   variants: {
@@ -106,8 +109,11 @@ const resolvedIcon = computed(() => props.icon ?? VARIANT_ICONS[props.variant]);
 const resolvedTone = computed<Tone>(
   () => props.tone ?? (props.variant === "error" ? "error" : "neutral"),
 );
-const hasDescription = computed(() => !!props.description || !!slots.default);
-const hasActions = computed(() => !!slots.actions || !!props.actions?.length);
+// Read at each render rather than in a computed: the slots object is not
+// reactive, so a computed would keep the slots of the first render and miss
+// a slot the parent adds or removes later.
+const hasDescription = (): boolean => !!props.description || !!slots.default;
+const hasActions = (): boolean => !!slots.actions || !!props.actions?.length;
 </script>
 
 <template>
@@ -122,10 +128,13 @@ const hasActions = computed(() => !!slots.actions || !!props.actions?.length);
       :class="ui.well()"
     />
     <p :class="ui.title()">{{ props.title }}</p>
-    <p v-if="hasDescription" :class="ui.description()">
+    <p v-if="hasDescription()" :class="ui.description()">
       <slot>{{ props.description }}</slot>
     </p>
-    <div v-if="hasActions" :class="ui.actions()">
+    <div v-if="slots.content" :class="ui.content()">
+      <slot name="content" />
+    </div>
+    <div v-if="hasActions()" :class="ui.actions()">
       <slot name="actions">
         <UButton
           v-for="(action, index) in props.actions"

package/frontend-vue/layers/dms-ui/app/components/flow-canvas/FlowCanvas.vue

@@ -29,7 +29,9 @@ import { computed, useId, useSlots } from "vue";
 //   Delete/Backspace remove the selection. Both paths only *emit* the
 //   `delete-nodes` intent — the badge for its own node, Delete/Backspace for
 //   the whole selection — the wrapper never mutates the consumer's
-//   `nodes`/`edges`; the consumer applies the removal.
+//   `nodes`/`edges`; the consumer applies the removal. `deleteBadge: false`
+//   hides the badge and keeps the keyboard path, for a consumer that draws
+//   its own delete control.
 // - `zoomReadout` adds a live zoom percentage to the control bar that doubles
 //   as a reset-to-100% button.
 //
@@ -119,6 +121,11 @@ interface Props {
    * Delete + Backspace.
    */
   deleteKeyCode?: DeleteKeyCode;
+  /**
+   * Draw the delete badge on selected nodes while `deletableNodes` is on.
+   * `false` leaves the keyboard path alone. Defaults to `true`.
+   */
+  deleteBadge?: boolean;
   /**
    * Add a live zoom percentage / reset-to-100% control to the control bar.
    * It renders inside the bar, so it requires `controls` to be enabled.
@@ -141,6 +148,7 @@ const props = withDefaults(defineProps<Props>(), {
   height: "100%",
   deletableNodes: false,
   deleteKeyCode: undefined,
+  deleteBadge: true,
   zoomReadout: false,
 });
 
@@ -198,7 +206,7 @@ const zoomPercent = computed(() =>
 // Project each selected node's top-right corner from flow space to screen
 // space through the live viewport transform, so badges track pan/zoom/drag.
 const deleteAffordances = computed<DeleteAffordance[]>(() => {
-  if (!props.deletableNodes) return [];
+  if (!props.deletableNodes || !props.deleteBadge) return [];
   const {
     x: panX,
     y: panY,
@@ -295,7 +303,10 @@ defineExpose(flow);
       <slot />
     </VueFlow>
 
-    <div v-if="deletableNodes" class="dms-flow-canvas__delete-layer">
+    <div
+      v-if="deletableNodes && deleteBadge"
+      class="dms-flow-canvas__delete-layer"
+    >
       <button
         v-for="affordance in deleteAffordances"
         :key="affordance.id"

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

@@ -3,6 +3,7 @@ import { getCurrentInstance, h, render } from "vue";
 import { useFormField } from "@nuxt/ui/composables/useFormField";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import { useControlError } from "../../../build/composables/form/useControlError";
+import { codeLanguageLabel } from "../../../build/utils/codeLanguages";
 import type {
   CodeEditor,
   CodeEditorCompletion,
@@ -47,13 +48,6 @@ const LINE_HEIGHT_PX = 19;
 // The editor's top and bottom padding, around its lines.
 const EDITOR_PADDING_PX = 16;
 const INVALID_JSON = "$dms.field_errors.invalid_json";
-const LANGUAGE_LABELS: Record<string, string> = {
-  json: "JSON",
-  sql: "SQL",
-  html: "HTML",
-  javascript: "JavaScript",
-  text: "Text",
-};
 
 const host = useTemplateRef<HTMLElement>("host");
 const position = ref<CodeEditorPosition>({ line: 1, column: 1 });
@@ -188,7 +182,7 @@ onBeforeUnmount(() => {
         {{ t("dms.form.code.complete") }}
       </span>
       <span class="ms-auto">
-        {{ LANGUAGE_LABELS[props.language] ?? props.language }} ·
+        {{ codeLanguageLabel(props.language) }} ·
         {{ t("dms.form.code.position", position) }}
       </span>
     </div>

package/frontend-vue/layers/dms-ui/app/components/key-value-list/KeyValueList.vue

@@ -3,6 +3,7 @@ import { computed } from "vue";
 import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
 import DmsStatusPill from "../status-pill/StatusPill.vue";
 import DmsAutoLink from "../link/AutoLink.vue";
+import DmsCopyButton from "../copy/CopyButton.vue";
 import { DMS_TONE_TEXT } from "../../build/utils/tone";
 import type { Tone } from "../../types/tone";
 
@@ -36,6 +37,10 @@ export interface KeyValueItem {
   currency?: string;
   /** This value alone is still loading: a skeleton stands in for it. */
   loading?: boolean;
+  /** Draws a button copying the value as it is shown. */
+  copy?: boolean;
+  /** Text the copy button copies instead of the shown value; implies `copy`. */
+  copyValue?: string;
 }
 
 interface KeyValueListProps {
@@ -156,6 +161,14 @@ function valueClass(item: KeyValueItem): string[] {
   return ["wrap-anywhere", color, TYPE_CLASSES[type] ?? ""];
 }
 
+// An empty value shows a dash, which is not worth copying.
+function copyTextOf(item: KeyValueItem): string | undefined {
+  if (item.copyValue) return item.copyValue;
+  if (!item.copy) return undefined;
+  const formatted = format(item);
+  return formatted === EMPTY_VALUE ? undefined : formatted;
+}
+
 function keyOf(item: KeyValueItem, index: number): string {
   return item.id ?? `${index}-${item.label}`;
 }
@@ -216,6 +229,12 @@ function keyOf(item: KeyValueItem, index: number): string {
               {{ item.detail }}
             </span>
           </template>
+          <!-- -my-1: the button is taller than a dense row's text line. -->
+          <DmsCopyButton
+            v-if="!props.loading && !item.loading && copyTextOf(item)"
+            :value="copyTextOf(item)!"
+            class="-my-1"
+          />
         </dd>
       </div>
     </template>

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

@@ -3,6 +3,10 @@
 // left (380px) and a detail panel on the right. The list is driven by `items`
 // + v-model; the detail is rendered by the default slot, which receives the
 // currently selected value.
+//
+// The panes sit side by side from 64rem of the layout's own width (the former
+// `lg` viewport breakpoint), not the viewport's: a docked side panel or a
+// narrow grid cell leaves less room than the screen suggests.
 interface MdItem {
   value: string | number;
   label: string;
@@ -23,59 +27,61 @@ defineSlots<{
 </script>
 
 <template>
-  <div
-    class="grid grid-cols-1 items-start gap-5 lg:grid-cols-[380px_minmax(0,1fr)]"
-  >
-    <!-- List pane -->
-    <div class="dms-card p-2">
-      <p
-        v-if="listLabel"
-        class="text-dimmed px-2.5 pt-2.5 pb-1 font-mono text-[10px] tracking-widest uppercase"
-      >
-        {{ listLabel }}
-      </p>
-      <ul class="flex flex-col gap-1.5">
-        <li v-for="item in items" :key="item.value">
-          <button
-            type="button"
-            class="flex w-full items-start gap-3 rounded-md border border-transparent px-3.5 py-3 text-left transition-colors"
-            :class="
-              selected === item.value
-                ? 'border-primary bg-primary/10'
-                : 'hover:bg-elevated'
-            "
-            @click="selected = item.value"
-          >
-            <span
-              v-if="item.icon"
-              class="grid size-[26px] shrink-0 place-items-center"
-              :class="selected === item.value ? 'text-primary' : 'text-toned'"
+  <div class="@container">
+    <div
+      class="grid grid-cols-1 items-start gap-5 @5xl:grid-cols-[380px_minmax(0,1fr)]"
+    >
+      <!-- List pane -->
+      <div class="dms-card p-2">
+        <p
+          v-if="listLabel"
+          class="text-dimmed px-2.5 pt-2.5 pb-1 font-mono text-[10px] tracking-widest uppercase"
+        >
+          {{ listLabel }}
+        </p>
+        <ul class="flex flex-col gap-1.5">
+          <li v-for="item in items" :key="item.value">
+            <button
+              type="button"
+              class="flex w-full items-start gap-3 rounded-md border border-transparent px-3.5 py-3 text-left transition-colors"
+              :class="
+                selected === item.value
+                  ? 'border-primary bg-primary/10'
+                  : 'hover:bg-elevated'
+              "
+              @click="selected = item.value"
             >
-              <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">
-                {{ item.label }}
-              </span>
               <span
-                v-if="item.sublabel"
-                class="text-muted mt-0.5 block truncate text-xs"
+                v-if="item.icon"
+                class="grid size-[26px] shrink-0 place-items-center"
+                :class="selected === item.value ? 'text-primary' : 'text-toned'"
               >
-                {{ item.sublabel }}
+                <UIcon
+                  :name="item.icon"
+                  class="size-[18px]"
+                  :aria-hidden="true"
+                />
               </span>
-            </span>
-          </button>
-        </li>
-      </ul>
-    </div>
+              <span class="min-w-0">
+                <span class="text-highlighted block text-sm font-semibold">
+                  {{ item.label }}
+                </span>
+                <span
+                  v-if="item.sublabel"
+                  class="text-muted mt-0.5 block truncate text-xs"
+                >
+                  {{ item.sublabel }}
+                </span>
+              </span>
+            </button>
+          </li>
+        </ul>
+      </div>
 
-    <!-- Detail pane -->
-    <div class="dms-card overflow-hidden">
-      <slot :selected="selected" />
+      <!-- Detail pane -->
+      <div class="dms-card overflow-hidden">
+        <slot :selected="selected" />
+      </div>
     </div>
   </div>
 </template>

package/frontend-vue/layers/dms-ui/app/components/meter/MeterBlock.vue

@@ -11,28 +11,35 @@ import DmsBlockActions, {
 } from "../../build/components/blocks/BlockActions.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
+import type { BlockText } from "../../../../dms-core/app/types/composed-text";
+
+/** A segment as the page or the route sends it, its legend still to write. */
+interface MeterBlockSegment extends Omit<MeterSegment, "label"> {
+  label?: BlockText;
+}
 
 /** What a meter's data source answers: any subset of its figures. */
 interface MeterResponse {
   value?: number;
   max?: number;
-  segments?: MeterSegment[];
-  hint?: string;
-  valueLabel?: string;
+  segments?: MeterBlockSegment[];
+  hint?: BlockText;
+  valueLabel?: BlockText;
 }
 
 // The page block behind the backend `Meter` builder: static figures or a
 // data source, optionally in a card. DmsMeter draws it.
 interface MeterBlockProps extends DefaultComponentProps {
   label?: string;
-  hint?: string;
+  hint?: BlockText;
   value?: number;
   max?: number;
-  segments?: MeterSegment[];
+  segments?: MeterBlockSegment[];
   legend?: boolean;
   format?: MeterFormat;
-  valueLabel?: string;
+  valueLabel?: BlockText;
   tone?: MeterTone;
   warnAt?: number;
   errorAt?: number;
@@ -40,6 +47,10 @@ interface MeterBlockProps extends DefaultComponentProps {
   /** Endpoint answering `{ value?, max?, segments?, hint?, valueLabel? }`. */
   fetchUrl?: string;
   fetchUrlMethod?: string;
+  /** Id of the PeriodSelector the data follows. */
+  periodScope?: string;
+  /** Topics whose events make the block read `fetchUrl` again. */
+  realtimeTopic?: string | string[];
   /** Wraps the meter in a padded card. */
   card?: boolean;
   /** Link buttons pushed right of the legend ("Manage members"). */
@@ -61,11 +72,13 @@ const props = withDefaults(defineProps<MeterBlockProps>(), {
   size: "sm",
   fetchUrl: undefined,
   fetchUrlMethod: undefined,
+  periodScope: undefined,
+  realtimeTopic: undefined,
   card: false,
   actions: () => [],
 });
 
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 const { t } = useI18n();
 
 const { state: watchState } = useWatch(
@@ -76,12 +89,14 @@ const { state: watchState } = useWatch(
 const { data, isLoading, error, refresh } = useChartFetch<MeterResponse>({
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
   routeParams: () => props.routeParams,
   watchSource: () => JSON.stringify(watchState.value),
 });
 
-const translate = (text: string | undefined): string | undefined =>
-  text ? processI18n(text) : undefined;
+const translate = (text: BlockText | undefined): string | undefined =>
+  text ? processText(text) : undefined;
 
 const figures = computed(() => {
   const fetched = data.value ?? {};

package/frontend-vue/layers/dms-ui/app/components/tab/Tab.vue

@@ -20,16 +20,19 @@ const props = withDefaults(defineProps<TabProps>(), {
   persistState: false,
   stateKey: "tab",
   badgesUrl: undefined,
+  realtimeTopic: undefined,
 });
 
 // The badges a module counts for a record's tabs, in one request, again when
-// a watch action fires: each replaces its tab's static badge.
+// a watch action or a realtime topic fires: each replaces its tab's static
+// badge.
 const { state: watchState } = useWatch(
   props.watchActions || [],
   props.componentId,
 );
 const { data: fetchedBadges } = useChartFetch<TabBadges>({
   fetchUrl: props.badgesUrl,
+  realtimeTopic: props.realtimeTopic,
   routeParams: () => props.routeParams,
   watchSource: () => JSON.stringify(watchState.value),
 });

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

@@ -47,7 +47,6 @@ import {
 } from "../../composables/table-view/kanban";
 import { useTableRowActions } from "../../build/composables/table-view/useTableViewRowActions";
 import {
-  buildTableDataKey,
   buildTableQuery,
   isFilterEffective,
 } from "../../build/composables/table-view/utils/tableQuery";
@@ -107,7 +106,9 @@ import { useTableViews } from "../../build/composables/table-view/useTableViews"
 import { useGroupedRows } from "../../build/composables/table-view/useGroupedRows";
 import { useTableFooter } from "../../build/composables/table-view/useTableFooter";
 import { useAccumulatedPages } from "../../build/composables/table-view/useAccumulatedPages";
+import { usePersistedPagination } from "../../build/composables/table-view/usePersistedPagination";
 import { useTableRows } from "../../build/composables/table-view/useTableRows";
+import { useRefreshTriggers } from "../../build/composables/blocks/useRefreshTriggers";
 import { useTableReorder } from "../../build/composables/table-view/useTableReorder";
 import {
   groupedOptionsFor,
@@ -118,7 +119,10 @@ import { readTableUrlKey } from "../../build/composables/table-view/utils/views"
 import TableViews, {
   type TableViewItem,
 } from "../../build/components/table/Views.vue";
-import { useServerRenderedAsyncData } from "../../build/composables/table-view/useServerRenderedAsyncData";
+import {
+  useTableCountsData,
+  useTableListData,
+} from "../../build/composables/table-view/useTableListData";
 import { useTableDataChanges } from "../../composables/table-view/useTableDataChanges";
 
 const REALTIME_ROW_TOPIC_PREFIX = "tableview:row:";
@@ -172,6 +176,8 @@ interface TableViewProps<T extends Data> extends TableViewConfig<T> {
   tableId?: string;
   /** The page carries no other table view: `?view=` / `?tab=` are its own. */
   isSoleTableView?: boolean;
+  /** Topics whose events make the table read its rows again. */
+  realtimeTopic?: string | string[];
 }
 
 const props = defineProps<TableViewProps<T>>();
@@ -347,12 +353,42 @@ const resolvedChrome = resolveTableChrome(props.layout, {
 });
 const GLOBAL_FILTER_DEBOUNCE_MS = 400;
 
-const paginationState = ref<PaginationState>(
-  getPreference<PaginationState>(
-    getTablePreferenceKey("pagination"),
-    DEFAULT_PAGINATION,
-  ),
-);
+const route = useDmsRoute();
+
+const DEFAULT_FILTER_MODE = "is";
+
+const queryParamHiddenFilters = computed<TableFilter[]>(() => {
+  if (!queryParamFilters) return [];
+
+  return Object.entries(queryParamFilters)
+    .filter(([param]) => route.query[param] !== undefined)
+    .map(([param, config]) => ({
+      accessorKey: config.field,
+      mode: config.mode || DEFAULT_FILTER_MODE,
+      value: route.query[param] as string,
+    }));
+});
+
+const routeParamHiddenFilters = computed<TableFilter[]>(() => {
+  if (!routeParamFilters || !routeParams) return [];
+
+  return Object.entries(routeParamFilters)
+    .filter(([param]) => routeParams[param] !== undefined)
+    .map(([param, config]) => ({
+      accessorKey: config.field,
+      mode: config.mode || DEFAULT_FILTER_MODE,
+      value: routeParams[param] as string,
+    }));
+});
+
+// A hidden filter's value changed with the URL, in place or through a
+// remount: the page reached among the previous rows lists from page 1.
+const paginationState = usePersistedPagination({
+  preferences: { getPreference, setPreference },
+  preferenceKey: getTablePreferenceKey,
+  defaults: DEFAULT_PAGINATION,
+  scope: () => [queryParamHiddenFilters.value, routeParamHiddenFilters.value],
+});
 const rowSelect = ref<RowSelectionState>({});
 // A column's grid header, for the sort messages.
 const columnLabel = (id: string): string => {
@@ -615,35 +651,11 @@ const tableRows = useTableRows<T>({
   location,
   source: props.source,
   columns: props.columns,
+  route: () => ({
+    routeParams: props.routeParams,
+    routeQuery: route.query as Record<string, unknown>,
+  }),
 });
-const route = useDmsRoute();
-
-const DEFAULT_FILTER_MODE = "is";
-
-const queryParamHiddenFilters = computed<TableFilter[]>(() => {
-  if (!queryParamFilters) return [];
-
-  return Object.entries(queryParamFilters)
-    .filter(([param]) => route.query[param] !== undefined)
-    .map(([param, config]) => ({
-      accessorKey: config.field,
-      mode: config.mode || DEFAULT_FILTER_MODE,
-      value: route.query[param] as string,
-    }));
-});
-
-const routeParamHiddenFilters = computed<TableFilter[]>(() => {
-  if (!routeParamFilters || !routeParams) return [];
-
-  return Object.entries(routeParamFilters)
-    .filter(([param]) => routeParams[param] !== undefined)
-    .map(([param, config]) => ({
-      accessorKey: config.field,
-      mode: config.mode || DEFAULT_FILTER_MODE,
-      value: routeParams[param] as string,
-    }));
-});
-
 // Quick filters: dropdowns of the toolbar over a column's values (a select's
 // items, a boolean, the rows a relation points to), writing that column's
 // filter like the filters row does.
@@ -788,34 +800,15 @@ const archiveQuery = computed(() =>
   archiveMode ? { showArchived: showArchived.value } : {},
 );
 
-const EMPTY_LIST_RESULT: TableViewListResponse<never> = {
-  results: [],
-  total: 0,
-  offset: 0,
-  limit: 0,
-};
-
-const tableDataKey = buildTableDataKey({
+const { data, status, error, refresh } = await useTableListData<T>({
   componentId,
   pageId,
-  query: queryRequest.value,
-  archiveQuery: archiveQuery.value,
-  isSelfManaged: isActiveDisplaySelfManaged.value,
+  rows: tableRows,
+  query: queryRequest,
+  archiveQuery,
+  isSelfManaged: isActiveDisplaySelfManaged,
 });
 
-const { data, status, error, refresh } = await useServerRenderedAsyncData(
-  tableDataKey,
-  (): Promise<TableViewListResponse<T>> => {
-    // Self-managed displays (e.g. kanban) fetch their own data; skip the
-    // shared list query for them.
-    if (isActiveDisplaySelfManaged.value) {
-      return Promise.resolve(EMPTY_LIST_RESULT);
-    }
-    return tableRows.list({ ...queryRequest.value, ...archiveQuery.value });
-  },
-  { watch: [queryRequest, archiveQuery, isActiveDisplaySelfManaged] },
-);
-
 // Nothing listed yet (a client navigation paints before the first page
 // arrives): the table draws its skeleton, never the empty state.
 const isFirstPageLoading = computed(() => data.value === null && !error.value);
@@ -949,19 +942,13 @@ const tabCountsQuery = computed(() => [
 // No default: `null` until the counts arrive, so the tabs draw placeholders
 // instead of a count of nothing.
 const { data: tabCountsData, refresh: refreshTabCounts } =
-  await useServerRenderedAsyncData<Record<string, number>>(
-    `table-view-${componentId}-${pageId}-tab-counts`,
-    async () => {
-      if (tabCountsQuery.value.length === 0) return {};
-      return await tableRows.countBatch(
-        tabCountsQuery.value.map(({ id, query }) => ({
-          id,
-          query: { ...query, ...archiveQuery.value },
-        })),
-      );
-    },
-    { watch: [tabCountsQuery, archiveQuery] },
-  );
+  await useTableCountsData<T>({
+    componentId,
+    pageId,
+    rows: tableRows,
+    queries: tabCountsQuery,
+    archiveQuery,
+  });
 
 const viewItems = computed<TableViewItem[]>(() =>
   tableViewItems.value.map((view) => ({
@@ -1131,6 +1118,11 @@ const refreshAll = async () => {
   ]);
 };
 
+// The rows can move without the table seeing it (a batch, a job, another
+// block's action): a topic of the backend or a page refresh reads them again,
+// keeping the current rows on screen until the answer lands.
+useRefreshTriggers(props.realtimeTopic, () => void refreshAll());
+
 // "Preview as role": a link tab to a page the previewed role could not open
 // is drawn locked, one to a page it opens partially is drawn partially
 // locked. Never outside a preview (`entryState` is null then).
@@ -1847,7 +1839,6 @@ defineShortcuts(
 
 const tableStatePreferences = {
   sorting,
-  pagination: paginationState,
   columnFilters: columnFilters,
   columnVisibility,
   filtersOpen: filtersRowOpen,
@@ -1980,6 +1971,7 @@ onMounted(() => {
     :quick-filters="resolvedQuickFilters"
     :footer="resolvedFooter"
     :empty-states="props.emptyStates"
+    :hidden-filters-apply="queryParamHiddenFilters.length > 0"
     :default-page-size="props.pageSize"
     :archive-toggle="canToggleArchived"
     :displays="availableDisplays"

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

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import type { TopListItem } from "../../../composables/chart/types";
+import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
 // Imported rather than resolved from the registry: a registered component is
 // a lazy chunk of its own, fetched only when the data first shows it, so the
 // trend would pop in a beat after the row.
@@ -31,11 +32,11 @@ const props = withDefaults(defineProps<Props>(), {
 
 const PERCENT_UNIT = "%";
 
-const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
-const titleDisplay = computed(() => processI18n(props.item.title));
+const titleDisplay = computed(() => processText(props.item.title));
 const descriptionDisplay = computed(() =>
-  props.item.description ? processI18n(props.item.description) : "",
+  props.item.description ? processText(props.item.description) : "",
 );
 
 const hasSparklineData = computed(

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

@@ -1,3 +1,5 @@
+import type { BlockText } from "#dms-core/app/types/composed-text";
+
 /** Serializable X-axis settings, matching the DMS server contract. */
 export interface ChartXAxis {
   /** Requested intervals; ignored by ApexCharts on datetime axes. */
@@ -100,8 +102,9 @@ export interface KpiCardResponse {
 
 export interface TopListItem {
   id: string | number;
-  title: string;
-  description?: string;
+  /** A literal, a `$`-prefixed i18n key, or a composed text. */
+  title: BlockText;
+  description?: BlockText;
   value: number;
   delta?: number | null;
   sparkline?: number[];