@antelopejs/dms 0.7.7 → 0.7.8

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

@@ -37,6 +37,7 @@ import type {
   FormPageUrls,
 } from "../../composables/table-view/useTableViewConfig";
 import type { CustomRowAction } from "../../../types/row-action";
+import type { TableViewRowClick } from "../../utils/rowClickTrigger";
 import type { RowActionConfig } from "#dms-core/app/types/row-action";
 import type { TableTabItem } from "./Tabs.vue";
 import type { ColumnDisplay } from "../../composables/data-types/useColumnValueRenderer";
@@ -149,6 +150,13 @@ export interface TableProps<T> {
 
   rowIdKey?: string;
   rowActions?: TableRowActionOptions;
+  /**
+   * What runs a row's click action: a double-click (the default) or a single
+   * click (`"single"`). See `isRowClickTrigger`.
+   */
+  rowClick?: TableViewRowClick;
+  /** Id of the row a side panel has open: the grid highlights it. */
+  openRowId?: string;
   customNavItems?: NavItem[];
   tabs?: TableTabItem[];
   customButtons?: CustomButton[];
@@ -412,6 +420,7 @@ import {
 } from "../../composables/table/constants";
 import { mergeColumnOrder } from "../../composables/table/utils/columnOrder";
 import { EYEBROW_CLASS } from "../../utils/eyebrow";
+import { isRowClickTrigger } from "../../utils/rowClickTrigger";
 
 // Same color as the surrounding card frame (.dms-card) so sticky
 // rail/pinned cells blend in instead of showing a contrasting block.
@@ -435,6 +444,12 @@ const ROW_SELECTED_BG = "data-[selected=true]:bg-primary/10";
 const ROW_SELECTED_CELL_BG =
   "group-data-[selected=true]:bg-[color-mix(in_srgb,var(--ui-primary)_10%,var(--dms-surface-card))]";
 
+// The row a side panel has open: the hover tint, held, and an accent rule on
+// its leading edge.
+const ROW_OPEN_BG =
+  "data-[open=true]:bg-elevated data-[open=true]:shadow-[inset_2px_0_0_0_var(--ui-primary)]";
+const ROW_OPEN_CELL_BG = "group-data-[open=true]:bg-elevated";
+
 // An expanded row keeps the hover tint and hands its bottom rule to the detail
 // band below it.
 const ROW_EXPANDED_BG = "data-[expanded=true]:bg-elevated";
@@ -501,7 +516,7 @@ const theme = tv({
     colResizer:
       "bg-primary/40 absolute right-0 top-0 z-10 h-full w-1 cursor-col-resize touch-none select-none opacity-0 hover:opacity-100",
 
-    row: `group ${ROW_SELECTED_BG} ${ROW_EXPANDED_BG}`,
+    row: `group ${ROW_SELECTED_BG} ${ROW_EXPANDED_BG} ${ROW_OPEN_BG}`,
     rowCell: `${FIRST_ROW_CELL_GUTTER} border-b-muted border-b h-11 px-3.5 py-0 text-[13px] last:pe-2.5 in-[tr:last-child]:border-b-0 group-data-[expanded=true]:border-b-transparent`,
     rowInternal: "transition-opacity duration-150",
     rowContainer: "relative",
@@ -560,11 +575,11 @@ const theme = tv({
     pinned: {
       left: {
         headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
-        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} ${ROW_OPEN_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[2px_0_0_0_rgba(0,0,0,0.06)]`,
       },
       right: {
         headCell: `${HEADER_MATCH_BG} sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
-        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
+        rowCell: `${PANEL_MATCH_BG} ${ROW_SELECTED_CELL_BG} ${ROW_EXPANDED_CELL_BG} ${ROW_OPEN_CELL_BG} group-data-[presence=true]:bg-elevated sticky z-10 shadow-[-2px_0_0_0_rgba(0,0,0,0.06)]`,
       },
     },
     // Dense lists: 36px rows under a 32px header band.
@@ -1205,7 +1220,7 @@ const rowClickAction = (row: T): RowClickAction | undefined =>
 // lights up always opens something.
 const isRowClickable = (row: T): boolean => rowClickAction(row) !== undefined;
 
-const handleRowDoubleClick = (row: T) => {
+const runRowClickAction = (row: T) => {
   const action = rowClickAction(row);
   if (!action) return;
   if (typeof action === "string") {
@@ -1215,6 +1230,19 @@ const handleRowDoubleClick = (row: T) => {
   props.onCustomRowAction?.(action, row);
 };
 
+// Both events reach the row: `rowClick` tells which one runs its action.
+const handleRowPointer = (event: MouseEvent, row: T) => {
+  if (!isRowClickTrigger(props.rowClick, event)) return;
+  runRowClickAction(row);
+};
+
+const isOpenRow = (row: T): boolean =>
+  props.openRowId !== undefined &&
+  String(get(row, rowIdKey)) === props.openRowId;
+
+const isSingleClickRow = (row: T): boolean =>
+  props.rowClick === "single" && isRowClickable(row);
+
 const presenceRailBackground = (row: T): string => {
   if (getRowPresence(row)) return PRESENCE_RAIL_ACTIVE_BG;
   if (props.loading || !isRowClickable(row)) return PANEL_MATCH_BG;
@@ -1339,6 +1367,10 @@ defineShortcuts({
       />
     </template>
 
+    <!-- A strip the table view adds over its rows (the live hold's "N new"),
+         shown whichever chrome the display keeps. -->
+    <slot name="notice" />
+
     <slot name="body" :table="table">
       <section
         ref="tableRoot"
@@ -1472,20 +1504,24 @@ defineShortcuts({
                     <tr
                       :data-selected="row.getIsSelected()"
                       :data-expanded="row.getIsExpanded()"
+                      :data-open="isOpenRow(row.original) || undefined"
+                      :aria-current="isOpenRow(row.original) || undefined"
                       :data-presence="!!getRowPresence(row.original)"
                       :title="
                         getRowPresence(row.original)
                           ? presenceTooltipText(getRowPresence(row.original)!)
                           : undefined
                       "
-                      :class="
+                      :class="[
                         uiTable.row({
                           loading,
                           rowClickable: isRowClickable(row.original),
                           presence: !!getRowPresence(row.original),
-                        })
-                      "
-                      @dblclick="handleRowDoubleClick(row.original)"
+                        }),
+                        { 'cursor-pointer': isSingleClickRow(row.original) },
+                      ]"
+                      @click="handleRowPointer($event, row.original)"
+                      @dblclick="handleRowPointer($event, row.original)"
                       @mouseenter="handleRowHover(row)"
                       @mouseleave="handleRowLeave"
                       @dragover="reorderHandles.allowDrop"

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

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+/**
+ * The strip a `liveHold` table shows while its page is paused and events came
+ * in: "N new · Show". Show reads the rows once; the page stays paused.
+ */
+defineProps<{
+  /** Events the table received since its rows were held or last shown. */
+  count: number;
+}>();
+
+const emit = defineEmits<{ show: [] }>();
+
+const { t } = useI18n();
+</script>
+
+<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]"
+  >
+    <UIcon name="i-ph-pause-circle" class="text-info size-4 shrink-0" />
+    <span class="min-w-0">
+      {{ t("dms.live.new_rows", { count }, count) }}
+    </span>
+    <span aria-hidden="true" class="text-muted">·</span>
+    <UButton
+      :label="t('dms.live.show_new')"
+      color="neutral"
+      variant="link"
+      size="xs"
+      class="p-0 font-medium"
+      @click="emit('show')"
+    />
+  </div>
+</template>

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

@@ -83,3 +83,20 @@ export function listenRowSteps(current: () => RowNavigation | undefined) {
   window.addEventListener("keydown", onKey);
   return () => window.removeEventListener("keydown", onKey);
 }
+
+const CLOSE_KEY = "Escape";
+
+/**
+ * Escape closes a row's side panel, unless the user types in a field or a
+ * layer above it (a dialog, a menu) already handled the key. Returns the
+ * listener's removal.
+ */
+export function listenRowPanelClose(close: () => void) {
+  const onKey = (event: KeyboardEvent) => {
+    if (event.key !== CLOSE_KEY || event.defaultPrevented) return;
+    if (isTypingTarget(event.target)) return;
+    close();
+  };
+  window.addEventListener("keydown", onKey);
+  return () => window.removeEventListener("keydown", onKey);
+}

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

@@ -4,7 +4,7 @@ import {
   isConfirmFrom,
 } from "#dms-core/app/types/confirm-dialog";
 import { get } from "@nuxt/ui/runtime/utils/index.js";
-import type { Component } from "vue";
+import { type Component, getCurrentScope, onScopeDispose } from "vue";
 import type { ActionTarget } from "../../../composables/table-view/types/action-target";
 import type { CustomButton } from "../../../composables/table-view/types/custom-button";
 import type { CustomRowAction } from "../../../types/row-action";
@@ -26,7 +26,18 @@ import {
   type RowNavigationSource,
   rowNavigation,
 } from "./rowNavigation";
-import { writeRecordId } from "../table-view/utils/recordLink";
+import {
+  clearWrittenRecord,
+  isDeepLinkAction,
+  writeRecordId,
+  type WrittenRecord,
+} from "../table-view/utils/recordLink";
+import {
+  closeRowSidePanel,
+  closeRowSidePanelOf,
+  openRowSidePanel,
+  rowSidePanelOwnerKey,
+} from "#dms-layout/app/build/composables/layout/rowSidePanel";
 import type { TableUrlScope } from "../table-view/utils/views";
 import { useActionConfirm } from "../confirm/useActionConfirm";
 import {
@@ -72,6 +83,16 @@ interface TargetRunExtras {
   deepLink?: boolean;
 }
 
+type SidePanelTarget = ActionTarget & { type: "sidePanel" };
+
+/** A side panel to open, and on what. */
+interface SidePanelTargetRun extends TargetRunExtras {
+  target: SidePanelTarget;
+  title: string;
+  containerId: string;
+  rowData?: Data;
+}
+
 /** A drawer or modal to open, and on what. */
 interface ComponentTargetRun extends TargetRunExtras {
   target: ActionTarget & { type: "modal" | "drawer" };
@@ -214,14 +235,84 @@ export function useActionTargets(config: ActionTargetsConfig) {
       : openDrawer({ ...options, direction: run.target.direction });
   };
 
+  const resolveTargetComponent = (componentName: string): Component =>
+    (resolveDmsComponent(componentName) || componentName) as Component;
+
+  const rowIdOf = (row?: Data): string | undefined => {
+    if (!row) return undefined;
+    const idKey =
+      config.rowNavigation?.rowIdKey ?? config.rowIdKey ?? DEFAULT_ROW_ID_KEY;
+    const id = get(row, idKey);
+    return id === undefined || id === null ? undefined : String(id);
+  };
+
+  // A deep-linked action keeps the row it has open in the URL; `undefined`
+  // removes it, but only the row this run wrote, on the page it wrote it:
+  // closing as the user navigates leaves the next page's `?record=` alone.
+  const rowRecorder = (deepLink?: boolean) => {
+    let written: WrittenRecord | undefined;
+    return (row?: Data): void => {
+      if (!deepLink || !config.recordScope || !config.rowNavigation) return;
+      if (!row) {
+        clearWrittenRecord(written);
+        written = undefined;
+        return;
+      }
+      written = writeRecordId(config.recordScope, rowIdOf(row));
+    };
+  };
+
+  const ownerKey = rowSidePanelOwnerKey(config.pageId, config.componentId);
+
+  // The panel belongs to the table that opened it: it closes with it.
+  if (getCurrentScope()) onScopeDispose(() => closeRowSidePanelOf(ownerKey));
+
+  // A side panel opened on a listed row steps through the rows shown in place
+  // (the panel computes its position); a deep-linked one keeps the row in the
+  // URL while it is open. A bulk action's panel receives the selection.
+  const handleSidePanelTarget = (run: SidePanelTargetRun) => {
+    const componentName = run.target.component?.componentName;
+    if (!componentName) return;
+    const session = Symbol(componentName);
+    const component = resolveTargetComponent(componentName);
+    const recordRow = rowRecorder(run.deepLink && !run.selection);
+    const componentOptions = {
+      ...run.target.component?.options,
+      pageId: config.pageId,
+      componentId: config.componentId,
+      containerId: run.containerId,
+      selection: run.selection,
+      onSuccessCallback: () => {
+        closeRowSidePanel(session);
+        config.refreshCallback?.();
+      },
+    };
+    const showRow = (row?: Data) => {
+      openRowSidePanel({
+        session,
+        ownerKey,
+        title: run.title,
+        positionLabel: run.target.positionLabel,
+        component,
+        componentOptions,
+        row,
+        rowKey: rowIdOf(row),
+        source: row ? config.rowNavigation : undefined,
+        showRow,
+        onClose: () => recordRow(undefined),
+      });
+      recordRow(row);
+    };
+    showRow(run.rowData);
+  };
+
   // A container opened on a listed row steps through the rows shown (its
   // `navigation` prop, J and K), mounting its component anew on each; a
   // deep-linked one keeps the row in the URL while it is open.
   const handleComponentTarget = (run: ComponentTargetRun) => {
     const componentName = run.target.component?.componentName;
     if (!componentName) return;
-    const component = (resolveDmsComponent(componentName) ||
-      componentName) as Component;
+    const component = resolveTargetComponent(componentName);
     const source = config.rowNavigation;
     let instance: ContainerInstance | undefined;
     let navigation: RowNavigation | undefined;
@@ -242,13 +333,7 @@ export function useActionTargets(config: ActionTargetsConfig) {
         },
       };
     };
-    const recordRow = (row?: Data) => {
-      if (!run.deepLink || !config.recordScope || !source) return;
-      writeRecordId(
-        config.recordScope,
-        row ? String(get(row, source.rowIdKey)) : undefined,
-      );
-    };
+    const recordRow = rowRecorder(run.deepLink);
     function showRow(row: Data) {
       instance?.patch({
         componentOptions: optionsFor(row),
@@ -286,6 +371,15 @@ export function useActionTargets(config: ActionTargetsConfig) {
       ...extras,
     });
 
+  const sidePanelHandler: TargetHandler = (target, label, rowData, extras) =>
+    handleSidePanelTarget({
+      target: target as SidePanelTarget,
+      title: processI18n((target as SidePanelTarget).title || label),
+      containerId: `${config.pageId}-${config.componentId}-${target.type}`,
+      rowData: extras?.selection ? undefined : rowData,
+      ...extras,
+    });
+
   const targetHandlers: Record<string, TargetHandler> = {
     page: (target, _label, rowData) => {
       const pageTarget = target as ActionTarget & { type: "page" };
@@ -332,6 +426,7 @@ export function useActionTargets(config: ActionTargetsConfig) {
       if (quickAction) dispatchQuickActionTarget(quickAction.target);
     },
     drawer: componentHandler,
+    sidePanel: sidePanelHandler,
   };
 
   const targetUrl = (url: string, rowData?: Data): string =>
@@ -421,7 +516,7 @@ export function useActionTargets(config: ActionTargetsConfig) {
       action.label,
       rowData,
       action.confirm,
-      { deepLink: action.deepLink },
+      { deepLink: isDeepLinkAction(action) },
     );
   };
 

package/frontend-vue/layers/dms-ui/app/build/composables/blocks/useRefreshTriggers.ts

@@ -1,40 +1,55 @@
 import { onBeforeUnmount, onMounted } from "vue";
 import { useRealtimeTopic } from "../../../../../dms-core/app/composables/realtime/useRealtimeTopic";
-import { onPageBlocksRefresh } from "../../../utils/blockRefresh";
+import {
+  onLivePageBlocksRefresh,
+  onPageBlocksRefresh,
+} from "../../../utils/blockRefresh";
+import { type LiveGate, useLiveGate } from "../live/currentPageLive";
 
 /**
  * Calls `onRefresh` whenever the data behind a block moved without its inputs
  * changing: on each event of one of its realtime topics, and each time the
- * page asks its blocks to refresh (refreshPageBlocks).
+ * page asks its blocks to refresh (refreshPageBlocks, refreshLivePageBlocks).
+ *
+ * On a page declared with `live`, the realtime events and the live refreshes
+ * go through the page's gate: in Direct at most once per `maxRate`, in Pause
+ * not at all — the block counts what it missed and refetches once on resume.
+ * A refresh the user asked for (refreshPageBlocks) reads at once, paused or
+ * not. The returned gate says what was missed.
  */
 export function useRefreshTriggers(
   realtimeTopic: string | string[] | undefined,
   onRefresh: () => void,
-): void {
-  subscribeRealtimeTopics(realtimeTopic, onRefresh);
-  subscribePageRefresh(onRefresh);
+): LiveGate {
+  const gate = useLiveGate(onRefresh);
+  subscribeRealtimeTopics(realtimeTopic, gate.trigger);
+  subscribePageRefresh(gate);
+  return gate;
 }
 
 function subscribeRealtimeTopics(
   topic: string | string[] | undefined,
-  onEvent: () => void,
+  onEvent: (event: object) => void,
 ): void {
   if (!topic) return;
   const topics = Array.isArray(topic) ? topic : [topic];
   for (const entry of topics) {
     useRealtimeTopic(entry, (event) => {
       if (!("type" in event)) return;
-      onEvent();
+      onEvent(event);
     });
   }
 }
 
 // Mounted only: the page refresh is a browser event, and a block the server
 // renders has nothing to refetch.
-function subscribePageRefresh(onRefresh: () => void): void {
-  let unsubscribe: (() => void) | undefined;
+function subscribePageRefresh(gate: LiveGate): void {
+  const unsubscribes: Array<() => void> = [];
   onMounted(() => {
-    unsubscribe = onPageBlocksRefresh(onRefresh);
+    unsubscribes.push(
+      onPageBlocksRefresh(() => gate.catchUp()),
+      onLivePageBlocksRefresh(gate.trigger),
+    );
   });
-  onBeforeUnmount(() => unsubscribe?.());
+  onBeforeUnmount(() => unsubscribes.splice(0).forEach((stop) => stop()));
 }

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

@@ -4,6 +4,8 @@ import {
   type ComposableText,
   isComposedText,
 } from "../../../../../dms-core/app/utils/composedText";
+import type { Tone } from "../../../types/tone";
+import { DMS_TONE_TEXT, isDmsTone } from "../../utils/tone";
 
 // What the cell data types share: reading a sibling field off the row, and
 // the text tones a cell takes.
@@ -13,6 +15,28 @@ export type Row = Record<string, unknown> | undefined;
 export const readRowField = (row: Row, field: string | undefined): unknown =>
   field && row ? get(row, field) : undefined;
 
+/**
+ * The `Tone` a row field holds (`toneField` of a display), or nothing when the
+ * field is unset or holds no known tone.
+ */
+export const readRowTone = (
+  row: Row,
+  field: string | undefined,
+): Tone | undefined => {
+  const tone = readRowField(row, field);
+  return typeof tone === "string" && isDmsTone(tone) ? tone : undefined;
+};
+
+/** The text colour of the row's tone, else `fallback` (the display's own). */
+export const rowToneTextClass = (
+  row: Row,
+  field: string | undefined,
+  fallback: string,
+): string => {
+  const tone = readRowTone(row, field);
+  return tone ? DMS_TONE_TEXT[tone] : fallback;
+};
+
 export const stringOf = (value: unknown): string | undefined =>
   value === null || value === undefined || value === ""
     ? undefined

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

@@ -3,8 +3,14 @@ import type { DataType } from "#dms-core/app/composables/data-types/useDataType"
 import StatusPill from "../../../components/status-pill/StatusPill.vue";
 import MonoCell from "../../components/table/MonoCell.vue";
 import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
-import { isDmsTone } from "../../utils/tone";
-import { readRowField, readSubline, toneClass, type Row } from "./cellHelpers";
+import {
+  readRowField,
+  readRowTone,
+  readSubline,
+  rowToneTextClass,
+  toneClass,
+  type Row,
+} from "./cellHelpers";
 
 const Sparkline = defineAsyncComponent(
   () => import("../../../components/chart/internal/Sparkline.vue"),
@@ -34,9 +40,7 @@ interface StatusPillOptions {
 
 // A row field that holds no known tone gives way to the column's map.
 function statusPillTone(opts: StatusPillOptions, key: string, row: Row) {
-  const rowTone = readRowField(row, opts.toneField);
-  if (typeof rowTone === "string" && isDmsTone(rowTone)) return rowTone;
-  return opts.tones?.[key] ?? "neutral";
+  return readRowTone(row, opts.toneField) ?? opts.tones?.[key] ?? "neutral";
 }
 
 /**
@@ -186,6 +190,17 @@ const withSymbol = (
 ): string =>
   `${new Intl.NumberFormat(locale, { maximumFractionDigits }).format(value)} ${symbol}`;
 
+/** A duration always in milliseconds, its digits grouped: "2,149 ms". */
+export function formatMilliseconds(ms: number, locale: string): string {
+  const figure = new Intl.NumberFormat(locale, {
+    maximumFractionDigits: 0,
+    // `true` groups a four-digit figure too, where a locale's default (es,
+    // pl) would leave "2149" against "12.149" further down the column.
+    useGrouping: true,
+  }).format(ms);
+  return `${figure} ms`;
+}
+
 /**
  * A duration in its most readable unit: "910 ms", "1.8 s", "4 min 12 s",
  * "2 h 5 min".
@@ -225,8 +240,42 @@ export function formatBytes(bytes: number, locale: string): string {
   );
 }
 
-const figure = (text: string) =>
-  h("span", { class: [FIGURE_CLASS, "block text-right text-toned"] }, text);
+const FIGURE_TONE_CLASS = "text-toned";
+
+const figure = (text: string, toneClass = FIGURE_TONE_CLASS) =>
+  h("span", { class: [FIGURE_CLASS, "block text-right", toneClass] }, text);
+
+interface DurationOptions {
+  unit?: string;
+  /** `readable` (the default) or `ms`. */
+  format?: string;
+  /** Row field holding the figure's tone. */
+  toneField?: string;
+}
+
+const DURATION_FORMATS: Record<string, typeof formatDuration> = {
+  readable: formatDuration,
+  ms: formatMilliseconds,
+};
+
+/**
+ * `duration`: the figure in its most readable unit, or in milliseconds
+ * (`format: "ms"`), in the tone the row gives (`toneField`).
+ */
+function renderDuration(
+  value: unknown,
+  locale: string,
+  options: unknown,
+  row: Row,
+) {
+  const opts = (options ?? {}) as DurationOptions;
+  const ms = numberOf(value) * (DURATION_UNIT_MS[opts.unit ?? "ms"] ?? 1);
+  const format = DURATION_FORMATS[opts.format ?? "readable"] ?? formatDuration;
+  return figure(
+    format(ms, locale),
+    rowToneTextClass(row, opts.toneField, FIGURE_TONE_CLASS),
+  );
+}
 
 /**
  * Cell data types a column picks through its `display` option to draw a
@@ -259,15 +308,8 @@ export const registerMetricCellTypes = (
   registerDataType({
     id: "duration",
     formatter: {
-      default: (value, locale, options) => {
-        const unit = (options as { unit?: string } | undefined)?.unit ?? "ms";
-        return figure(
-          formatDuration(
-            numberOf(value) * (DURATION_UNIT_MS[unit] ?? 1),
-            locale,
-          ),
-        );
-      },
+      default: (value, locale, options, row) =>
+        renderDuration(value, locale, options, row),
     },
   });
   registerDataType({

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

@@ -1,5 +1,5 @@
 import { registerFieldTypes } from "./registerFieldTypes";
-import { defineAsyncComponent, type VNode } from "vue";
+import { defineAsyncComponent, type VNode, type VNodeChild } from "vue";
 import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
 import UAvatar from "@nuxt/ui/components/Avatar.vue";
 import UBadge from "@nuxt/ui/components/Badge.vue";
@@ -10,6 +10,7 @@ import { mapRelationBeforeState, sameRelationValue } from "./relationValue";
 import {
   isSet,
   readRowField,
+  readRowTone,
   readSubline,
   type Row,
   stringOf,
@@ -21,7 +22,7 @@ import { useComposedText } from "../../../../../dms-core/app/composables/transla
 import StatusPill, {
   type StatusPillVariant,
 } from "../../../components/status-pill/StatusPill.vue";
-import { isDmsTone } from "../../utils/tone";
+import { DMS_TONE_TEXT, isDmsTone } from "../../utils/tone";
 import IdentityCell from "../../components/table-view/IdentityCell.vue";
 import {
   firstNameOf,
@@ -738,6 +739,32 @@ const registerCellTypes = (registerDataType: (dataType: DataType) => void) => {
   });
 };
 
+interface TextOptions {
+  /** Row field holding the text's tone. */
+  toneField?: string;
+}
+
+/**
+ * `string`: the value as written, in the tone the row gives (`toneField`) when
+ * it gives one; a row without one keeps the bare value, as a string column
+ * always drew it.
+ */
+function renderText(
+  value: unknown,
+  _locale: string,
+  options?: unknown,
+  row?: Row,
+): unknown {
+  const tone = readRowTone(
+    row,
+    (options as TextOptions | undefined)?.toneField,
+  );
+  if (!tone) return value;
+  // The value stays the child, as the untoned cell returns it: a number or a
+  // list renders as it did, never as "[object Object]".
+  return h("span", { class: DMS_TONE_TEXT[tone] }, [value as VNodeChild]);
+}
+
 const registerPrimitiveTypes = (
   registerDataType: (dataType: DataType) => void,
 ) => {
@@ -747,7 +774,7 @@ const registerPrimitiveTypes = (
   });
   registerDataType({
     id: "string",
-    formatter: { default: (value: unknown, _locale: string) => value },
+    formatter: { default: renderText },
   });
   registerDataType({
     id: "price",