@antelopejs/dms 0.11.1 → 0.12.1

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

@@ -0,0 +1,122 @@
+import type { useFileMetadata } from "../../../build/composables/files/useFileMetadata";
+
+/** `error` is a failed upload; `unavailable` is an unreadable stored value. */
+export type ItemStatus = "uploading" | "done" | "error" | "unavailable";
+
+export interface GalleryItem {
+  id: string;
+  key: string | null;
+  file: File | null;
+  url: string;
+  filename: string;
+  size: number | null;
+  width: number | null;
+  height: number | null;
+  alt: string;
+  principal: boolean;
+  status: ItemStatus;
+  progress: number;
+}
+
+const FAILURE_LABEL_KEYS: Partial<Record<ItemStatus, string>> = {
+  error: "dms.form.image.upload_failed",
+  unavailable: "dms.form.image.file_unavailable",
+};
+
+export const toValueArray = (
+  value: ImageItemValue | ImageItemValue[] | null | undefined,
+): ImageItemValue[] => {
+  if (!value) return [];
+  return Array.isArray(value) ? value : [value];
+};
+
+/** Stored display properties stay live against shared file metadata. */
+export const storedImageItems = (files: ReturnType<typeof useFileMetadata>) => {
+  // SAFETY: the descriptors complete the GalleryItem with live metadata getters.
+  const createItemFromValue = (value: ImageItemValue): GalleryItem =>
+    Object.defineProperties(
+      {
+        id: crypto.randomUUID(),
+        key: value.key,
+        file: null,
+        width: null,
+        height: null,
+        alt: value.alt ?? "",
+        principal: value.principal ?? false,
+        progress: 100,
+      },
+      {
+        url: {
+          get: () => files.metadata(value.key)?.url ?? "",
+          enumerable: true,
+        },
+        filename: {
+          get: () => files.lastRead(value.key)?.filename ?? value.key,
+          enumerable: true,
+        },
+        size: {
+          get: () => files.lastRead(value.key)?.size ?? null,
+          enumerable: true,
+        },
+        status: {
+          get: (): ItemStatus =>
+            files.isUnavailable(value.key) ? "unavailable" : "done",
+          enumerable: true,
+        },
+      },
+    ) as GalleryItem;
+  return createItemFromValue;
+};
+
+export const valueSignature = (values: ImageItemValue[]): string =>
+  JSON.stringify(
+    values.map((value) => [
+      value.key,
+      value.alt ?? "",
+      value.principal ?? false,
+    ]),
+  );
+
+export const releaseItem = (item: GalleryItem) => {
+  if (item.file && item.url) URL.revokeObjectURL(item.url);
+};
+
+export const createItemFromFile = (file: File): GalleryItem => ({
+  id: crypto.randomUUID(),
+  key: null,
+  file,
+  url: URL.createObjectURL(file),
+  filename: file.name,
+  size: file.size,
+  width: null,
+  height: null,
+  alt: "",
+  principal: false,
+  status: "uploading",
+  progress: 0,
+});
+
+const BYTES_PER_UNIT = 1024;
+
+export const formatFileSize = (bytes: number): string => {
+  const units = ["B", "KB", "MB", "GB"];
+  let size = bytes;
+  let unitIndex = 0;
+
+  while (size >= BYTES_PER_UNIT && unitIndex < units.length - 1) {
+    size /= BYTES_PER_UNIT;
+    unitIndex++;
+  }
+
+  return `${size.toFixed(1)} ${units[unitIndex]}`;
+};
+
+export const failureLabelKey = (item: GalleryItem): string | undefined =>
+  FAILURE_LABEL_KEYS[item.status];
+
+export const itemMeta = (item: GalleryItem): string => {
+  const parts: string[] = [];
+  if (item.width && item.height) parts.push(`${item.width}×${item.height}`);
+  if (item.size !== null) parts.push(formatFileSize(item.size));
+  return parts.join(" · ");
+};

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

@@ -0,0 +1,41 @@
+import type { Ref } from "vue";
+import type { GalleryItem } from "./imageItems";
+
+export interface ImagePresentationState {
+  t: ReturnType<typeof useI18n>["t"];
+  ariaAttrs: ReturnType<typeof useFormField>["ariaAttrs"];
+  fileInput: Ref<HTMLInputElement | null>;
+  items: Ref<GalleryItem[]>;
+  singleItem: Ref<GalleryItem | null>;
+  detailItem: Ref<GalleryItem | null>;
+  isDraggingOver: Ref<boolean>;
+  dragItemId: Ref<string | null>;
+  dragOverItemId: Ref<string | null>;
+  detailAltDraft: Ref<string>;
+  isDetailOpen: Ref<boolean>;
+  invalid: Ref<boolean>;
+  isFull: Ref<boolean>;
+  acceptString: Ref<string>;
+  formatsHint: Ref<string>;
+  pasteShortcut: Ref<string>;
+  dropZoneClass: Ref<string>;
+  rejections: Ref<string[]>;
+  rejectionId: string;
+  singleAltInputId: string;
+  detailAltInputId: string;
+  onFileInputChange: (event: Event) => void;
+  onDrop: (event: DragEvent) => void;
+  onPaste: (event: ClipboardEvent) => void;
+  onImageLoad: (item: GalleryItem, event: Event) => void;
+  openFilePicker: () => void;
+  openDetail: (id: string) => void;
+  saveDetail: () => void;
+  onSingleAltChange: () => void;
+  setPrincipal: (id: string) => void;
+  removeItem: (id: string) => void;
+  retryUpload: (id: string) => void;
+  onTileDragStart: (event: DragEvent, id: string) => void;
+  onTileDragEnter: (id: string) => void;
+  onTileDragEnd: () => void;
+  onTileDrop: (id: string) => void;
+}

package/frontend-vue/layers/dms-ui/app/components/grid/Grid.vue

@@ -32,8 +32,6 @@ const props = withDefaults(defineProps<GridProps>(), {
  */
 const rowColumnCounts = ref(new Map<symbol, number>());
 
-// The widest row the layout declares for this grid, known from the first
-// render (only when the declaration is this grid's own, not an ancestor's).
 const declared = inject<GridDeclaredColumns | null>(
   GRID_DECLARED_COLUMNS,
   null,
@@ -68,8 +66,6 @@ const columnsTemplate = computed(() =>
   gridColumnsTemplate(maxColumns.value, props.gap, props.minColumnWidth),
 );
 
-// The grid is a size container: its responsive rules (spacers, clamped spans)
-// are container queries, identical in the server render and the browser.
 const scope = gridScopeId(props.componentId || useId());
 const responsiveStyles = computed(() =>
   gridResponsiveStyles(

package/frontend-vue/layers/dms-ui/app/components/grid/GridRow.vue

@@ -19,10 +19,6 @@ const props = defineProps<GridRowProps>();
 
 const gridContext = inject<GridContext | null>(GRID_CONTEXT, null);
 
-// The grid's template is for its own rows only. A row nested in one of this
-// row's cells (inside a Section, a stack...) lays out its own children: were it
-// to read the outer grid, it would take that grid's column count and leave
-// empty tracks beside its cells. A Grid inside a cell provides its own context.
 provide<GridContext | null>(GRID_CONTEXT, null);
 
 /** The identity this row counts under, so its width dies with it. */
@@ -34,7 +30,7 @@ watchEffect(() => gridContext?.setRowColumnCount(rowId, columnCount.value));
 onUnmounted(() => gridContext?.dropRow(rowId));
 
 const gap = computed(() => gridContext?.gap.value ?? DEFAULT_GAP);
-// Outside a Grid, the row spreads its own children over the width.
+
 const maxColumns = computed(() =>
   Math.max(1, gridContext ? gridContext.maxColumns.value : columnCount.value),
 );
@@ -45,12 +41,8 @@ const columnsTemplate = computed(() =>
   gridColumnsTemplate(maxColumns.value, gap.value, minColumnWidth.value),
 );
 
-// The row is a size container: whether its spacers hold a cell and how far
-// its spans reach are container queries on its own width, identical in the
-// server render and the browser (see gridResponsiveStyles).
 const scope = gridScopeId(props.componentId || useId());
-// Its cells close over the ones their blocks leave empty
-// (see gridCollapsedCellStyles).
+
 const responsiveStyles = computed(() =>
   [
     gridCollapsedCellStyles(scope, maxColumns.value),

package/frontend-vue/layers/dms-ui/app/components/grid/columns.ts

@@ -95,8 +95,7 @@ export function gridResponsiveStyles(
     `@container ${scope} (width < ${trackBreakpoint(tracks, gap, minColumnWidth)})`;
   const hideSpacers = `${cells}.dms-spacer, ${cells}:has(> .dms-spacer) { display: none; }`;
   const rules: string[] = [];
-  // Widest first: at a given width the narrowest matching rule comes last and
-  // wins. The first one (one track short of every column) also hides spacers.
+
   for (
     let tracks = columns - SINGLE_COLUMN;
     tracks >= SINGLE_COLUMN;

package/frontend-vue/layers/dms-ui/app/components/guard/Guard.vue

@@ -10,11 +10,6 @@ import {
 } from "../../build/composables/blocks/useGuard";
 import { notFoundTexts } from "../../build/utils/fetchNotFound";
 
-// `Guard` block (interface-dms `base/guard`): renders its children unchanged
-// unless a route says there is nothing for them, then one EmptyState (the
-// `fallback`, with the answer's `emptyState` laid over it) in their place.
-// Several children stack with the room the page leaves between its blocks,
-// as in a tab: the page spaces the guard, not what it holds.
 interface GuardProps extends DefaultComponentProps {
   fetchUrl?: string;
   fetchUrlMethod?: string;
@@ -43,8 +38,6 @@ const state = useGuard(
   () => props.routeParams,
 );
 
-// `notFound` draws what a block whose source answers 404 draws: the same
-// title, the 404's message (or the same hint) and the same icon.
 const DEFAULT_FALLBACKS: Record<
   GuardCondition,
   (state: GuardState) => GuardFallback

package/frontend-vue/layers/dms-ui/app/components/icon-well/IconWell.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { tv } from "tailwind-variants";
 import { DMS_TONE_WELL } from "../../build/utils/tone";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 
 export type IconWellSize = "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
 /**
@@ -32,7 +32,7 @@ interface IconWellProps {
 
 interface IconWellSlots {
   /** Replaces the icon (initials, a glyph, a spinner…). */
-  default?: () => unknown;
+  default?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<IconWellProps>(), {
@@ -43,7 +43,6 @@ const props = withDefaults(defineProps<IconWellProps>(), {
 });
 defineSlots<IconWellSlots>();
 
-// v2 .icon-well: a tinted rounded tile with an inset 1px line of its tone.
 const theme = tv({
   slots: {
     root: "grid shrink-0 place-items-center ring-1 ring-inset",

package/frontend-vue/layers/dms-ui/app/components/key-value-list/KeyValueList.vue

@@ -1,13 +1,14 @@
 <script setup lang="ts">
 import { readableNumberFormat } from "#dms-core/app/utils/formatter";
+import { isNumber } from "#dms-core/app/utils/type-check";
 import { pageLink } from "../../build/composables/page/pageUrlValues";
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { regionalDateTimeFormat } from "#dms-core/app/utils/regional";
 import DmsStatusPill from "../status-pill/StatusPill.vue";
 import DmsAutoLink from "../link/AutoLink.vue";
 import DmsCopyButton from "../copy/CopyButton.vue";
 import { DMS_TONE_TEXT } from "../../build/utils/tone";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 
 /**
  * How a value is drawn: `text` plain, `status` a tinted pill, `money` a
@@ -60,7 +61,10 @@ interface KeyValueListProps {
 
 interface KeyValueListSlots {
   /** Replaces a value cell; receives the item and its formatted text. */
-  value?: (props: { item: KeyValueItem; formatted: string }) => unknown;
+  value?: (props: {
+    item: KeyValueItem;
+    formatted: string;
+  }) => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<KeyValueListProps>(), {
@@ -76,11 +80,10 @@ const slots = defineSlots<KeyValueListSlots>();
 const EMPTY_VALUE = "—";
 const MAX_COLUMNS = 3;
 
-// v2 .c-dl: label left, value right, rows split by a muted hairline. Each
-// column's first row drops its line, at every breakpoint. The columns follow
-// the list's own width (a drawer, a card), not the window's: each keeps its
-// 120px label and room for a value.
-const COLUMN_CLASSES: Record<number, string> = {
+const COLUMN_CLASSES: Record<
+  NonNullable<KeyValueListProps["columns"]>,
+  string
+> = {
   1: "[&>div:first-child]:border-t-0",
   2: "gap-x-8 @min-[560px]:grid-cols-2 [&>div:first-child]:border-t-0 @min-[560px]:[&>div:nth-child(2)]:border-t-0",
   3: "gap-x-8 @min-[560px]:grid-cols-2 @min-[840px]:grid-cols-3 [&>div:first-child]:border-t-0 @min-[560px]:[&>div:nth-child(2)]:border-t-0 @min-[840px]:[&>div:nth-child(3)]:border-t-0",
@@ -94,8 +97,7 @@ const columnClass = computed(
       Math.min(MAX_COLUMNS, Math.max(1, Math.round(props.columns)))
     ],
 );
-// The row wraps: a value too long to sit beside its label (a phone, a narrow
-// column) drops under it, still right-aligned, instead of being cut.
+
 const rowClass = computed(() => [
   "border-muted flex flex-wrap items-center gap-x-3 gap-y-0.5 border-t",
   props.dense ? "min-h-8 py-1" : "min-h-[38px] py-1.5",
@@ -107,19 +109,18 @@ const showPlaceholders = computed(
 type ValueFormatter = (item: KeyValueItem, value: string | number) => string;
 
 function formatNumber(_item: KeyValueItem, value: string | number): string {
-  if (typeof value !== "number") return value;
+  if (!isNumber(value)) return value;
   return readableNumberFormat(locale.value).format(value);
 }
 
 function formatMoney(item: KeyValueItem, value: string | number): string {
-  if (typeof value !== "number") return value;
+  if (!isNumber(value)) return value;
   try {
     return readableNumberFormat(locale.value, {
       style: "currency",
       currency: item.currency ?? props.currency,
     }).format(value);
   } catch {
-    // An unknown currency code: the amount is still worth showing.
     return formatNumber(item, value);
   }
 }
@@ -137,7 +138,6 @@ const FORMATTERS: Partial<Record<KeyValueType, ValueFormatter>> = {
   date: formatDate,
 };
 
-// Text styles per type; the tone colours every type but a link.
 const TYPE_CLASSES: Partial<Record<KeyValueType, string>> = {
   link: "text-primary font-[550]",
   mono: "font-mono text-[12.5px] tabular-nums",
@@ -160,12 +160,10 @@ function valueClass(item: KeyValueItem): string[] {
       : item.tone
         ? DMS_TONE_TEXT[item.tone]
         : "text-highlighted";
-  // A value longer than the whole row (an id, a long name) wraps rather than
-  // hiding its end: there is no hover on a phone to reveal it.
+
   return ["wrap-anywhere", color, TYPE_CLASSES[type] ?? ""];
 }
 
-// An empty value shows a dash, which is not worth copying.
 function copyTextOf(item: KeyValueItem): string | undefined {
   if (item.copyValue) return item.copyValue;
   if (!item.copy) return undefined;

package/frontend-vue/layers/dms-ui/app/components/kpi/KpiCard.vue

@@ -2,9 +2,7 @@
 import { computed } from "vue";
 import DmsStatCell from "../../build/components/stat/StatCell.vue";
 import DmsEyebrow from "../section-header/Eyebrow.vue";
-// Imported rather than resolved from the registry: a registered component is
-// a lazy chunk of its own, fetched only when the data first shows it, so the
-// trend would pop in a beat after the value.
+
 import DmsTrendBadge from "../chart/internal/TrendBadge.vue";
 import DmsSparkline from "../chart/internal/Sparkline.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
@@ -55,7 +53,7 @@ interface Props extends DefaultComponentProps {
 }
 
 const DEFAULT_FALLBACK_ICON = "i-ph-chart-bar";
-// v2 KPI sparklines are cyan when the trend is good, not green.
+
 const POSITIVE_SPARKLINE_ACCENT = "primary";
 
 const props = withDefaults(defineProps<Props>(), {
@@ -97,8 +95,6 @@ const { data, isLoading, error, refresh } = useChartFetch<KpiCardResponse>({
   watchSource: () => watchKey.value,
 });
 
-// With no comparison selected on the scope, a change the data still carries
-// (a static one, a route ignoring `comparison`) is not shown either.
 const comparison = usePeriodComparisonDisplay(props.periodScope);
 const value = computed(() => data.value?.value);
 const delta = computed(() =>
@@ -121,7 +117,6 @@ const formattedParts = computed(() =>
       ),
 );
 
-// Formatted as the value is, unit and currency included: "vs €42,900".
 const previousText = computed(() => {
   if (!props.showPreviousValue || previousValue.value === undefined) return "";
   const formatted = formatValue(
@@ -135,40 +130,32 @@ const previousText = computed(() => {
 });
 
 const isFirstLoad = computed(() => isLoading.value && data.value === null);
-// v2 error state: a failed first load shows a message and a retry button in
-// place of the value; a failed refetch keeps the last value.
+
 const hasError = computed(
   () => !isLoading.value && data.value === null && Boolean(error.value),
 );
-// A 404 is a status too, but nothing to retry: the value does not exist.
+
 const notFound = computed(() =>
   hasError.value ? readFetchNotFound(error.value) : null,
 );
-// A refetch keeps the stale value on screen, faded, instead of a skeleton.
+
 const isRefreshing = computed(() => isLoading.value && data.value !== null);
 const showTrend = computed(() => props.showDelta && delta.value !== null);
-// The trend's line is held while the change is still to come, so toggling a
-// comparison never moves the footnote, and dropped with no comparison at all.
+
 const showTrendLine = computed(
   () => props.showDelta && !comparison.isOff.value,
 );
 const hasSparkline = computed(
   () => props.showSparkline && sparkline.value.length > 0,
 );
-// The comparison label names the period the change is measured against, so
-// it shows with the change only: an explicit `compareLabel` wins, then the
-// description, then the label of the comparison the scope selects. With no
-// change (no comparison selected, or none in the data) only the description.
+
 const footnote = computed(() => {
   const isComparing = delta.value !== null;
   const text = (isComparing && props.compareLabel) || props.description;
   if (text) return processI18n(text);
   return isComparing ? (comparison.label.value ?? "") : "";
 });
-// Known before any data: the skeleton draws it, and the loaded card holds it
-// empty while the change is still to come, so toggling a comparison moves
-// nothing. With no comparison selected, the trend's line goes and only a
-// description keeps this one.
+
 const hasFootnoteLine = computed(
   () =>
     !!props.description ||

package/frontend-vue/layers/dms-ui/app/components/link/AutoLink.vue

@@ -1,18 +1,14 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { EXTERNAL_LINK_ATTRIBUTES, linkKind } from "../../build/utils/link";
 
-// A link whose target comes from data (a block option, a fetched row): a DMS
-// route goes through <DmsLink> (Inertia visit), an in-page anchor stays a bare
-// <a href="#…">, and an absolute URL opens in a new tab. Unstyled, so the
-// caller's classes (.dms-card, a row) style it.
 interface AutoLinkProps {
   /** Route path, `#anchor` or absolute URL. */
   to: string;
 }
 
 interface AutoLinkSlots {
-  default?: () => unknown;
+  default?: () => ReturnType<Slot>;
 }
 
 const props = defineProps<AutoLinkProps>();

package/frontend-vue/layers/dms-ui/app/components/list-row/ListRow.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, resolveComponent, useSlots } from "vue";
+import { type Slot, computed, resolveComponent, useSlots } from "vue";
 import { tv } from "tailwind-variants";
 import DmsIconWell, {
   type IconWellSize,
@@ -67,14 +67,14 @@ interface ListRowProps {
 
 interface ListRowSlots {
   /** Title content (badges inline after the text). */
-  default?: () => unknown;
+  default?: () => ReturnType<Slot>;
   /** Replaces the icon well. */
-  leading?: () => unknown;
-  description?: () => unknown;
+  leading?: () => ReturnType<Slot>;
+  description?: () => ReturnType<Slot>;
   /** Meta entries: direct `<span>` children are joined by "·". */
-  meta?: () => unknown;
+  meta?: () => ReturnType<Slot>;
   /** Right column: actions, a status, a time. */
-  trailing?: () => unknown;
+  trailing?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<ListRowProps>(), {
@@ -89,7 +89,7 @@ const props = withDefaults(defineProps<ListRowProps>(), {
   detail: undefined,
   mono: false,
   size: "md",
-  // Undefined, not false: an absent read state is not "read".
+
   unread: undefined,
   marker: "trailing",
   unreadLabel: undefined,
@@ -103,7 +103,6 @@ defineSlots<ListRowSlots>();
 const slots = useSlots();
 const { t } = useI18n();
 
-// The marker column is as tall as the well so the dot sits on its centre.
 const MARKER_HEIGHTS: Record<IconWellSize, string> = {
   "2xs": "h-7",
   xs: "h-[30px]",
@@ -114,9 +113,6 @@ const MARKER_HEIGHTS: Record<IconWellSize, string> = {
   "2xl": "h-11",
 };
 
-// v2 .cs-lead / .activity / .cs-notif: one row of a list inside a card. Rows
-// are set apart by a hairline only between two rows, so a day separator or a
-// card head above the first one keeps its own edge.
 const theme = tv({
   slots: {
     root: "dms-list-row border-muted grid min-w-0 [.dms-list-row+&]:border-t",
@@ -127,8 +123,7 @@ const theme = tv({
     title: "flex items-center gap-2",
     titleText: "",
     description: "text-muted mt-0.5 text-[12.5px]",
-    // The "·" closes each entry followed by another (rather than opening it),
-    // so a wrapped line never starts with a separator.
+
     meta: "flex flex-wrap items-center gap-x-2 gap-y-1 [&>span:has(+span)]:after:text-dimmed [&>span:has(+span)]:after:ms-2 [&>span:has(+span)]:after:content-['·']",
     detail: "text-dimmed mt-0.5 font-mono text-[11px] font-medium",
     trailing: "flex shrink-0 items-center gap-2",
@@ -139,10 +134,6 @@ const theme = tv({
   },
   variants: {
     size: {
-      // A wrapping flex row rather than a grid: the trailing column (a
-      // chevron, a time, a button) stays beside the lead while the lead keeps
-      // at least 11rem, and only then drops under it, end-aligned (a phone,
-      // wide actions).
       md: {
         root: "flex flex-wrap items-center gap-x-5 gap-y-2 px-[18px] py-3.5",
         lead: "flex-[1_1_11rem] items-center",
@@ -185,14 +176,11 @@ const theme = tv({
         root: "bg-linear-90 from-(--dms-accent-tint) to-transparent to-60% shadow-[inset_2px_0_0_var(--dms-accent)]",
       },
     },
-    // One line on wide screens; a phone has no hover to reveal the cut
-    // end, so the title and meta wrap there instead.
+
     truncate: {
       true: {
-        title:
-          "truncate flex-nowrap max-sm:flex-wrap max-sm:whitespace-normal",
-        // The text box, not the flex title, carries the ellipsis: a flex
-        // container only clips its overflowing children.
+        title: "truncate flex-nowrap max-sm:flex-wrap max-sm:whitespace-normal",
+
         titleText: "truncate max-sm:whitespace-normal",
         meta: "flex-nowrap overflow-hidden whitespace-nowrap max-sm:flex-wrap max-sm:whitespace-normal",
         detail: "truncate max-sm:whitespace-normal",

package/frontend-vue/layers/dms-ui/app/components/master-detail/MasterDetail.vue

@@ -1,12 +1,4 @@
 <script setup lang="ts">
-// Two-pane master/detail layout (design .md-split): a selectable list on the
-// left (380px) and a detail panel on the right. The list is driven by `items`
-// + v-model; the detail is rendered by the default slot, which receives the
-// currently selected value.
-//
-// The panes sit side by side from 64rem of the layout's own width (the former
-// `lg` viewport breakpoint), not the viewport's: a docked side panel or a
-// narrow grid cell leaves less room than the screen suggests.
 interface MdItem {
   value: string | number;
   label: string;
@@ -22,6 +14,7 @@ defineProps<{
 const selected = defineModel<string | number>();
 
 defineSlots<{
+  // oxlint-disable-next-line anti-slop/no-unknown-returns -- Vue's Slot return type narrows this existing consumer-provided slot contract; preserve the unrestricted return annotation.
   default?: (props: { selected: string | number | undefined }) => unknown;
 }>();
 </script>

package/frontend-vue/layers/dms-ui/app/components/meter/Meter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { readableNumberFormat } from "#dms-core/app/utils/formatter";
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { tv } from "tailwind-variants";
 
 /**
@@ -60,7 +60,7 @@ interface MeterProps {
 
 interface MeterSlots {
   /** Extra legend content, pushed right (a "Manage" link). */
-  "legend-end"?: () => unknown;
+  "legend-end"?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<MeterProps>(), {
@@ -94,13 +94,12 @@ const FILL_CLASSES: Record<MeterTone, string> = {
   info: "bg-info",
 };
 
-// v2 .c-meter: a label line with the mono value, the bar, then the legend.
 const theme = tv({
   slots: {
     root: "grid min-w-0 gap-1.5",
     top: "flex min-w-0 items-baseline gap-2 text-[13px]",
     label: "text-toned",
-    // One line beside the label; wraps on a phone rather than being cut.
+
     hint: "text-dimmed truncate text-xs max-sm:whitespace-normal",
     value: "text-toned ms-auto font-mono text-xs font-semibold tabular-nums",
     track: "bg-accented flex w-full gap-0.5 overflow-hidden rounded-full",
@@ -160,7 +159,7 @@ const drawn = computed<DrawnSegment[]>(() => {
     return [
       {
         width: totalPercent.value,
-        // A lone fill keeps the rounded end of the track.
+
         className: `${FILL_CLASSES[singleTone.value]} rounded-[inherit]`,
       },
     ];