@antelopejs/dms 0.7.1 → 0.7.3

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

@@ -13,34 +13,78 @@ export interface ReplaceUrlVariablesContext {
   response?: Record<string, unknown>;
 }
 
+type EncodeValue = (value: string) => string;
+
+/** How each kind of route value is written into the text. */
+interface TokenEncoding {
+  param: EncodeValue;
+  query: EncodeValue;
+}
+
+const keepValue: EncodeValue = (value) => value;
+
+// A route parameter is a segment of the page path, which the router keeps
+// percent-encoded: it is decoded first so that it is not encoded twice.
+const encodeParam: EncodeValue = (value) => {
+  try {
+    return encodeURIComponent(decodeURIComponent(value));
+  } catch {
+    return encodeURIComponent(value);
+  }
+};
+
+const URL_ENCODING: TokenEncoding = {
+  param: encodeParam,
+  query: encodeURIComponent,
+};
+const TEXT_ENCODING: TokenEncoding = { param: keepValue, query: keepValue };
+
+function fillRouteTokens(
+  text: string,
+  context: ReplaceUrlVariablesContext,
+  encoding: TokenEncoding,
+): string {
+  return text
+    .replace(PARAM_TOKEN, (match, key) => {
+      const value = context.routeParams?.[key];
+      return value ? encoding.param(value) : match;
+    })
+    .replace(QUERY_TOKEN, (match, key) => {
+      const value = context.routeQuery[key];
+      return typeof value === "string" ? encoding.query(value) : match;
+    });
+}
+
+// Written as answered: a response may hand back a whole path to open next
+// (`redirectOnSuccess: "{{response.redirectPath}}"`), which encoding would break.
+function fillResponseTokens(
+  text: string,
+  response: Record<string, unknown> | undefined,
+): string {
+  if (!response) return text;
+  return text.replace(RESPONSE_TOKEN, (match, key) => {
+    const value = response[key];
+    return typeof value === "string" || typeof value === "number"
+      ? String(value)
+      : match;
+  });
+}
+
 /**
  * Fills the `{{params.X}}`, `{{query.X}}` and (with a response)
- * `{{response.X}}` tokens of a URL. A token with no value is left as written.
+ * `{{response.X}}` tokens of a URL. Route values are percent-encoded, so a
+ * value such as `GET /api/a?b=c` stays one query value or one path segment;
+ * response values are written as answered. A token with no value is left as
+ * written.
  */
 export function replaceUrlVariables(
   url: string,
   context: ReplaceUrlVariablesContext,
 ): string {
-  let processedUrl = url.replace(
-    PARAM_TOKEN,
-    (match, key) => context.routeParams?.[key] || match,
+  return fillResponseTokens(
+    fillRouteTokens(url, context, URL_ENCODING),
+    context.response,
   );
-
-  processedUrl = processedUrl.replace(QUERY_TOKEN, (match, key) => {
-    const value = context.routeQuery[key];
-    return typeof value === "string" ? value : match;
-  });
-
-  if (context.response) {
-    processedUrl = processedUrl.replace(RESPONSE_TOKEN, (match, key) => {
-      const value = context.response?.[key];
-      return typeof value === "string" || typeof value === "number"
-        ? String(value)
-        : match;
-    });
-  }
-
-  return processedUrl;
 }
 
 /** Whether a URL still names a token: written so, or left unresolved. */
@@ -61,3 +105,16 @@ export function resolveUrlVariables(
   const resolved = replaceUrlVariables(url, context);
   return hasUrlVariables(resolved) ? undefined : resolved;
 }
+
+/**
+ * A plain value (not a URL) with its route tokens filled as they are, without
+ * encoding, or `undefined` while one is left: a submit default such as
+ * `{{query.status}}` is a field value.
+ */
+export function resolveTextVariables(
+  text: string,
+  context: ReplaceUrlVariablesContext,
+): string | undefined {
+  const resolved = fillRouteTokens(text, context, TEXT_ENCODING);
+  return hasUrlVariables(resolved) ? undefined : resolved;
+}

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

@@ -13,10 +13,12 @@ import {
   type ActivityFeedDay,
   type ActivityFeedItem,
   formatActivityTime,
+  activityText,
   groupActivityByDay,
-  resolveActivityParams,
 } from "../../build/components/activity-feed/activityFeedDays";
+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";
 import type { BlockEmptyText } from "../../build/components/blocks/BlockStatus.vue";
 
 // The renderer's props are optional: DmsActivityFeed is both the backend
@@ -29,6 +31,10 @@ interface ActivityFeedProps extends Partial<DefaultComponentProps> {
   /** Endpoint answering `{ items }`, newest first. */
   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[];
   /**
    * Files the entries under day separators ("Today · Sep 29") with their
    * time; off, each entry shows how long ago it happened.
@@ -62,6 +68,8 @@ const props = withDefaults(defineProps<ActivityFeedProps>(), {
   items: undefined,
   fetchUrl: undefined,
   fetchUrlMethod: undefined,
+  periodScope: undefined,
+  realtimeTopic: undefined,
   groupByDay: true,
   maxItems: undefined,
   fillHeight: false,
@@ -79,6 +87,7 @@ const SKELETON_TITLE_WIDTHS = ["w-3/5", "w-1/2", "w-2/5"];
 
 const { t, locale } = useI18n();
 const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
 const {
   items: list,
@@ -89,6 +98,8 @@ const {
   items: () => props.items,
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
   routeParams: () => props.routeParams,
   watchActions: props.watchActions,
   componentId: props.componentId,
@@ -108,15 +119,15 @@ const days = computed<ActivityFeedDay[]>(() =>
 );
 
 const trailingOf = (item: ActivityFeedItem): string | undefined => {
-  if (item.time) return processI18n(item.time);
+  if (item.time) return processText(item.time);
   if (!item.date) return undefined;
   return props.groupByDay
     ? formatActivityTime(item.date, locale.value)
     : formatRelativeTime(item.date, t, locale.value);
 };
 
-const textOf = (item: ActivityFeedItem, text: string): string =>
-  processI18n(text, resolveActivityParams(item.params, processI18n));
+const textOf = (item: ActivityFeedItem, text: BlockText): string =>
+  processText(activityText(text, item.params));
 
 const metaOf = (item: ActivityFeedItem): string | undefined =>
   item.meta?.length

package/frontend-vue/layers/dms-ui/app/components/blocks/BannerBlock.vue

@@ -2,8 +2,13 @@
 import { computed, ref } from "vue";
 import DmsBanner from "../banner/Banner.vue";
 import DmsBlockActions, {
-  type BlockAction,
+  type BlockActionItem,
+  type BlockButtonAction,
 } from "../../build/components/blocks/BlockActions.vue";
+import { useActionTargets } from "../../build/composables/actions/useActionTargets";
+import { useChartFetch } from "../../composables/chart/useChartFetch";
+import { refreshPageBlocks } from "../../utils/blockRefresh";
+import type { CustomButton } from "../../composables/table-view/types/custom-button";
 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";
@@ -11,11 +16,8 @@ import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 
 type BannerTone = "info" | "success" | "warning" | "error" | "primary";
 
-// `Banner` block (interface-dms `base/banner`): the v2 notice banner placed
-// on a page, with link actions and an optional dismiss that is remembered.
-// Dismissals live in a cookie (like the dashboard banners) so the server
-// render already leaves a dismissed banner out instead of flashing it.
-interface BannerBlockProps extends Partial<DefaultComponentProps> {
+/** What a banner shows (interface-dms `BannerContent`). */
+interface BannerContent {
   /** A string (`$` for an i18n key) or a composed text. */
   title?: BlockText;
   description?: BlockText;
@@ -24,7 +26,8 @@ interface BannerBlockProps extends Partial<DefaultComponentProps> {
   icon?: string;
   /** `md` boxed banner, `sm` compact one-line banner. */
   size?: "sm" | "md";
-  actions?: BlockAction[];
+  /** Links, and buttons running a target when a route answers them. */
+  actions?: BlockActionItem[];
   dismissible?: boolean;
   /**
    * Remembers the dismissal under this key; change it to show the banner
@@ -33,6 +36,28 @@ interface BannerBlockProps extends Partial<DefaultComponentProps> {
   dismissKey?: string;
 }
 
+/** The content drawn: the fetched fields over the options. */
+interface ResolvedBanner extends BannerContent {
+  tone: BannerTone;
+  size: "sm" | "md";
+  actions: BlockActionItem[];
+}
+
+// `Banner` block (interface-dms `base/banner`): the v2 notice banner placed
+// on a page, with actions and an optional dismiss that is remembered.
+// Dismissals live in a cookie (like the dashboard banners) so the server
+// render already leaves a dismissed banner out instead of flashing it. With a
+// `fetchUrl` the route answers the content, or nothing for no banner.
+interface BannerBlockProps
+  extends Partial<DefaultComponentProps>,
+    BannerContent {
+  /** Route answering a `BannerContent`, or `null` / `{}` / 204 to hide. */
+  fetchUrl?: string;
+  fetchUrlMethod?: string;
+  periodScope?: string;
+  realtimeTopic?: string | string[];
+}
+
 const props = withDefaults(defineProps<BannerBlockProps>(), {
   title: undefined,
   description: undefined,
@@ -42,6 +67,10 @@ const props = withDefaults(defineProps<BannerBlockProps>(), {
   actions: () => [],
   dismissible: false,
   dismissKey: undefined,
+  fetchUrl: undefined,
+  fetchUrlMethod: undefined,
+  periodScope: undefined,
+  realtimeTopic: undefined,
 });
 
 const DISMISSED_COOKIE = "dms-dismissed-blocks";
@@ -49,6 +78,11 @@ const DISMISSED_MAX_AGE_S = 60 * 60 * 24 * 365;
 // Keeps the cookie well under the 4 KB limit; the oldest dismissals go first.
 const DISMISSED_MAX_KEYS = 40;
 
+// Keys the actions' drawers and modals are opened under, for a banner placed
+// outside a page (a preview).
+const FALLBACK_COMPONENT_ID = "banner";
+const FALLBACK_PAGE_ID = "page";
+
 const TONE_ICONS: Record<BannerTone, string> = {
   info: "i-ph-info",
   success: "i-ph-check-circle",
@@ -57,7 +91,51 @@ const TONE_ICONS: Record<BannerTone, string> = {
   primary: "i-ph-sparkle",
 };
 
-useWatch(props.watchActions || [], props.componentId);
+const { state: watchState } = useWatch(
+  props.watchActions || [],
+  props.componentId,
+);
+
+const { data } = useChartFetch<BannerContent | null>({
+  fetchUrl: props.fetchUrl,
+  fetchUrlMethod: props.fetchUrlMethod,
+  periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
+  routeParams: () => props.routeParams,
+  watchSource: () => JSON.stringify(watchState.value),
+});
+
+// A button that changed something changes what the page shows: its blocks,
+// this banner included, read their data again.
+const { handleCustomButton } = useActionTargets({
+  api: useAuthFetch().$authFetch,
+  componentId: props.componentId ?? FALLBACK_COMPONENT_ID,
+  pageId: props.pageId ?? FALLBACK_PAGE_ID,
+  refreshCallback: refreshPageBlocks,
+  handleApiError: (error, title) => useApiError(error, { title }),
+});
+
+// A fetched banner is an alert: it draws nothing until its route answered
+// something (a skeleton would flash a banner that may not exist), and nothing
+// when the answer is empty.
+const hasFetchedContent = computed(
+  () => Boolean(data.value) && Object.keys(data.value as object).length > 0,
+);
+
+// Field by field, the route's answer over the options.
+const banner = computed<ResolvedBanner>(() => {
+  const fetched: BannerContent = data.value ?? {};
+  return {
+    title: fetched.title ?? props.title,
+    description: fetched.description ?? props.description,
+    tone: fetched.tone ?? props.tone,
+    icon: fetched.icon ?? props.icon,
+    size: fetched.size ?? props.size,
+    actions: fetched.actions ?? props.actions,
+    dismissible: fetched.dismissible ?? props.dismissible,
+    dismissKey: fetched.dismissKey ?? props.dismissKey,
+  };
+});
 
 const { processText } = useComposedText();
 const dismissed = useDmsCookie<string[]>(DISMISSED_COOKIE, {
@@ -69,19 +147,22 @@ const isClosed = ref(false);
 
 const storageKey = computed(
   () =>
-    props.dismissKey ||
+    banner.value.dismissKey ||
     [props.pageId, props.componentId].filter(Boolean).join(":"),
 );
-const isVisible = computed(
+const isDismissed = computed(
   () =>
-    !isClosed.value &&
-    !(
-      props.dismissible &&
-      storageKey.value &&
-      dismissed.value.includes(storageKey.value)
+    isClosed.value ||
+    Boolean(
+      banner.value.dismissible &&
+        storageKey.value &&
+        dismissed.value.includes(storageKey.value),
     ),
 );
-const isCompact = computed(() => props.size === "sm");
+const isVisible = computed(
+  () => !isDismissed.value && (!props.fetchUrl || hasFetchedContent.value),
+);
+const isCompact = computed(() => banner.value.size === "sm");
 
 function dismiss(): void {
   isClosed.value = true;
@@ -89,31 +170,36 @@ function dismiss(): void {
   if (!key || dismissed.value.includes(key)) return;
   dismissed.value = [...dismissed.value, key].slice(-DISMISSED_MAX_KEYS);
 }
+
+function press(action: BlockButtonAction): void {
+  handleCustomButton(action as CustomButton);
+}
 </script>
 
 <template>
   <DmsBanner
     v-if="isVisible"
-    :title="props.title ? processText(props.title) : undefined"
+    :title="banner.title ? processText(banner.title) : undefined"
     :description="
-      props.description ? processText(props.description) : undefined
+      banner.description ? processText(banner.description) : undefined
     "
-    :icon="props.icon ?? TONE_ICONS[props.tone]"
-    :tone="props.tone"
-    :size="props.size"
-    :dismissible="props.dismissible"
+    :icon="banner.icon ?? TONE_ICONS[banner.tone]"
+    :tone="banner.tone"
+    :size="banner.size"
+    :dismissible="banner.dismissible"
     @dismiss="dismiss"
   >
-    <template v-if="props.actions.length" #actions>
+    <template v-if="banner.actions.length" #actions>
       <DmsBlockActions
-        :actions="props.actions"
+        :actions="banner.actions"
         :size="isCompact ? 'xs' : 'sm'"
         lead-position="last"
         :lead-variant="isCompact ? 'ghost' : 'solid'"
         :lead-color="
-          isCompact ? 'neutral' : props.tone === 'error' ? 'error' : 'primary'
+          isCompact ? 'neutral' : banner.tone === 'error' ? 'error' : 'primary'
         "
         :rest-variant="isCompact ? 'ghost' : 'outline'"
+        @press="press"
       />
     </template>
   </DmsBanner>

package/frontend-vue/layers/dms-ui/app/components/blocks/CodeBlock.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import DmsCodeSnippet from "../code-snippet/CodeSnippet.vue";
+import DmsBlockStatus from "../../build/components/blocks/BlockStatus.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";
+
+/** What the block's data source answers (interface-dms `CodeBlockResponse`). */
+interface CodeBlockResponse {
+  code?: string;
+  language?: string;
+}
+
+// `CodeBlock` block (interface-dms `base/code-block`): read-only code with
+// highlighting and a copy button, written in the options or read from a
+// route answering `{ code, language? }`. DmsCodeSnippet draws it.
+interface CodeBlockProps extends DefaultComponentProps {
+  code?: string;
+  language?: string;
+  copy?: boolean;
+  /** A string (`$` for an i18n key) or a composed text. */
+  title?: BlockText;
+  maxLines?: number;
+  wrap?: boolean;
+  fetchUrl?: string;
+  fetchUrlMethod?: string;
+}
+
+const props = withDefaults(defineProps<CodeBlockProps>(), {
+  code: "",
+  language: undefined,
+  copy: true,
+  title: undefined,
+  maxLines: undefined,
+  wrap: false,
+  fetchUrl: undefined,
+  fetchUrlMethod: undefined,
+});
+
+// The placeholder lines while the route answers, at the code's line height.
+const SKELETON_LINE_WIDTHS = ["w-2/3", "w-1/2", "w-3/4"];
+
+const { processText } = useComposedText();
+const { state: watchState } = useWatch(
+  props.watchActions || [],
+  props.componentId,
+);
+
+const { data, isLoading, error, refresh } = useChartFetch<CodeBlockResponse>({
+  fetchUrl: props.fetchUrl,
+  fetchUrlMethod: props.fetchUrlMethod,
+  routeParams: () => props.routeParams,
+  watchSource: () => JSON.stringify(watchState.value),
+});
+
+const code = computed(() => data.value?.code ?? props.code);
+const language = computed(() => data.value?.language ?? props.language);
+const title = computed(() =>
+  props.title ? processText(props.title) : undefined,
+);
+const showSkeleton = computed(() => isLoading.value && !data.value);
+// A failed first load shows a retry in place of the code; a failed refetch
+// keeps the code on screen.
+const hasError = computed(
+  () => !isLoading.value && !data.value && Boolean(error.value),
+);
+</script>
+
+<template>
+  <DmsBlockStatus v-if="hasError" state="error" @retry="refresh()" />
+  <div
+    v-else-if="showSkeleton"
+    class="border-default grid gap-2 rounded-[10px] border px-3.5 py-3"
+    aria-busy="true"
+  >
+    <USkeleton
+      v-for="width in SKELETON_LINE_WIDTHS"
+      :key="width"
+      class="h-3"
+      :class="width"
+    />
+  </div>
+  <DmsCodeSnippet
+    v-else
+    :code="code"
+    :language="language"
+    :copy="props.copy"
+    :title="title"
+    :max-lines="props.maxLines"
+    :wrap="props.wrap"
+  />
+</template>

package/frontend-vue/layers/dms-ui/app/components/blocks/EmptyStateBlock.vue

@@ -4,6 +4,7 @@ import DmsEmptyState, {
   type EmptyStateSize,
   type EmptyStateVariant,
 } from "../empty-state/EmptyState.vue";
+import DmsCodeSnippet from "../code-snippet/CodeSnippet.vue";
 import DmsBlockActions, {
   type BlockAction,
 } from "../../build/components/blocks/BlockActions.vue";
@@ -15,6 +16,13 @@ import type { DefaultComponentProps } from "../../../../dms-core/app/types/compo
 // .c-empty placed on a page — a first-run screen, a "nothing here yet" panel
 // — with link actions. In a card by default. Texts follow the `$` i18n-key
 // convention.
+/** A snippet under the text (interface-dms `EmptyStateCode`). */
+interface EmptyStateCode {
+  content: string;
+  language?: string;
+  copy?: boolean;
+}
+
 interface EmptyStateBlockProps extends Partial<DefaultComponentProps> {
   title?: string;
   description?: string;
@@ -25,6 +33,8 @@ interface EmptyStateBlockProps extends Partial<DefaultComponentProps> {
   hatched?: boolean;
   size?: EmptyStateSize;
   actions?: BlockAction[];
+  /** A snippet between the text and the actions. */
+  code?: EmptyStateCode;
   /** Card surface around it; off when it sits inside a Card block. */
   card?: boolean;
 }
@@ -38,6 +48,7 @@ const props = withDefaults(defineProps<EmptyStateBlockProps>(), {
   hatched: false,
   size: "md",
   actions: () => [],
+  code: undefined,
   card: true,
 });
 
@@ -61,6 +72,13 @@ const description = computed(() =>
       :hatched="props.hatched"
       :size="props.size"
     >
+      <template v-if="props.code" #content>
+        <DmsCodeSnippet
+          :code="props.code.content"
+          :language="props.code.language"
+          :copy="props.code.copy ?? true"
+        />
+      </template>
       <template v-if="props.actions.length" #actions>
         <DmsBlockActions :actions="props.actions" size="sm" />
       </template>

package/frontend-vue/layers/dms-ui/app/components/blocks/KeyValueListBlock.vue

@@ -35,6 +35,10 @@ interface KeyValueListBlockProps extends DefaultComponentProps {
   card?: boolean;
   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[];
   /** Shown when there is nothing to list. */
   empty?: BlockEmptyText;
   /**
@@ -53,6 +57,8 @@ const props = withDefaults(defineProps<KeyValueListBlockProps>(), {
   card: true,
   fetchUrl: undefined,
   fetchUrlMethod: undefined,
+  periodScope: undefined,
+  realtimeTopic: undefined,
   empty: undefined,
   // A fetched list's length is unknown until it lands: draw the rows a record
   // card usually lists (customer, ids, status, amounts, dates), not a stub.
@@ -68,6 +74,8 @@ const { items, isPending, hasError, refresh } =
     items: () => props.items,
     fetchUrl: props.fetchUrl,
     fetchUrlMethod: props.fetchUrlMethod,
+    periodScope: props.periodScope,
+    realtimeTopic: props.realtimeTopic,
     routeParams: () => props.routeParams,
     watchActions: props.watchActions,
     componentId: props.componentId,

package/frontend-vue/layers/dms-ui/app/components/blocks/NavCardGridBlock.vue

@@ -14,22 +14,24 @@ import DmsBlockStatus, {
 import { useBlockItems } from "../../build/composables/blocks/useBlockItems";
 import type { IconWellTone } from "../icon-well/IconWell.vue";
 import type { Tone } from "../../types/tone";
+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";
 
 // `NavCardGrid` block (interface-dms `base/nav-card-grid`): a responsive grid
 // of navigation cards (v2 settings overview, a module's home), static or from
 // `fetchUrl` (`{ items }`) so each card can carry its target's live state.
 interface NavCardGridItem {
   id?: string;
-  title: string;
-  description?: string;
+  title: BlockText;
+  description?: BlockText;
   icon: string;
   iconTone?: IconWellTone;
   to: string;
-  state?: string;
+  state?: BlockText;
   stateTone?: Tone;
-  tag?: string;
-  readout?: string[];
+  tag?: BlockText;
+  readout?: BlockText[];
   /** The page's navigation badge (a category's cards), in the top corner. */
   badge?: string;
   badgeTone?: Tone;
@@ -49,6 +51,10 @@ interface NavCardGridBlockProps extends DefaultComponentProps {
   description?: string;
   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[];
   /** Shown when there is nothing to list. */
   empty?: BlockEmptyText;
   /**
@@ -66,6 +72,8 @@ const props = withDefaults(defineProps<NavCardGridBlockProps>(), {
   description: undefined,
   fetchUrl: undefined,
   fetchUrlMethod: undefined,
+  periodScope: undefined,
+  realtimeTopic: undefined,
   empty: undefined,
   skeletonCount: undefined,
 });
@@ -77,6 +85,7 @@ const MIN_CARD_WIDTH = "16rem";
 const CARD_GAP = "0.75rem";
 
 const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
 const { cards: categoryCards } = useCategoryNavCards(() => props.categoryId);
 const veil = usePreviewEntryVeil();
@@ -90,6 +99,8 @@ const {
   items: () => props.items,
   fetchUrl: props.fetchUrl,
   fetchUrlMethod: props.fetchUrlMethod,
+  periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
   routeParams: () => props.routeParams,
   watchActions: props.watchActions,
   componentId: props.componentId,
@@ -119,10 +130,11 @@ const cards = computed(() =>
   items.value.map((item, index) => ({
     ...item,
     key: item.id ?? `${index}-${item.to}`,
-    title: processI18n(item.title ?? ""),
-    description: item.description ? processI18n(item.description) : undefined,
-    state: item.state ? processI18n(item.state) : undefined,
-    readout: item.readout?.map((line) => processI18n(line)),
+    title: processText(item.title),
+    description: item.description ? processText(item.description) : undefined,
+    state: item.state ? processText(item.state) : undefined,
+    tag: item.tag ? processText(item.tag) : undefined,
+    readout: item.readout?.map((line) => processText(line)),
   })),
 );
 // v2 .sx-grid: cards closing on a state line run a tighter rhythm, the whole