@antelopejs/dms 0.11.1 → 0.12.0

package/frontend-vue/layers/dms-ui/app/components/section-header/SectionHeader.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { tv } from "tailwind-variants";
 import DmsEyebrow from "./Eyebrow.vue";
 
@@ -24,12 +24,12 @@ interface SectionHeaderProps {
 }
 
 interface SectionHeaderSlots {
-  title?: () => unknown;
+  title?: () => ReturnType<Slot>;
   /** Inline after the title and the count (badge, tag, tooltip…). */
-  badge?: () => unknown;
-  description?: () => unknown;
+  badge?: () => ReturnType<Slot>;
+  description?: () => ReturnType<Slot>;
   /** Right-aligned actions; they wrap under the heading on narrow screens. */
-  trailing?: () => unknown;
+  trailing?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<SectionHeaderProps>(), {
@@ -64,8 +64,7 @@ const theme = tv({
         root: "flex-nowrap items-start gap-2.5",
         heading: "flex-1",
         title: "flex-nowrap",
-        // One line each on wide screens; on a phone, beside the trailing
-        // badge or actions, the title and description wrap instead.
+
         description:
           "text-dimmed mt-1 truncate text-xs max-sm:whitespace-normal",
         trailing: "shrink-0",

package/frontend-vue/layers/dms-ui/app/components/segmented/Segmented.vue

@@ -2,10 +2,6 @@
 import { MONO_CHIP_CLASS } from "../../build/utils/monoChip";
 import { computed, ref } from "vue";
 
-// Segmented toggle (design .segmented): a recessed track holding segments,
-// the active one raised onto the card surface with a hairline ring.
-// Single-select, v-model'd. Implements the radiogroup keyboard pattern
-// (roving tabindex + arrow/Home/End, skipping disabled segments).
 interface SegItem {
   /** The visible text; empty for an icon-only segment. */
   label: string;
@@ -41,7 +37,6 @@ interface Props {
   overflow?: "scroll" | "wrap";
 }
 
-// v2 heights (24/28/32/36/40) live on the track; segments fill it.
 const TRACK_SIZE_CLASSES: Record<SegmentedSize, string> = {
   xs: "h-6",
   sm: "h-7",
@@ -50,8 +45,6 @@ const TRACK_SIZE_CLASSES: Record<SegmentedSize, string> = {
   xl: "h-10",
 };
 
-// A wrapping track grows with its lines, so segments carry the height
-// (the track's minus its 2px padding on each side).
 const WRAP_ITEM_HEIGHT_CLASSES: Record<SegmentedSize, string> = {
   xs: "h-5",
   sm: "h-6",
@@ -101,7 +94,6 @@ function isDisabled(index: number): boolean {
   return props.disabled || !!props.items[index]?.disabled;
 }
 
-// Roving tabindex anchor: the checked segment, or the first enabled one.
 const focusIndex = computed(() => {
   const checked = props.items.findIndex((item) => item.value === model.value);
   if (checked !== -1) return checked;
@@ -127,7 +119,7 @@ interface KeyMove {
   direction: StepFn;
 }
 
-const KEY_MOVES: Record<string, KeyMove> = {
+const KEY_MOVES: Record<KeyboardEvent["key"], KeyMove> = {
   ArrowRight: { target: NEXT, direction: NEXT },
   ArrowDown: { target: NEXT, direction: NEXT },
   ArrowLeft: { target: PREVIOUS, direction: PREVIOUS },
@@ -154,16 +146,10 @@ function onKeydown(event: KeyboardEvent, index: number) {
   select(firstEnabledFrom(target, move.direction));
 }
 
-// A track wider than its container (a phone, a narrow column) scrolls
-// Every segment is named: its `ariaLabel`, else its label, else its value
-// (an icon-only segment given neither still reads as something).
 function itemAriaLabel(item: SegItem): string {
   return item.ariaLabel || item.label || String(item.value);
 }
 
-// sideways inside its pill, or wraps with `overflow="wrap"`; the focus ring
-// sits inside the segment so the scroll box never clips it. (No root-level
-// template comment: it would break the class fallthrough.)
 function itemClass(item: SegItem, index: number): (string | false)[] {
   const isActive = model.value === item.value;
   return [

package/frontend-vue/layers/dms-ui/app/components/stat-group/StatGroup.vue

@@ -3,7 +3,7 @@ import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { computed } from "vue";
 import type { IconWellTone } from "../icon-well/IconWell.vue";
 import DmsStatCell from "../../build/components/stat/StatCell.vue";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 
 export type StatGroupLayout = "joined" | "cards";
 
@@ -75,12 +75,7 @@ const props = withDefaults(defineProps<StatGroupProps>(), {
 const MIN_COLUMNS = 1;
 const MAX_COLUMNS = 6;
 
-// Literal class strings (Tailwind extracts them). The columns follow the
-// group's own width (container queries on the root), not the viewport: in a
-// narrow settings column at 1024px a four-cell group keeps two columns
-// instead of four cramped ones. The joined group carries a detail line, so it
-// drops to one column when narrow; the compact cards keep two.
-const JOINED_COLUMNS: Record<number, string> = {
+const JOINED_COLUMNS: Record<NonNullable<StatGroupProps["columns"]>, string> = {
   1: "grid-cols-1",
   2: "grid-cols-1 @sm:grid-cols-2",
   3: "grid-cols-1 @xl:grid-cols-3",
@@ -88,7 +83,7 @@ const JOINED_COLUMNS: Record<number, string> = {
   5: "grid-cols-1 @sm:grid-cols-2 @4xl:grid-cols-5",
   6: "grid-cols-1 @lg:grid-cols-3 @5xl:grid-cols-6",
 };
-const CARD_COLUMNS: Record<number, string> = {
+const CARD_COLUMNS: Record<NonNullable<StatGroupProps["columns"]>, string> = {
   1: "grid-cols-1",
   2: "grid-cols-2",
   3: "grid-cols-1 @xl:grid-cols-3",
@@ -97,7 +92,6 @@ const CARD_COLUMNS: Record<number, string> = {
   6: "grid-cols-2 @2xl:grid-cols-3 @5xl:grid-cols-6",
 };
 
-// `columnsFrom`: every column from that container size, literal for Tailwind.
 const COLUMNS_FROM: Record<StatGroupColumnsFrom, Record<number, string>> = {
   sm: {
     2: "@sm:grid-cols-2",
@@ -129,9 +123,6 @@ const COLUMNS_FROM: Record<StatGroupColumnsFrom, Record<number, string>> = {
   },
 };
 
-// Every joined cell draws its top and start hairlines; the grid is pulled 1px
-// up and left under the card's clipping edge, so the first row and the first
-// column lose theirs at any column count and on every breakpoint.
 const JOINED_HAIRLINES = "border-muted border-s border-t";
 
 const isJoined = computed(() => props.layout === "joined");
@@ -147,7 +138,7 @@ const columnClass = computed(() => {
   const from =
     props.columnsFrom && COLUMNS_FROM[props.columnsFrom][columnCount.value];
   if (!from) return steps;
-  // The narrow count of the usual steps, then every column from the size.
+
   return `${steps.split(" ")[0]} ${from}`;
 });
 const showPlaceholders = computed(
@@ -162,11 +153,6 @@ function keyOf(item: StatGroupItem, index: number): string {
 function wellTone(item: StatGroupItem): IconWellTone {
   return item.tone ?? (isJoined.value ? "muted" : "primary");
 }
-// Two layouts of the same DmsStatCell: joined (v2 .cs-status, one card with
-// cells split by hairlines, `sm` cells) and cards (v2 .mc-summary, one
-// compact `md` card per item, the KPI card's stat look). The template keeps
-// no root-level comment, so a parent's class still falls through in dev
-// builds.
 </script>
 
 <template>

package/frontend-vue/layers/dms-ui/app/components/status/StatusSummary.vue

@@ -1,10 +1,6 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-// DMS "health hero" (design .status-hero): a status ring + value next to a
-// divided row of key metrics, optionally over a per-day history strip.
-// Generic over any service — API health, DB connection, job runner… — and
-// reused across module overviews. Wraps DmsCard so it drops into a page.
 type Status = "ok" | "warn" | "down" | "info";
 
 interface Metric {
@@ -104,8 +100,6 @@ const DEFAULT_ICON: Record<Status, string> = {
 const tone = computed(() => STATUS_TONES[props.status]);
 const resolvedIcon = computed(() => props.icon || DEFAULT_ICON[props.status]);
 
-// A faint status wash from the left edge (same recipe as the banner), so the
-// state reads at a glance without a coloured border.
 const cardStyle = computed(() => ({
   "--dms-status-tint": tone.value.tint,
   "--dms-status-line": tone.value.line,

package/frontend-vue/layers/dms-ui/app/components/status-pill/StatusPill.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { tv } from "tailwind-variants";
 import {
   DMS_TONE_OUTLINE,
@@ -7,7 +7,7 @@ import {
   DMS_TONE_TEXT,
   isDmsTone,
 } from "../../build/utils/tone";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 
 export type StatusPillDot = "none" | "static" | "live";
 export type StatusPillSize = "sm" | "md";
@@ -42,7 +42,7 @@ interface StatusPillProps {
 }
 
 interface StatusPillSlots {
-  default?: () => unknown;
+  default?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<StatusPillProps>(), {
@@ -59,7 +59,6 @@ defineSlots<StatusPillSlots>();
 
 const CUSTOM_TINT_PERCENT = 12;
 
-// v2 .status: mono label on a tint of its tone, led by a 6px dot.
 const theme = tv({
   slots: {
     root: "inline-flex items-center font-semibold whitespace-nowrap",
@@ -70,14 +69,12 @@ const theme = tv({
   },
   variants: {
     variant: {
-      // A pill wider than its cell keeps its shape: the label gives way
-      // with an ellipsis instead of the pill being cut at the cell's edge.
       soft: { root: "max-w-full rounded-full", label: "min-w-0 truncate" },
       outline: {
         root: "max-w-full rounded-full border bg-transparent",
         label: "min-w-0 truncate",
       },
-      // A state line may run long: it wraps like text instead of a pill.
+
       text: { root: "whitespace-normal" },
     },
     size: {
@@ -126,7 +123,6 @@ const toneClass = computed(() => {
     : color;
 });
 
-// A backend-configured color outside the semantic set: tint it inline.
 const customStyle = computed(() => {
   if (isKnownTone.value) return undefined;
   const color = `var(--ui-${props.tone})`;

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isNumber, isString } from "../../../../dms-core/app/utils/type-check";
 import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import type { TabProps } from "../../composables/tab/types";
 import { type TabBadges, TabVariant } from "../../composables/tab/types/props";
@@ -11,11 +12,8 @@ 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
-  // assembled, or a serialized layout that carries no items. Without a default
-  // every read of `items` throws during setup and takes the page down with it.
   items: () => [],
-  // Neutral pill for in-content switches; page-level navigation passes primary.
+
   color: Color.neutral,
   size: Size.medium,
   variant: TabVariant.pill,
@@ -28,9 +26,6 @@ const props = withDefaults(defineProps<TabProps>(), {
   fit: false,
 });
 
-// The badges a module counts for a record's tabs, in one request, again when
-// a watch action or a realtime topic fires: each replaces its tab's static
-// badge.
 const { state: watchState } = useWatch(
   props.watchActions || [],
   props.componentId,
@@ -44,39 +39,28 @@ const { data: fetchedBadges } = useChartFetch<TabBadges>({
 const { locale } = useI18n();
 const countFormat = computed(() => readableNumberFormat(locale.value));
 
-// Shown like a table view's tab counts: a mono counter, tinted on the
-// active tab.
 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);
+  if (badge === undefined || isNumber(badge)) return badge;
+  if (isString(badge) || "key" in badge) return processText(badge);
   const { label } = badge;
-  return typeof label === "string"
-    ? { ...badge, label: processText(label) }
-    : badge;
+  return isString(label) ? { ...badge, label: processText(label) } : badge;
 }
 
 function badgeOf(item: TabProps["items"][number]) {
   const fetched = fetchedBadges.value?.[item.slot];
   if (fetched === undefined) return writtenBadge(item.badge);
-  return typeof fetched === "number"
-    ? countFormat.value.format(fetched)
-    : fetched;
+  return isNumber(fetched) ? countFormat.value.format(fetched) : fetched;
 }
 
 const tabCount = computed(() => props.items.length);
 
-// The panel lines up with the list: below it, or beside a vertical one. A
-// phone has no room for a 192px column beside the panel: the vertical list
-// goes on top, full width.
 const PANEL_CLASSES: Record<AxeOrientation, string> = {
   [AxeOrientation.horizontal]: "pt-4",
   [AxeOrientation.vertical]: "pl-5 max-sm:pt-4 max-sm:pl-0",
@@ -92,8 +76,6 @@ const ROOT_CLASSES: Record<AxeOrientation, string> = {
   [AxeOrientation.vertical]: "max-sm:flex-col max-sm:items-stretch",
 };
 
-// A fitted pill list hugs its tabs: the triggers stop growing to share the
-// full width. Link tabs never grow, and a vertical list has its own width.
 const FIT_CLASSES: Record<TabVariant, { list: string; trigger: string }> = {
   [TabVariant.pill]: { list: "w-fit max-w-full", trigger: "grow-0" },
   [TabVariant.link]: { list: "", trigger: "" },
@@ -109,8 +91,7 @@ const tabsUi = computed(() => ({
   root: ROOT_CLASSES[props.orientation],
   list: [LIST_CLASSES[props.orientation], fitClasses.value?.list],
   trigger: fitClasses.value?.trigger,
-  // The panel may shrink below its content's width (a wide table scrolls
-  // inside it instead of pushing the page sideways).
+
   content: "min-w-0",
   trailingBadge: props.badgesUrl ? COUNT_BADGE_CLASS : undefined,
 }));
@@ -127,8 +108,6 @@ const {
 
 useTabShortcuts({ items: props.items, goToTab });
 
-// A hidden panel is unmounted (unless asked otherwise): a form in it holding
-// unsaved changes would lose them, so switching away asks first.
 const root = useTemplateRef<HTMLElement>("root");
 
 async function selectTab(value: string | number): Promise<void> {
@@ -175,7 +154,7 @@ defineExpose({
     <UTabs
       :model-value="activeTab"
       :items="tabItems"
-      :color="props.color as ColorValue"
+      :color="props.color"
       :size="props.size"
       :variant="props.variant"
       :orientation="props.orientation"

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

@@ -50,8 +50,6 @@ const reads = computed(() =>
 );
 const ids = computed(() => reads.value.idsToRead);
 
-// The ids a list did not join (and the parents of those it did), with their
-// ancestors, read by `?ids=` level by level.
 const { data } = await useDmsAsyncData(
   () => `cascader-path-${props.searchUrl}-${ids.value.join(",")}`,
   () =>
@@ -69,7 +67,7 @@ const { data } = await useDmsAsyncData(
           ids.value,
         )
       : Promise.resolve(undefined),
-  // The labels of a path, not the page's data.
+
   { lazy: true, refreshOnPageRefresh: false },
 );
 
@@ -80,7 +78,7 @@ const pathRows = computed(() => [
 
 const notFound = computed(() => new Set(data.value?.notFound));
 
-function badgeOf(item: unknown): CascaderBadge | undefined {
+function badgeOf(item: CascaderPathProps["value"]): CascaderBadge | undefined {
   const id = cascaderValueId(item, keyMapping.value);
   if (id !== undefined && notFound.value.has(id)) {
     return {

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

@@ -6,7 +6,6 @@ const props = defineProps<{
   storage?: string;
 }>();
 
-// Read with the page: the server renders the file's name and link.
 const files = useFileMetadata(props.storage);
 watch(
   () => props.resourceKey,

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

@@ -24,7 +24,6 @@ const overflowCount = computed(
   () => props.images.length - visibleImages.value.length,
 );
 
-// Read with the page: the server renders the thumbnails.
 watch(
   visibleImages,
   (images) => images.forEach((image) => void files.resolve(image.key)),

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

@@ -29,7 +29,7 @@ const DEFAULT_COLUMN_PAGE_SIZE = 10;
 const DEFAULT_COLUMN_MAX_HEIGHT = "60vh";
 const DEFAULT_ROW_ID_KEY = "_id";
 const NEUTRAL_DOT_COLOR = "var(--ui-color-neutral-400)";
-// Placeholder cards per column while the board's first pages load.
+
 const SKELETON_CARD_COUNT = 3;
 
 interface BoardCellState {
@@ -61,7 +61,7 @@ interface KanbanBoardProps {
   /** CSS max-height of a column card list before it scrolls */
   columnMaxHeight?: string;
   /** Filters/search/sort query params shared with the table view */
-  baseQuery: Record<string, unknown>;
+  baseQuery: TableViewDisplayContext<T>["query"];
   componentId?: string;
   pageId?: string;
   /** Edit action config; gates dragging globally and per row (rule) */
@@ -126,18 +126,12 @@ const fetchColumnPage = (columnValue: string, offset: number) =>
     },
   });
 
-// Per-instance suffix: two boards with the same componentId/pageId on one
-// page must not share the same useDmsAsyncData entry.
 const instanceId = useId();
 
-// Stable key so re-fetches only fire when the column set actually changes,
-// not on every referential re-evaluation of the computed.
 const boardColumnsKey = computed(() =>
   boardColumns.value.map((col) => col.value).join(","),
 );
 
-// Declared before the first await: Vue forbids defineExpose afterwards.
-// `refresh` is assigned below and only called once setup has completed.
 defineExpose({ refresh: () => refresh() });
 
 const { data, status, refresh } = await useDmsAsyncData(
@@ -153,13 +147,11 @@ const { data, status, refresh } = await useDmsAsyncData(
   {
     watch: [boardColumnsKey, () => props.baseQuery, pageSize],
     lazy: true,
-    // Its table view refreshes it, on the table's own triggers.
+
     refreshOnPageRefresh: false,
   },
 );
 
-// Nothing fetched yet (a client navigation paints first): the columns hold
-// placeholder cards and counts rather than an empty board.
 const isBoardLoading = computed(
   () => data.value === null && status.value !== "error",
 );
@@ -172,19 +164,16 @@ watch(
       Object.entries(next).map(([value, page]) => [
         value,
         {
-          items: [...((page as ListResponse | undefined)?.results ?? [])],
-          total: (page as ListResponse | undefined)?.total ?? 0,
+          items: [...(page?.results ?? [])],
+          total: page?.total ?? 0,
           loadingMore: false,
         },
       ]),
-    ) as Record<string, BoardCellState>;
+    );
   },
   { immediate: true },
 );
 
-// The cards in the order the board reads, column by column and top to
-// bottom in each: a card's drawer steps through them (J / K), and through the
-// cards a "load more" or a drag adds or moves.
 const shownRows = computed(() =>
   boardColumns.value.flatMap((col) => cells.value[col.value]?.items ?? []),
 );
@@ -205,7 +194,6 @@ const loadMore = async (col: KanbanColumnDef) => {
   }
 };
 
-// A drag hands each list it changed its new cards.
 const setColumnItems = (col: KanbanColumnDef, items: T[]) => {
   const cell = cells.value[col.value];
   if (cell) cell.items = items;
@@ -229,7 +217,7 @@ const isActionAllowedForItem = (
   const config = normalizeActionConfig(action);
   if (!config.isEnabled) return false;
   if (!config.rule) return true;
-  return evaluateRowActionRule(config.rule, item as Record<string, unknown>);
+  return evaluateRowActionRule(config.rule, item);
 };
 
 const isDragEnabled = computed(
@@ -244,31 +232,20 @@ const canDragItem = (item: T): boolean =>
 const canDeleteItem = (item: T): boolean =>
   isActionAllowedForItem(props.deleteAction, item);
 
-// A card its row rule keeps in place says so with a lock, on a board where
-// the others move.
 const isItemLocked = (item: T): boolean =>
   isDragEnabled.value && !canDragItem(item);
 
-// The edit route requires the full editable field set in the body (absent
-// fields would fail the mandatory check or be blanked), so fetch the item and
-// resubmit it like the edit form does: localized fields as records
-// (x-content-language: "*"), values mapped through their type's
-// beforeStateMapper (e.g. relation objects back to ids), readonly fields
-// excluded.
 const persistGroupChange = async (
   itemId: string,
   fieldKey: string,
-  rawValue: unknown,
+  rawValue: KanbanColumnDef["rawValue"],
 ) => {
-  const fullItem = await $authFetch<Record<string, unknown>>(
-    `${props.location}/get`,
-    {
-      query: { id: itemId },
-      headers: { [CONTENT_LANGUAGE_HEADER]: "*" },
-    },
-  );
+  const fullItem = await $authFetch<Data>(`${props.location}/get`, {
+    query: { id: itemId },
+    headers: { [CONTENT_LANGUAGE_HEADER]: "*" },
+  });
 
-  const body: Record<string, unknown> = {};
+  const body: Data = {};
   for (const column of props.columns) {
     if (column.accessMode === AccessMode.ReadOnly) continue;
     let value = fullItem[column.accessorKey];
@@ -289,8 +266,6 @@ const persistGroupChange = async (
   });
 };
 
-// Serializes persist calls per item: a fast A → B → C drag must not let the
-// second PUT read a stale snapshot while the first is still in flight.
 const pendingMoves = new Map<string, Promise<void>>();
 
 const applyOptimisticMove = (
@@ -303,16 +278,14 @@ const applyOptimisticMove = (
     (col) => col.value === String(previousValue),
   );
 
-  (item as Record<string, unknown>)[fieldKey] = target.rawValue;
+  const writableItem: Data = item;
+  writableItem[fieldKey] = target.rawValue;
   const targetCell = cells.value[target.value];
   if (targetCell) targetCell.total += 1;
   const sourceCell = source ? cells.value[source.value] : undefined;
   if (sourceCell) sourceCell.total -= 1;
 };
 
-// Waits out moves of the same item queued after `current`, so the rollback
-// refresh reads the final server state instead of racing the next persist
-// call and rebuilding the board from a pre-move snapshot.
 const awaitNewerMoves = async (itemId: string, current: Promise<void>) => {
   let newer = pendingMoves.get(itemId);
   while (newer && newer !== current) {
@@ -322,7 +295,9 @@ const awaitNewerMoves = async (itemId: string, current: Promise<void>) => {
   }
 };
 
-const notifyMoveError = (error: unknown) => {
+const notifyMoveError = (
+  error: Parameters<typeof describeTableWriteError>[0],
+) => {
   toast.add({
     color: Color.error,
     title: t("dms.table.kanban.move_error"),
@@ -341,15 +316,10 @@ const onColumnChange = async (
   const itemId = getRowId(item);
 
   if (!itemId) {
-    // No stable ID — the move cannot be persisted; refresh to undo the
-    // local move the list already applied.
     await refresh();
     return;
   }
 
-  // Captured synchronously: the queued persist call below may run after the
-  // user has switched the group-by selector, and must not write to the new
-  // field.
   const fieldKey = groupByField.value;
   applyOptimisticMove(item, fieldKey, target);
 
@@ -374,10 +344,9 @@ const onColumnChange = async (
   }
 };
 
-// A custom card gets the props a card of the cards display gets, plus the
-// value of the column it sits in.
 const customCardProps = (item: T, groupValue: string) => ({
   ...props.cardComponent?.options,
+  // oxlint-disable-next-line anti-slop/no-conditional-empty-object-spread -- Retain spread evaluation order and own-property copying of module card options before context and groupValue.
   ...(props.cardContext ? buildCardProps(item, props.cardContext) : {}),
   groupValue,
 });
@@ -388,7 +357,6 @@ const customCardComponent = computed(() => {
   return resolveDmsComponent(componentName) || componentName;
 });
 
-// The cards grid's fields; the column a card sits in already says its group.
 const cardColumns = computed(() =>
   cardFieldColumns(props.columns, props.cardFields, {
     labelKey: props.labelKey,
@@ -397,9 +365,6 @@ const cardColumns = computed(() =>
   }),
 );
 
-// The line above the title: the title column's identity subtitle, or the
-// row's own id key (`rowIdKey: "code"`) under a label — never the database
-// `_id`, which tells the reader nothing.
 const identity = computed(() => cardIdentity(props.columns, props.labelKey));
 const getCardLine = (item: T): string | undefined =>
   readSubline(
@@ -420,8 +385,6 @@ const getCardTitle = (item: T): string => {
   return getRowId(item) ?? "";
 };
 
-// Renders a card field value the same way table cells do: through the
-// column's display, else its data type.
 const { renderField } = useCardFields();
 const FieldValue = (fieldProps: { column: TableViewColumn; item: T }) =>
   renderField(fieldProps.column, fieldProps.item);

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

@@ -18,12 +18,10 @@ interface KanbanDisplayOptions {
 }
 
 const options = computed(
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Backend display options are not validated here; preserve their current forwarding and fallback behavior.
   () => (props.context.options ?? {}) as KanbanDisplayOptions,
 );
 
-// Group-by + the rest of the kanban-specific inputs come from the bridge that
-// TableView provides (the generic context deliberately omits them). Falls back
-// to a local ref when used outside a TableView (defensive).
 const bridge = inject(KANBAN_DISPLAY_BRIDGE_KEY, undefined);
 const fallbackGroupBy = ref(options.value.groupByField ?? "");
 const groupByField = bridge?.groupByField ?? fallbackGroupBy;
@@ -35,7 +33,7 @@ const onCardClick = (item: T) => props.context.actions.open(item);
 
 const onCardDelete = (item: T) => {
   const id = rowId(item);
-  // The card is not among the grid's rows: hand it, its dialog names it.
+
   if (id) props.context.actions.delete([id], [item]);
 };
 
@@ -62,9 +60,9 @@ defineExpose({ refresh: () => kanbanBoardRef.value?.refresh() });
     :page-id="context.pageId"
     :edit-action="bridge?.editAction"
     :delete-action="bridge?.deleteAction"
-    @card-click="(item) => onCardClick(item as T)"
+    @card-click="(item) => onCardClick(item)"
     @card-delete="(item) => onCardDelete(item as T)"
     @moved="bridge?.onCardMoved?.()"
-    @rows-shown="(items) => context.setShownRows?.(items as T[])"
+    @rows-shown="(items) => context.setShownRows?.(items)"
   />
 </template>