@antelopejs/dms 0.7.0 → 0.7.2

package/frontend-vue/layers/dms-layout/app/pages/[...slug].vue

@@ -494,10 +494,14 @@ if (import.meta.env.DEV) {
     :class="stackClass"
     :css="animateLayout"
   >
+    <!-- `empty:hidden`: a block with nothing to show (a fetched Banner the
+         route answered `null`) renders a bare comment; its wrapper must not
+         take a gap of the stack. -->
     <div
       v-for="component in components"
       :key="component.id"
       :class="[
+        'empty:hidden',
         { 'dms-fresh-modified': freshComponentIds.has(component.id) },
         component.id === fillingComponentId && fillColumnClass,
       ]"

package/frontend-vue/layers/dms-ui/app/build/components/activity-feed/activityFeedDays.ts

@@ -3,6 +3,10 @@ import {
   regionalDayKey,
   regionalDayNumber,
 } from "#dms-core/app/utils/regional";
+import type {
+  BlockText,
+  ComposedTextParam,
+} from "#dms-core/app/types/composed-text";
 import type { Tone } from "../../../types/tone";
 
 /** One entry of an activity feed, as a page declares it or a source answers. */
@@ -10,19 +14,19 @@ export interface ActivityFeedItem {
   id?: string;
   icon?: string;
   tone?: Tone;
-  /** Title (i18n key with `$` or literal). */
-  title: string;
+  /** Title (i18n key with `$`, literal, or composed text). */
+  title: BlockText;
   /** Dimmed details, joined by "·". */
-  meta?: string[];
+  meta?: BlockText[];
   /**
-   * Values the title and the details interpolate; a `$`-prefixed value is
-   * translated first.
+   * Values the `$` title and details interpolate: typed values are formatted
+   * as in a composed text; a `$`-prefixed string is translated first.
    */
-  params?: Record<string, string>;
+  params?: Record<string, ComposedTextParam>;
   /** ISO date: files the entry under its day and gives its time. */
   date?: string;
-  /** Literal trailing text, in place of the formatted time. */
-  time?: string;
+  /** Trailing text, in place of the formatted time. */
+  time?: BlockText;
   unread?: boolean;
   /** Makes the row a link. */
   to?: string;
@@ -143,31 +147,39 @@ export function formatActivityTime(date: string, locale: string): string {
   }).format(parsed);
 }
 
-type ActivityTranslate = (
-  key: string,
-  params?: Record<string, string> | null,
-) => string;
-
-const isTextKey = (value: string): boolean => value.startsWith("$");
+const isTextKey = (value: ComposedTextParam): value is string =>
+  typeof value === "string" && value.startsWith("$");
 
 /**
- * The values an entry's title and details interpolate. A `$` value is a text
- * of its own, translated with the entry's literal values: "Signed in on
- * {device}" with `device` = "{browser} on {os}".
+ * The values an entry's title and details interpolate, as composed-text
+ * parameters. A `$` string is a text of its own, written with the entry's
+ * other values: "Signed in on {device}" with `device` = "{browser} on {os}".
  */
 export function resolveActivityParams(
-  params: Record<string, string> | undefined,
-  translate: ActivityTranslate,
-): Record<string, string> | null {
-  if (!params) return null;
+  params: Record<string, ComposedTextParam> | undefined,
+): Record<string, ComposedTextParam> | undefined {
+  if (!params) return undefined;
   const entries = Object.entries(params);
-  const literals = Object.fromEntries(
+  const values = Object.fromEntries(
     entries.filter(([, value]) => !isTextKey(value)),
   );
   return Object.fromEntries(
     entries.map(([name, value]) => [
       name,
-      isTextKey(value) ? translate(value, literals) : value,
+      isTextKey(value) ? { key: value, params: values } : value,
     ]),
   );
 }
+
+/**
+ * A title or a detail of an entry as the text to write: a `$` key takes the
+ * entry's values, so a `count` value picks its plural form; a composed text
+ * carries its own values, and a literal is written as is.
+ */
+export function activityText(
+  text: BlockText,
+  params: Record<string, ComposedTextParam> | undefined,
+): BlockText {
+  if (!isTextKey(text)) return text;
+  return { key: text, params: resolveActivityParams(params) };
+}

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

@@ -2,6 +2,7 @@
 import type { ButtonProps } from "@nuxt/ui";
 import { buttonLinkProps } from "../../utils/link";
 import type { Tone } from "../../../types/tone";
+import type { CustomButton } from "../../../composables/table-view/types/custom-button";
 
 /** A link button a block option declares (interface-dms `BlockLinkAction`). */
 export interface BlockAction {
@@ -13,12 +14,26 @@ export interface BlockAction {
   color?: Tone;
 }
 
-// The link buttons of a display block (empty state, banner, card head). One
+/**
+ * A button running a target (interface-dms `BannerButtonAction`): the block
+ * that offers it runs it on `press`, with its confirmation.
+ */
+export interface BlockButtonAction
+  extends Pick<CustomButton, "label" | "icon" | "target" | "confirm"> {
+  variant?: ButtonProps["variant"];
+  color?: Tone;
+}
+
+/** A link or a button a block offers. */
+export type BlockActionItem = BlockAction | BlockButtonAction;
+
+// The buttons of a display block (empty state, banner, card head): links, and
+// in a banner, buttons running a target, which the block runs on `press`. One
 // action leads (`leadVariant` / `leadColor`): the first, or the last in a
 // banner where the main action sits right-most. The others are quiet buttons,
 // unless an action sets its own look. Labels follow the `$` i18n convention.
 interface BlockActionsProps {
-  actions: BlockAction[];
+  actions: BlockActionItem[];
   size?: ButtonProps["size"];
   leadVariant?: ButtonProps["variant"];
   leadColor?: Tone;
@@ -36,8 +51,18 @@ const props = withDefaults(defineProps<BlockActionsProps>(), {
   leadPosition: "first",
 });
 
+const emit = defineEmits<{ press: [action: BlockButtonAction] }>();
+
 const { processI18n } = useTranslation();
 
+const isButtonAction = (action: BlockActionItem): action is BlockButtonAction =>
+  "target" in action && Boolean(action.target);
+
+function actionProps(action: BlockActionItem): Record<string, unknown> {
+  if (!isButtonAction(action)) return buttonLinkProps(action.to);
+  return { onClick: () => emit("press", action) };
+}
+
 function isLead(index: number): boolean {
   return props.leadPosition === "last"
     ? index === props.actions.length - 1
@@ -45,7 +70,7 @@ function isLead(index: number): boolean {
 }
 
 function buttonVariant(
-  action: BlockAction,
+  action: BlockActionItem,
   index: number,
 ): ButtonProps["variant"] {
   return (
@@ -53,7 +78,10 @@ function buttonVariant(
   );
 }
 
-function buttonColor(action: BlockAction, index: number): ButtonProps["color"] {
+function buttonColor(
+  action: BlockActionItem,
+  index: number,
+): ButtonProps["color"] {
   return action.color ?? (isLead(index) ? props.leadColor : "neutral");
 }
 </script>
@@ -61,12 +89,12 @@ function buttonColor(action: BlockAction, index: number): ButtonProps["color"] {
 <template>
   <UButton
     v-for="(action, index) in props.actions"
-    :key="`${index}-${action.to}`"
+    :key="`${index}-${action.label}`"
     :label="processI18n(action.label ?? '')"
     :icon="action.icon"
     :size="props.size"
     :variant="buttonVariant(action, index)"
     :color="buttonColor(action, index)"
-    v-bind="buttonLinkProps(action.to)"
+    v-bind="actionProps(action)"
   />
 </template>

package/frontend-vue/layers/dms-ui/app/build/components/containers/drawer/DynamicDrawer.vue

@@ -39,6 +39,26 @@ const props = withDefaults(defineProps<DynamicDrawerProps>(), {
 });
 const emit = defineEmits<DynamicDrawerEmits>();
 
+// A side drawer is a sheet as wide as a side panel by default (see
+// `useAppSidePanels`), never wider than the window less the drawer's gutter.
+// Its own padding is the gutter: the containers drop theirs.
+const SIDE_DIRECTIONS: readonly DrawerDirection[] = ["left", "right"];
+const SIDE_DRAWER_CONTENT = "w-[440px]";
+const SIDE_CONTAINER_CLASS = "px-0 sm:px-0 lg:px-0";
+const EDGE_CONTAINER_CLASS = "max-sm:px-0";
+
+const isSide = computed(() => SIDE_DIRECTIONS.includes(props.direction));
+const containerClass = computed(() =>
+  isSide.value ? SIDE_CONTAINER_CLASS : EDGE_CONTAINER_CLASS,
+);
+const drawerUi = computed(() => ({
+  ...(isSide.value && { content: SIDE_DRAWER_CONTENT }),
+  header: "border-b border-default flex shrink-0 items-center gap-4 pb-4",
+  // The scroll area's bottom padding: a form's sticky footer sits flush
+  // with the drawer's edge (see Form.vue).
+  container: "[--dms-form-foot-pb:1rem]",
+}));
+
 // Let a DmsForm rendered in the body drop its DmsCard (the drawer is the surface).
 provide("dmsFormContainer", true);
 
@@ -104,19 +124,17 @@ function onContentResolve() {
     :description="description"
     :title="title"
     :dismissible="false"
-    :ui="{
-      header: 'border-b border-default flex shrink-0 items-center gap-4 pb-4',
-      // The scroll area's bottom padding: a form's sticky footer sits flush
-      // with the drawer's edge (see Form.vue).
-      container: '[--dms-form-foot-pb:1rem]',
-    }"
+    :ui="drawerUi"
     @close:prevent="tryClose"
   >
     <template #header>
       <!-- Same container as the body so the title aligns with the form. On
         phones the drawer's own padding is the 16px gutter: the container
         drops its own. -->
-      <UContainer class="flex w-full flex-1 items-start gap-3 max-sm:px-0">
+      <UContainer
+        class="flex w-full flex-1 items-start gap-3"
+        :class="containerClass"
+      >
         <DmsIconWell v-if="icon" :icon="icon" :tone="color" />
         <div v-if="headerComponent" class="min-w-0 flex-1">
           <VisuallyHidden>
@@ -157,7 +175,7 @@ function onContentResolve() {
       </UContainer>
     </template>
     <template #body>
-      <UContainer class="max-sm:px-0">
+      <UContainer :class="containerClass">
         <Suspense @pending="onContentPending" @resolve="onContentResolve">
           <component
             :is="component"

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

@@ -424,6 +424,7 @@ const uiTableActions = computed(() => uiTableActionsVariant());
           variant="ghost"
           size="sm"
           square
+          :aria-label="t('dms.table.search_open')"
           :class="uiTableActions.trigger()"
           @click="toggleSearch"
         />
@@ -433,7 +434,8 @@ const uiTableActions = computed(() => uiTableActionsVariant());
             v-if="searchActive"
             ref="searchInputRef"
             v-model="tableSharedData!.globalFilterState.value"
-            :placeholder="t('dms.table.search_placeholder')"
+            :placeholder="searchPlaceholderText"
+            :aria-label="searchPlaceholderText"
             icon="i-ph-magnifying-glass"
             size="sm"
             class="w-full"

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

@@ -45,7 +45,7 @@ const tableSharedDataRef =
   injectLocal<ShallowRef<TableSharedData<T>>>("tableSharedData");
 const tableSharedData = computed(() => tableSharedDataRef?.value);
 
-// A search, a filter chip or a quick filter narrows the rows.
+// A search, a filter chip, a quick filter or a hidden filter narrows the rows.
 const isFiltered = computed(() => !!tableSharedData.value?.isFiltered?.value);
 // What the clear action would clear; nothing (only default filters left at
 // their value) offers no action.

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

@@ -2,7 +2,8 @@
 import { useClipboard } from "@vueuse/core";
 
 // A value in the mono font (an id, a key, a slug), with a button copying it
-// that shows on hover.
+// that shows on hover. The root is a block flex box held to its cell's
+// width: an inline one grows with the value, which then never truncates.
 
 interface Props {
   value: string;
@@ -27,7 +28,7 @@ const copyValue = async () => {
 </script>
 
 <template>
-  <span class="group/mono inline-flex min-w-0 items-center gap-1">
+  <span class="group/mono flex max-w-full min-w-0 items-center gap-1">
     <span class="text-toned truncate font-mono" :title="props.value">
       {{ props.value }}
     </span>

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

@@ -227,6 +227,12 @@ export interface TableProps<T> {
   bulkActions?: CustomRowAction[];
   /** What the empty body says, per reason it is empty. */
   emptyStates?: TableViewEmptyStatesConfig;
+  /**
+   * Filters the toolbar does not show narrow the rows (the page URL's
+   * `queryParamFilters`): the table reads as filtered, and its empty body
+   * says no row matches rather than that there are none yet.
+   */
+  hiddenFiltersApply?: boolean;
 
   data?: T[] | null;
   columns?: TableColumn<T>[];
@@ -330,7 +336,7 @@ export interface TableSharedData<T> {
   resetFilters: () => void;
   /** What `resetFilters` would clear (nothing: no clear action to offer). */
   clearableFilters: ComputedRef<ClearableTableFilters>;
-  /** A search or a filter chip narrows the rows. */
+  /** A search, a filter chip or a hidden filter narrows the rows. */
   isFiltered: ComputedRef<boolean>;
   /** Runs after `resetFilters` (e.g. the toolbar folds its search). */
   onFiltersCleared: EventHookOn;
@@ -485,6 +491,9 @@ const theme = tv({
     // never hides past the card edge. Phones drop the content-column indent.
     expandedBody:
       "sticky start-0 w-[var(--dms-table-viewport,auto)] pt-4 pb-[18px] pe-[18px] ps-[18px] sm:ps-[68px]",
+    // The empty body centres on the visible part of a table wider than its
+    // card, not on the whole scroll width.
+    emptyBody: "sticky start-0 w-[var(--dms-table-viewport,auto)]",
 
     headCell: `${HEADER_MATCH_BG} ${FIRST_HEAD_CELL_GUTTER} border-b-default text-dimmed group relative touch-none select-none overflow-hidden border-b h-9 px-3.5 py-0 ${EYEBROW_CLASS} last:pe-2.5`,
     headCellInternal: "flex w-full items-center justify-between gap-1",
@@ -740,15 +749,14 @@ const onTableScroll = (event: Event) => {
   if (!hasScrollArea.value) return;
   isScrolled.value = (event.target as HTMLElement).scrollTop > 0;
 };
-// Expanded detail bands are as wide as the visible scroll area.
+// Expanded detail bands, group headers and the empty body are as wide as
+// the visible scroll area.
 const tableRootRef = useTemplateRef<HTMLElement>("tableRoot");
 const { width: tableViewportWidth } = useElementSize(tableRootRef);
 const tableRootStyle = computed(() => ({
   maxHeight: props.maxHeight,
   "--dms-table-viewport":
-    (isExpandable || !!props.grouping) && tableViewportWidth.value > 0
-      ? `${tableViewportWidth.value}px`
-      : undefined,
+    tableViewportWidth.value > 0 ? `${tableViewportWidth.value}px` : undefined,
 }));
 
 // A clipped cell value reads in full in a native tooltip.
@@ -1059,6 +1067,7 @@ const narrowingState: TableNarrowingState = {
   globalFilter: globalFilterState,
   pagination: paginationState,
   searchApplies: computed(() => resolvedCapabilities.value.search),
+  hiddenFiltersApply: computed(() => !!props.hiddenFiltersApply),
 };
 const filtersCleared = createEventHook();
 const resetFilters = () => {
@@ -1621,14 +1630,16 @@ defineShortcuts({
                   "
                   class="p-0"
                 >
-                  <TableEmpty
-                    :can-add-row="
-                      normalizeActionConfig(rowActions?.add).isEnabled
-                    "
-                    :load-error="loadError"
-                    :archived="isShowingArchived"
-                    :empty-states="emptyStates"
-                  />
+                  <div :class="uiTable.emptyBody()">
+                    <TableEmpty
+                      :can-add-row="
+                        normalizeActionConfig(rowActions?.add).isEnabled
+                      "
+                      :load-error="loadError"
+                      :archived="isShowingArchived"
+                      :empty-states="emptyStates"
+                    />
+                  </div>
                 </td>
               </tr>
             </tbody>

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

@@ -211,7 +211,7 @@ export function useActionTargets(config: ActionTargetsConfig) {
     };
     return run.target.type === "modal"
       ? openModal({ ...options, size: run.target.size })
-      : openDrawer(options);
+      : openDrawer({ ...options, direction: run.target.direction });
   };
 
   // A container opened on a listed row steps through the rows shown (its

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

@@ -19,6 +19,10 @@ export interface UseBlockItemsOptions<T> {
    */
   fetchUrl?: string;
   fetchUrlMethod?: string;
+  /** Id of the PeriodSelector whose period `fetchUrl` is requested with. */
+  periodScope?: string;
+  /** Topics whose events make the block read `fetchUrl` again. */
+  realtimeTopic?: string | string[];
   /** The parameters of the page route (the block's `routeParams` prop). */
   routeParams?: () => Record<string, string> | undefined;
   watchActions?: WatchAction[];
@@ -35,11 +39,12 @@ export interface UseBlockItemsReturn<T> {
 }
 
 /**
- * The items a list block (StatGroup, KeyValueList, NavCardGrid) renders:
- * either the static ones of its options, or the `items` its `fetchUrl`
- * answers with — refetched when a watched event changes the block's state or
- * the page asks its blocks to refresh (refreshPageBlocks), like the KPI and
- * top-list cards.
+ * The items a list block (StatGroup, KeyValueList, NavCardGrid, ActivityFeed)
+ * renders: either the static ones of its options, or the `items` its
+ * `fetchUrl` answers with — refetched when its period scope changes, a
+ * watched event changes the block's state, one of its realtime topics fires,
+ * or the page asks its blocks to refresh (refreshPageBlocks), like the KPI
+ * and top-list cards.
  */
 export function useBlockItems<T>(
   options: UseBlockItemsOptions<T>,
@@ -56,6 +61,8 @@ export function useBlockItems<T>(
   >({
     fetchUrl: options.fetchUrl,
     fetchUrlMethod: options.fetchUrlMethod,
+    periodScope: options.periodScope,
+    realtimeTopic: options.realtimeTopic,
     routeParams: options.routeParams,
     watchSource: () => watchKey.value,
   });

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

@@ -0,0 +1,40 @@
+import { onBeforeUnmount, onMounted } from "vue";
+import { useRealtimeTopic } from "../../../../../dms-core/app/composables/realtime/useRealtimeTopic";
+import { onPageBlocksRefresh } from "../../../utils/blockRefresh";
+
+/**
+ * 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).
+ */
+export function useRefreshTriggers(
+  realtimeTopic: string | string[] | undefined,
+  onRefresh: () => void,
+): void {
+  subscribeRealtimeTopics(realtimeTopic, onRefresh);
+  subscribePageRefresh(onRefresh);
+}
+
+function subscribeRealtimeTopics(
+  topic: string | string[] | undefined,
+  onEvent: () => 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();
+    });
+  }
+}
+
+// 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;
+  onMounted(() => {
+    unsubscribe = onPageBlocksRefresh(onRefresh);
+  });
+  onBeforeUnmount(() => unsubscribe?.());
+}

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

@@ -3,6 +3,7 @@ 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";
 
 const Sparkline = defineAsyncComponent(
@@ -21,6 +22,8 @@ interface SelectItemOption {
 
 interface StatusPillOptions {
   tones?: Record<string, string>;
+  /** Row field holding the pill's tone, read before `tones`. */
+  toneField?: string;
   subField?: string;
   /** Tone of the line under the pill when the row gives none. */
   subTone?: string;
@@ -29,10 +32,18 @@ interface StatusPillOptions {
   typeOptions?: { items?: SelectItemOption[] };
 }
 
+// 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";
+}
+
 /**
- * `status_pill`: a tinted pill led by a dot, in the tone the value maps to,
- * with an optional line under it (a failure's cause, a composed "retry Oct
- * 10") in the row's tone, else `subTone`, else the pill's.
+ * `status_pill`: a tinted pill led by a dot, in the tone the row gives
+ * (`toneField`) or the value maps to, with an optional line under it (a
+ * failure's cause, a composed "retry Oct 10") in the row's tone, else
+ * `subTone`, else the pill's.
  */
 function renderStatusPill(value: unknown, options: unknown, row: Row) {
   const { processI18n } = useTranslation();
@@ -42,7 +53,7 @@ function renderStatusPill(value: unknown, options: unknown, row: Row) {
   const item = opts.typeOptions?.items?.find(
     (candidate) => String(candidate.value) === key,
   );
-  const tone = opts.tones?.[key] ?? "neutral";
+  const tone = statusPillTone(opts, key, row);
   const pill = h(StatusPill, {
     tone,
     label: processI18n(item?.label ?? key),

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

@@ -18,7 +18,10 @@ import {
 import { registerMetricCellTypes } from "./metricCells";
 import { registerTwoLineCellType } from "./twoLineCell";
 import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
-import StatusPill from "../../../components/status-pill/StatusPill.vue";
+import StatusPill, {
+  type StatusPillVariant,
+} from "../../../components/status-pill/StatusPill.vue";
+import { isDmsTone } from "../../utils/tone";
 import IdentityCell from "../../components/table-view/IdentityCell.vue";
 import {
   firstNameOf,
@@ -453,9 +456,76 @@ const PILL_FILLED_CLASS =
   "shrink-0 border-(--dms-accent-fill) bg-(--dms-accent-fill) font-[650] text-(--dms-accent-on-fill)";
 
 /**
- * `pills`: a list (relation rows, select values, strings) as v2 role pills,
- * or a single filled pill when the row's `exclusive.field` is set (an owner's
- * crown). A bare id a relation could not resolve (a deleted row) is skipped.
+ * A pill the server styles per row. Mirror of `DefaultDisplays.PillItem` from
+ * `@antelopejs/interface-dms/base/table-view`.
+ */
+interface PillItem {
+  label: string;
+  tone?: string;
+  variant?: string;
+}
+
+const PILL_VARIANTS = new Set<string>(["soft", "outline"]);
+const DEFAULT_PILL_VARIANT: StatusPillVariant = "soft";
+
+const pillVariantOf = (variant: string | undefined): StatusPillVariant =>
+  variant && PILL_VARIANTS.has(variant)
+    ? (variant as StatusPillVariant)
+    : DEFAULT_PILL_VARIANT;
+const DEFAULT_PILL_TONE = "neutral";
+
+// An object with a `label` but no `labelKey` field: a related row carries
+// that field, which tells the two apart.
+const isPillItem = (item: unknown, labelKey: string): item is PillItem =>
+  isObject(item) && typeof item.label === "string" && !(labelKey in item);
+
+/**
+ * The pills of a list. A bare id is skipped next to the related rows it
+ * could not be resolved into; next to pill items it is a pill.
+ */
+function pillsOf(
+  items: unknown[],
+  labelKey: string,
+  processI18n: (text: string) => string,
+): PillItem[] {
+  const hasRelatedRows = items.some(
+    (item) => isObject(item) && !isPillItem(item, labelKey),
+  );
+  return items.flatMap((item): PillItem[] => {
+    if (isPillItem(item, labelKey)) {
+      return [{ ...item, label: processI18n(item.label) }];
+    }
+    if (isObject(item)) {
+      const label = (item as Record<string, unknown>)[labelKey];
+      return label === undefined ? [] : [{ label: processI18n(String(label)) }];
+    }
+    return hasRelatedRows ? [] : [{ label: processI18n(String(item)) }];
+  });
+}
+
+/** A plain pill in the role-pill outline, a styled one as a status pill. */
+function renderPill(pill: PillItem) {
+  if (!pill.tone && !pill.variant) {
+    return h(
+      "span",
+      { class: [PILL_CLASS, PILL_OUTLINE_CLASS, PILL_SHRINK_CLASS] },
+      [h("span", { class: "truncate" }, pill.label)],
+    );
+  }
+  return h(StatusPill, {
+    label: pill.label,
+    tone: pill.tone && isDmsTone(pill.tone) ? pill.tone : DEFAULT_PILL_TONE,
+    variant: pillVariantOf(pill.variant),
+    dot: "none",
+    class: PILL_SHRINK_CLASS,
+  });
+}
+
+/**
+ * `pills`: a list (relation rows, select values, strings, pill items) as v2
+ * role pills, a pill item in its own tone and variant, or a single filled
+ * pill when the row's `exclusive.field` is set (an owner's crown). A bare id
+ * a relation could not resolve (a deleted row) is skipped.
  */
 function renderPills(value: unknown, options: unknown, row: Row) {
   const { processI18n } = useTranslation();
@@ -468,17 +538,13 @@ function renderPills(value: unknown, options: unknown, row: Row) {
       processI18n(opts.exclusive.label),
     ]);
   }
-  const labelKey = opts.labelKey ?? DEFAULT_RELATION_LABEL_KEY;
   const items = Array.isArray(value) ? value : value == null ? [] : [value];
-  const hasObjects = items.some((item) => isObject(item));
-  const labels = items.flatMap((item) => {
-    if (isObject(item)) {
-      const label = (item as Record<string, unknown>)[labelKey];
-      return label === undefined ? [] : [processI18n(String(label))];
-    }
-    return hasObjects ? [] : [processI18n(String(item))];
-  });
-  if (labels.length === 0) {
+  const pills = pillsOf(
+    items,
+    opts.labelKey ?? DEFAULT_RELATION_LABEL_KEY,
+    processI18n,
+  );
+  if (pills.length === 0) {
     return opts.emptyLabel
       ? h(
           "span",
@@ -491,14 +557,11 @@ function renderPills(value: unknown, options: unknown, row: Row) {
   // few letters); the list's tooltip names them all.
   return h(
     "span",
-    { class: "flex min-w-0 gap-1 overflow-hidden", title: labels.join(", ") },
-    labels.map((label) =>
-      h(
-        "span",
-        { class: [PILL_CLASS, PILL_OUTLINE_CLASS, PILL_SHRINK_CLASS] },
-        [h("span", { class: "truncate" }, label)],
-      ),
-    ),
+    {
+      class: "flex min-w-0 gap-1 overflow-hidden",
+      title: pills.map((pill) => pill.label).join(", "),
+    },
+    pills.map(renderPill),
   );
 }