@antelopejs/dms 0.7.11 → 0.7.13

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, resolveComponent } from "vue";
+import { computed, ref, resolveComponent } from "vue";
 import DmsActivityItem from "../activity/ActivityItem.vue";
 import DmsBlockActions, {
   type BlockAction,
@@ -48,6 +48,16 @@ interface ActivityFeedProps extends Partial<DefaultComponentProps> {
   groupByDay?: boolean;
   /** Shows at most this many entries. */
   maxItems?: number;
+  /**
+   * Shows the first this many entries, and a "Show N more" button under them
+   * that unfolds the rest (up to `maxItems`), and folds them back.
+   */
+  visibleItems?: number;
+  /**
+   * Entries wrap their title, details and detail line rather than cutting
+   * each to one line with an ellipsis.
+   */
+  wrap?: boolean;
   /**
    * Fills its grid cell instead of growing with its entries, which scroll
    * under the fixed head: the cards beside it set the row's height.
@@ -80,6 +90,8 @@ const props = withDefaults(defineProps<ActivityFeedProps>(), {
   realtimeTopic: undefined,
   groupByDay: true,
   maxItems: undefined,
+  visibleItems: undefined,
+  wrap: false,
   fillHeight: false,
   skeletonCount: undefined,
   actions: () => [],
@@ -119,13 +131,36 @@ const entries = computed<ActivityFeedItem[]>(() =>
   props.maxItems ? list.value.slice(0, props.maxItems) : list.value,
 );
 
+// Folded, the feed shows its first `visibleItems` entries; the button under
+// them unfolds the rest and folds them back.
+const isUnfolded = ref(false);
+const foldedCount = computed(() =>
+  props.visibleItems
+    ? Math.max(0, entries.value.length - props.visibleItems)
+    : 0,
+);
+const shownEntries = computed<ActivityFeedItem[]>(() =>
+  foldedCount.value > 0 && !isUnfolded.value
+    ? entries.value.slice(0, props.visibleItems)
+    : entries.value,
+);
+const foldLabel = computed(() =>
+  isUnfolded.value
+    ? t("dms.activity_feed.show_fewer")
+    : t(
+        "dms.activity_feed.show_more",
+        { count: foldedCount.value },
+        foldedCount.value,
+      ),
+);
+
 const days = computed<ActivityFeedDay[]>(() =>
   props.groupByDay
-    ? groupActivityByDay(entries.value, locale.value, {
+    ? groupActivityByDay(shownEntries.value, locale.value, {
         today: t("dms.activity_feed.today"),
         yesterday: t("dms.activity_feed.yesterday"),
       })
-    : [{ key: "all", items: entries.value }],
+    : [{ key: "all", items: shownEntries.value }],
 );
 
 const trailingOf = (item: ActivityFeedItem): string | undefined => {
@@ -158,11 +193,12 @@ const metaOf = (item: ActivityFeedItem): string | undefined =>
 const isFirstLoad = isPending;
 
 // The placeholder takes the feed's loaded shape: as many rows as it will show
-// (`skeletonCount`, else `maxItems`; never more than `maxItems`), under day
-// separators when the entries are grouped by day.
+// (`skeletonCount`, else `visibleItems` or `maxItems`; never more than
+// those), under day separators when the entries are grouped by day.
 const skeletonDays = computed<number[][]>(() => {
-  const wanted = props.skeletonCount ?? props.maxItems ?? SKELETON_ROWS;
-  const count = props.maxItems ? Math.min(wanted, props.maxItems) : wanted;
+  const shown = props.visibleItems ?? props.maxItems;
+  const wanted = props.skeletonCount ?? shown ?? SKELETON_ROWS;
+  const count = shown ? Math.min(wanted, shown) : wanted;
   const perDay = props.groupByDay ? SKELETON_ROWS_PER_DAY : count;
   const days: number[][] = [];
   for (let start = 0; start < count; start += perDay) {
@@ -328,10 +364,25 @@ const wrapperProps = computed(() =>
             :trailing="trailingOf(item)"
             :unread="item.unread"
             :mono="props.mono"
+            :wrap="props.wrap"
             :to="item.to"
             :interactive="!!item.to"
           />
         </section>
+        <div
+          v-if="foldedCount > 0"
+          class="dms-activity-feed__fold border-t border-(--ui-border-muted) px-[18px] pt-2 pb-1"
+        >
+          <UButton
+            :label="foldLabel"
+            :aria-expanded="isUnfolded"
+            color="neutral"
+            variant="link"
+            size="xs"
+            class="p-0 font-medium"
+            @click="isUnfolded = !isUnfolded"
+          />
+        </div>
       </div>
     </div>
   </component>

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

@@ -4,6 +4,7 @@ import DmsCodeSnippet from "../code-snippet/CodeSnippet.vue";
 import DmsBlockStatus from "../../build/components/blocks/BlockStatus.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { readFetchNotFound } from "../../build/utils/fetchNotFound";
+import { PLAIN_CODE_LANGUAGE } from "../../build/utils/codeLanguages";
 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";
@@ -58,7 +59,10 @@ const { data, isLoading, error, refresh } = useChartFetch<CodeBlockResponse>({
 });
 
 const code = computed(() => data.value?.code ?? props.code);
-const language = computed(() => data.value?.language ?? props.language);
+// The block always heads its code with its language, plain text included.
+const language = computed(
+  () => data.value?.language ?? props.language ?? PLAIN_CODE_LANGUAGE,
+);
 const title = computed(() =>
   props.title ? processText(props.title) : undefined,
 );

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

@@ -5,6 +5,7 @@ import DmsEmptyState, {
   type EmptyStateVariant,
 } from "../empty-state/EmptyState.vue";
 import DmsCodeSnippet from "../code-snippet/CodeSnippet.vue";
+import { PLAIN_CODE_LANGUAGE } from "../../build/utils/codeLanguages";
 import DmsBlockActions, {
   type BlockAction,
 } from "../../build/components/blocks/BlockActions.vue";
@@ -75,7 +76,7 @@ const description = computed(() =>
       <template v-if="props.code" #content>
         <DmsCodeSnippet
           :code="props.code.content"
-          :language="props.code.language"
+          :language="props.code.language ?? PLAIN_CODE_LANGUAGE"
           :copy="props.code.copy ?? true"
         />
       </template>

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

@@ -5,11 +5,11 @@ import { usePageLive } from "../../composables/live/usePageLive";
 import { formatElapsed } from "../../build/composables/live/formatElapsed";
 import { useLiveToggleShortcut } from "../../build/composables/live/useLiveToggleShortcut";
 import { HIDDEN_TAB_NOTE } from "../../build/composables/live/pageLiveController";
+import type { ConfirmTranslate } from "../../build/composables/confirm/confirmDialogTexts";
 import {
-  resolveConfirmText,
-  type ConfirmTranslate,
-} from "../../build/composables/confirm/confirmDialogTexts";
-import type { PageLiveNote, PageLiveNoteTone } from "../../types/live";
+  missedRowsText,
+  showLiveNote,
+} from "../../build/composables/live/liveNotes";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 
 interface LiveToggleBlockProps extends DefaultComponentProps {
@@ -40,11 +40,6 @@ const ALIGN_CLASSES: Record<
   center: "justify-center",
   right: "justify-end",
 };
-const TONE_CLASSES: Record<PageLiveNoteTone, string> = {
-  neutral: "",
-  warning: "text-warning",
-  error: "text-error",
-};
 const PILL_BUTTON_CLASS =
   "focus-visible:outline-primary flex items-center gap-1.5 rounded-[5px] px-2 py-1 text-[12px] font-medium transition-colors focus-visible:outline-2";
 const PILL_IDLE_CLASS = "text-muted hover:text-default hover:bg-elevated";
@@ -90,15 +85,10 @@ const updatedLabel = computed(() => {
     : updated;
 });
 
-const noteText = (note: PageLiveNote) =>
-  resolveConfirmText(note.text, note.params ?? {}, translate);
-
 const missedText = computed(() => {
   const count = live.missedCount.value;
   if (count === 0) return "";
-  return props.missedLabel
-    ? resolveConfirmText(props.missedLabel, { count }, translate)
-    : t("dms.live.new_rows", { count }, count);
+  return missedRowsText(count, props.missedLabel, translate);
 });
 
 // "Paused · typing in the Tester · 40 new requests", the detail apart: it
@@ -107,7 +97,7 @@ const pausedText = computed(() => {
   const reason = live.pauseReason.value;
   return [
     t("dms.live.paused"),
-    reason ? noteText(reason) : "",
+    reason ? showLiveNote(reason, translate).text : "",
     missedText.value,
   ]
     .filter((part) => part !== "")
@@ -117,10 +107,7 @@ const pausedText = computed(() => {
 const detail = computed(() => {
   const note = live.missedDetail.value;
   if (!note || live.missedCount.value === 0) return null;
-  return {
-    text: noteText(note),
-    toneClass: TONE_CLASSES[note.tone ?? "neutral"],
-  };
+  return showLiveNote(note, translate);
 });
 
 // A hidden tab resumes by itself when it shows again: no button for it.

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

@@ -21,6 +21,7 @@ import type {
   ChartAnnotation,
   ChartAutoYRange,
   ChartCurve,
+  ChartLegendPosition,
   ChartResponse,
   ChartSeries,
   ChartType,
@@ -48,6 +49,7 @@ interface Props extends DefaultComponentProps {
   showGrid?: boolean;
   showTooltip?: boolean;
   showLegend?: boolean;
+  legendPosition?: ChartLegendPosition;
   smooth?: boolean;
   curve?: ChartCurve;
   stacked?: boolean;
@@ -238,6 +240,7 @@ const apex = useApexChart(() => ({
   showGrid: props.showGrid,
   showTooltip: props.showTooltip,
   showLegend: effectiveShowLegend.value,
+  legendPosition: props.legendPosition,
   smooth: props.smooth,
   curve: props.curve,
   stacked: props.stacked,

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

@@ -29,11 +29,14 @@ interface Props extends DefaultComponentProps {
   fetchUrl?: string;
   fetchUrlMethod?: string;
   periodScope?: string;
+  realtimeTopic?: string | string[];
   valueFormat?: ValueFormat;
   currencyCode?: string;
   valuePrecision?: ValuePrecision;
   showDelta?: boolean;
   showLegend?: boolean;
+  /** The wrapped chart draws its own legend, naming each series. */
+  showSeriesLegend?: boolean;
   primaryLabel?: string;
   comparisonLabel?: string;
 }
@@ -53,6 +56,7 @@ const DEFAULT_COMPARISON_LABEL_KEY = "dms.chart.legend_comparison";
 const props = withDefaults(defineProps<Props>(), {
   showDelta: true,
   showLegend: true,
+  showSeriesLegend: false,
   valueFormat: "compact",
   currencyCode: "EUR",
 });
@@ -71,6 +75,7 @@ const { data, isLoading } = useChartFetch<ChartCardResponse>({
   fetchUrlMethod: props.fetchUrlMethod,
   routeParams: () => props.routeParams,
   periodScope: props.periodScope,
+  realtimeTopic: props.realtimeTopic,
   watchSource: () => watchKey.value,
 });
 
@@ -126,7 +131,7 @@ const nestedContext = reactive<NestedChartContext>({
   cardSeries: [],
   cardComparisonSeries: [],
   isLoading: false,
-  hideLegend: true,
+  hideLegend: !props.showSeriesLegend,
   valueFormat: props.valueFormat,
   currencyCode: props.currencyCode,
   valuePrecision: props.valuePrecision,
@@ -138,6 +143,7 @@ watchEffect(() => {
   nestedContext.cardSeries = cardSeries.value;
   nestedContext.cardComparisonSeries = cardComparisonSeries.value;
   nestedContext.isLoading = isLoading.value;
+  nestedContext.hideLegend = !props.showSeriesLegend;
   nestedContext.valueFormat = props.valueFormat;
   nestedContext.currencyCode = props.currencyCode;
   nestedContext.valuePrecision = props.valuePrecision;

package/frontend-vue/layers/dms-ui/app/components/code-snippet/CodeSnippet.vue

@@ -10,7 +10,17 @@ import type { CodeToken, highlightCode } from "../../build/utils/codeHighlight";
 
 // Read-only code in the editor's look: a head with the title, the language
 // and a copy button, then the code highlighted by the editor's languages.
-// Until the highlighter loads (and on the server) the code shows as is.
+// Without a title or a language there is no head: the copy button floats in
+// the code's corner. Until the highlighter loads (and on the server) the
+// code shows as is.
+
+/**
+ * How long lines break: `false` scrolls them sideways, `true` wraps them
+ * between words, `"anywhere"` also breaks a word too long for the line (a
+ * URL, a token, a minified payload).
+ */
+type CodeSnippetWrap = boolean | "anywhere";
+
 interface CodeSnippetProps {
   /** The code, verbatim. */
   code: string;
@@ -25,8 +35,13 @@ interface CodeSnippetProps {
   title?: string;
   /** Lines shown before the code scrolls; all of them when unset. */
   maxLines?: number;
+  /**
+   * A CSS height the code scrolls past (`"20rem"`), when `maxLines` is not
+   * set: for a payload whose lines differ in length once wrapped.
+   */
+  maxHeight?: string;
   /** Wraps long lines instead of scrolling sideways. */
-  wrap?: boolean;
+  wrap?: CodeSnippetWrap;
 }
 
 const props = withDefaults(defineProps<CodeSnippetProps>(), {
@@ -34,6 +49,7 @@ const props = withDefaults(defineProps<CodeSnippetProps>(), {
   copy: true,
   title: undefined,
   maxLines: undefined,
+  maxHeight: undefined,
   wrap: false,
 });
 
@@ -41,24 +57,39 @@ const LINE_HEIGHT_PX = 19;
 // The code's top and bottom padding (`py-2`), around its lines.
 const CODE_PADDING_PX = 16;
 
+const WRAP_CLASSES: Record<"false" | "true" | "anywhere", string> = {
+  false: "whitespace-pre",
+  true: "break-words whitespace-pre-wrap",
+  anywhere: "whitespace-pre-wrap [overflow-wrap:anywhere]",
+};
+
 const highlight = shallowRef<typeof highlightCode | null>(null);
 
 const language = computed(() => resolveCodeLanguage(props.language));
+// A language given, even `text`, is named in a head; without a title either,
+// a head would only hold the copy button.
+const isHeadless = computed(() => !props.title && props.language === undefined);
 const hasHead = computed(
-  () => !!props.title || props.copy || language.value !== PLAIN_CODE_LANGUAGE,
+  () =>
+    !isHeadless.value &&
+    (!!props.title || props.copy || language.value !== PLAIN_CODE_LANGUAGE),
+);
+const hasFloatingCopy = computed(() => isHeadless.value && props.copy);
+const wrapClass = computed(
+  () => WRAP_CLASSES[String(props.wrap) as keyof typeof WRAP_CLASSES],
 );
 const tokens = computed<CodeToken[]>(() =>
   highlight.value
     ? highlight.value(props.code, language.value)
     : [{ text: props.code }],
 );
-const sizeStyle = computed(() =>
-  props.maxLines
-    ? {
-        maxHeight: `${props.maxLines * LINE_HEIGHT_PX + CODE_PADDING_PX}px`,
-      }
-    : undefined,
-);
+const sizeStyle = computed(() => {
+  if (props.maxLines)
+    return {
+      maxHeight: `${props.maxLines * LINE_HEIGHT_PX + CODE_PADDING_PX}px`,
+    };
+  return props.maxHeight ? { maxHeight: props.maxHeight } : undefined;
+});
 
 onMounted(async () => {
   const module = await import("../../build/utils/codeHighlight");
@@ -68,7 +99,7 @@ onMounted(async () => {
 
 <template>
   <div
-    class="border-default min-w-0 overflow-hidden rounded-[10px] border bg-(--ui-bg)"
+    class="border-default relative min-w-0 overflow-hidden rounded-[10px] border bg-(--ui-bg)"
   >
     <div
       v-if="hasHead"
@@ -85,10 +116,17 @@ onMounted(async () => {
       </span>
       <DmsCopyButton v-if="props.copy" :value="props.code" />
     </div>
+    <!-- Kept clear of the code: the code's end padding leaves it room. -->
+    <DmsCopyButton
+      v-if="hasFloatingCopy"
+      :value="props.code"
+      class="absolute end-1 top-1"
+      data-floating-copy
+    />
     <!-- Focusable: a keyboard scrolls the code when it overflows. -->
     <pre
-      class="text-highlighted m-0 overflow-auto px-3.5 py-2 font-mono text-[12.5px] leading-[19px]"
-      :class="props.wrap ? 'break-words whitespace-pre-wrap' : 'whitespace-pre'"
+      class="text-highlighted m-0 overflow-auto py-2 ps-3.5 font-mono text-[12.5px] leading-[19px]"
+      :class="[wrapClass, hasFloatingCopy ? 'pe-10' : 'pe-3.5']"
       :style="sizeStyle"
       :data-language="language"
       tabindex="0"

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

@@ -17,6 +17,10 @@ import {
   type FormValidator,
 } from "../../composables/form/types/validation";
 import { FORM_FIELD_LOADING_KEY } from "../../composables/form/types/field-loading";
+import {
+  FORM_HANDLE_KEY,
+  linkedFieldId,
+} from "../../build/composables/form/enclosingForm";
 import { FORM_CONTENT_LANGUAGE_KEY } from "../../composables/form/types/content-language";
 import { DMS_SECTION_SURFACE_KEY } from "../../build/components/section/context";
 import DmsSaveBar from "../save-bar/SaveBar.vue";
@@ -30,7 +34,7 @@ import { DMS_CONTAINER_KEY } from "../../build/composables/containers/context";
 import { useFormDirty } from "../../composables/unsaved-changes/useFormDirty";
 import { useUnsavedChanges } from "../../composables/unsaved-changes/useUnsavedChanges";
 import { formSaveMode } from "../../build/composables/form/formFooter";
-import { usePageRecordLabel } from "#dms-core/app/build/composables/page/usePageRecordLabel";
+import { usePageRecordLabel } from "#dms-core/app/composables/page/usePageRecordLabel";
 import { formatRecordLabel } from "../../build/composables/table-view/utils/formTexts";
 import {
   FORM_ENTRY_CONTEXT_KEY,
@@ -168,6 +172,13 @@ async function focusField(name: string | undefined): Promise<void> {
   row?.scrollIntoView({ block: "center" });
 }
 
+/** Brings a field into view and focuses it: a link's anchor, a field's request. */
+async function revealField(fieldId: string): Promise<void> {
+  await formSettled();
+  fieldRow(fieldId)?.scrollIntoView({ block: "center" });
+  await focusField(fieldId);
+}
+
 /**
  * A refused submit: its field errors go under the fields, the first focused.
  *
@@ -516,6 +527,13 @@ function onSubmit(event: Parameters<typeof handleSubmit>[0]) {
 }
 
 provide(FORM_VALIDATOR_KEY, registerValidator);
+provide(FORM_HANDLE_KEY, {
+  submit: async () => {
+    await form.value?.submit();
+  },
+  registerValidator,
+  revealField,
+});
 provide(FORM_FIELD_LOADING_KEY, setFieldLoading);
 provide(FORM_CONTENT_LANGUAGE_KEY, "*");
 
@@ -580,6 +598,25 @@ if (props.labelKey && !inFormContainer) {
   });
 }
 
+// A page opened on a field's anchor (`#retentionDays`, the id of its
+// control) brings it into view and focuses it once drawn: a link followed
+// inside the app gets no jump from the browser, and the fields of a record
+// exist only once it loaded. A form in a drawer or a modal follows none: the
+// anchor is the page's.
+if (!inFormContainer && !container) {
+  const followFieldAnchor = () => {
+    const fieldId = linkedFieldId(window.location.hash, allFieldIds.value);
+    if (fieldId) void revealField(fieldId);
+  };
+  onMounted(() => {
+    followFieldAnchor();
+    window.addEventListener("hashchange", followFieldAnchor);
+  });
+  onBeforeUnmount(() =>
+    window.removeEventListener("hashchange", followFieldAnchor),
+  );
+}
+
 const isHorizontal = props.fieldsOrientation !== "vertical";
 const surface: FormSurface = inFormContainer
   ? "container"

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

@@ -4,9 +4,14 @@ import type {
   InputNumberEmits,
   InputNumberSlots,
 } from "@nuxt/ui/components/InputNumber.vue";
-import { computed } from "vue";
+import { computed, nextTick } from "vue";
 import { useForwardPropsEmits } from "reka-ui";
 import { useControlError } from "../../../build/composables/form/useControlError";
+import {
+  numberAdjustment,
+  parseTypedNumber,
+} from "../../../build/utils/numberAdjustment";
+import type { InputNumberAdjustment } from "../../../types/input-number";
 
 defineOptions({ inheritAttrs: false });
 
@@ -15,16 +20,27 @@ interface InputNumberFieldProps extends InputNumberProps {
   suffix?: string;
 }
 
+interface InputNumberAdjustEmits {
+  /**
+   * The field kept another value than the one typed, on leaving it or on
+   * Enter: clamped to `min` / `max`, or put on its `step`.
+   */
+  adjust: [adjustment: InputNumberAdjustment];
+}
+
+type InputNumberFieldEmits = InputNumberEmits & InputNumberAdjustEmits;
+
 const props = defineProps<InputNumberFieldProps>();
-const emits = defineEmits<InputNumberEmits>();
+const emits = defineEmits<InputNumberFieldEmits>();
 defineSlots<InputNumberSlots>();
 
 const forwarded = useForwardPropsEmits(props, emits);
 const inputProps = computed(() => {
-  const { suffix: _suffix, ...rest } = forwarded.value;
+  const { suffix: _suffix, onAdjust: _onAdjust, ...rest } = forwarded.value;
   return rest;
 });
 const { processI18n } = useTranslation();
+const { locale } = useI18n();
 
 // v2 number fields keep the value left-aligned with a compact caret stepper.
 const DEFAULT_ORIENTATION = "vertical";
@@ -41,6 +57,41 @@ function onIncomingText(event: InputEvent): void {
   const refusesNegative = props.min !== undefined && props.min >= 0;
   report(refusesNegative && text.includes("-") ? BELOW_MIN : undefined);
 }
+
+// What was typed since the field last settled, and the value it settled on.
+let typedText: string | null = null;
+let settledValue: number | null | undefined;
+
+function onTyped(event: Event): void {
+  typedText = (event.target as HTMLInputElement).value;
+  settledValue = undefined;
+}
+
+function onSettledValue(value: number | null | undefined): void {
+  settledValue = value;
+}
+
+// The number field keeps its own copy of the text typed, which it does not
+// always redraw when it settles on the value it already held (1020 typed
+// over 1,000): its `change` handler copies the kept value's text back.
+function redraw(input: HTMLInputElement): void {
+  input.dispatchEvent(new Event("change"));
+}
+
+/** Once the field applied the typed text: on leaving it, or on Enter. */
+async function settle(event: Event): Promise<void> {
+  if (typedText === null) return;
+  const text = typedText;
+  typedText = null;
+  const input = event.target as HTMLInputElement;
+  await nextTick();
+  const typed = parseTypedNumber(text, props.locale ?? locale.value);
+  const kept = settledValue === undefined ? props.modelValue : settledValue;
+  const adjustment = numberAdjustment(typed, kept, props);
+  if (!adjustment) return;
+  emits("adjust", adjustment);
+  redraw(input);
+}
 </script>
 
 <template>
@@ -49,9 +100,13 @@ function onIncomingText(event: InputEvent): void {
   <div
     :class="props.suffix ? 'flex items-center gap-2' : 'contents'"
     @beforeinput.capture="onIncomingText"
+    @input="onTyped"
+    @keydown.enter="settle"
   >
     <UInputNumber
       v-bind="{ ...inputProps, ...$attrs }"
+      @blur="settle"
+      @update:model-value="onSettledValue"
       :class="props.suffix && 'min-w-0 flex-1'"
       :orientation="props.orientation ?? DEFAULT_ORIENTATION"
       :increment="{ color: 'neutral' }"

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

@@ -3,8 +3,11 @@ import type { TabProps } from "../../composables/tab/types";
 import { type TabBadges, TabVariant } from "../../composables/tab/types/props";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { confirmLeave } from "../../build/composables/unsaved-changes/registry";
+import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
+import type { BadgeProps } from "@nuxt/ui";
 
 const { processI18n } = useTranslation();
+const { processText } = useComposedText();
 
 const props = withDefaults(defineProps<TabProps>(), {
   // A tab set with nothing in it yet is a legitimate state — a page being
@@ -45,9 +48,24 @@ const countFormat = computed(() => new Intl.NumberFormat(locale.value));
 const COUNT_BADGE_CLASS =
   "rounded-[4px] bg-elevated px-[5px] py-px font-mono text-[10.5px] font-semibold tabular-nums text-dimmed ring-0 in-data-[state=active]:bg-primary/10 in-data-[state=active]:text-primary";
 
+type TabBadge = TabProps["items"][number]["badge"];
+
+// A badge written as text is a BlockText: a `$` key or a ComposedText is
+// written in the reader's language, a number as it is.
+function writtenBadge(
+  badge: TabBadge,
+): string | number | BadgeProps | undefined {
+  if (badge === undefined || typeof badge === "number") return badge;
+  if (typeof badge === "string" || "key" in badge) return processText(badge);
+  const { label } = badge;
+  return typeof label === "string"
+    ? { ...badge, label: processText(label) }
+    : badge;
+}
+
 function badgeOf(item: TabProps["items"][number]) {
   const fetched = fetchedBadges.value?.[item.slot];
-  if (fetched === undefined) return item.badge;
+  if (fetched === undefined) return writtenBadge(item.badge);
   return typeof fetched === "number"
     ? countFormat.value.format(fetched)
     : fetched;

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

@@ -827,6 +827,8 @@ const liveHold = useTableLiveHold({
   gate: () => liveGate,
   signals: {
     isRowOpen: () => openRowId.value !== undefined,
+    isSearching: () => !!effectiveGlobalFilter.value,
+    isSorted: () => !isSameSorting(effectiveSorting.value, defaultSortState),
     tableElement: () => tableRoot.value?.$el ?? null,
   },
 });
@@ -2102,9 +2104,15 @@ onMounted(() => {
     @duplicate="handleRowDuplicate"
     @edit="handleRowEdit"
   >
-    <template v-if="liveHold.newCount.value > 0" #notice>
+    <template
+      v-if="liveHold.newCount.value > 0 || liveHold.reason.value"
+      #notice
+    >
       <LiveHoldBanner
         :count="liveHold.newCount.value"
+        :reason="liveHold.reason.value"
+        :missed-label="liveHold.missedLabel"
+        :detail="liveHold.missedDetail.value"
         @show="liveHold.showNew"
       />
     </template>

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

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

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

@@ -64,6 +64,9 @@ export interface ChartSeries {
 
 export type ChartCurve = "smooth" | "straight" | "stepline";
 
+/** Mirror of `ChartLegendPosition`: where a chart draws its legend. */
+export type ChartLegendPosition = "top" | "bottom";
+
 /** Opt-in expansion of native Y bounds to include annotation lines and bands. */
 export interface ChartAutoYRange {
   /** Outward fraction of each bound's magnitude (or 1 at zero). Defaults to 0.08. */