@antelopejs/dms 0.11.0 → 0.12.0

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

@@ -4,7 +4,7 @@ import { gridColumnsTemplate } from "../grid/columns";
 import {
   useCategoryNavCards,
   usePreviewEntryVeil,
-} from "#dms-layout/app/build/composables/navigation/useCategoryNavCards";
+} from "#dms-ui/app/entries/composables/navigation/useCategoryNavCards";
 import { computed } from "vue";
 import DmsNavCard from "../card/NavCard.vue";
 import DmsPermissionVeil from "../../build/components/permission/PermissionVeil.vue";
@@ -14,14 +14,11 @@ import DmsBlockStatus, {
 } from "../../build/components/blocks/BlockStatus.vue";
 import { useBlockItems } from "../../build/composables/blocks/useBlockItems";
 import type { IconWellTone } from "../icon-well/IconWell.vue";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 
-// `NavCardGrid` block (interface-dms `base/nav-card-grid`): a responsive grid
-// of navigation cards (v2 settings overview, a module's home), static or from
-// `fetchUrl` (`{ items }`) so each card can carry its target's live state.
 interface NavCardGridItem {
   id?: string;
   title: BlockText;
@@ -80,8 +77,7 @@ const props = withDefaults(defineProps<NavCardGridBlockProps>(), {
 });
 
 const MAX_COLUMNS = 4;
-// Narrowest card before the grid drops a column, and the `gap-3` between
-// cards the column width leaves room for.
+
 const MIN_CARD_WIDTH = "16rem";
 const CARD_GAP = "0.75rem";
 
@@ -113,9 +109,6 @@ const columnCount = computed(() =>
 );
 const placeholders = computed(() => props.skeletonCount ?? columnCount.value);
 
-// As many cards per row as the grid's own width holds, never more than
-// `columns`: viewport breakpoints squeezed three cards into a column next to
-// a navigation (the settings pages) and truncated their titles.
 const gridStyle = computed(() => ({
   gridTemplateColumns: gridColumnsTemplate(
     columnCount.value,
@@ -139,12 +132,9 @@ const cards = computed(() =>
     readout: item.readout?.map((line) => processText(line)),
   })),
 );
-// v2 .sx-grid: cards closing on a state line run a tighter rhythm, the whole
-// grid at once so the rows stay aligned.
+
 const hasStates = computed(() => cards.value.some((card) => !!card.state));
-// A category the viewer opens no page of is left out, title included, as the
-// navigation leaves out an empty group: the settings overview of a member
-// without a role shows no Workspace section. `empty` shows a message instead.
+
 const isLeftOut = computed(
   () => !!props.categoryId && !props.empty && cards.value.length === 0,
 );

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

@@ -11,8 +11,6 @@ import { PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES } from "../../build/composables/pag
 import { refreshPageBlocks } from "../../utils/blockRefresh";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 
-// Its ids are optional: a component may draw it by hand around controls of
-// its own, outside the page's block tree.
 interface PageToolbarBlockProps extends Partial<DefaultComponentProps> {
   /** The size of its controls, unless a child sets its own. */
   size?: PageToolbarSize;
@@ -28,8 +26,6 @@ const props = withDefaults(defineProps<PageToolbarBlockProps>(), {
   refresh: true,
 });
 
-// The updated label at the live toggle's steps, so it reads alike with or
-// without `live`; the refresh button stands as tall as the toggle's pill.
 const STATUS_TEXT_CLASSES: Record<PageToolbarSize, string> = {
   xs: "text-[11.5px]",
   sm: "text-[12.5px]",
@@ -48,18 +44,14 @@ const heightClass = computed(
   () => PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES[props.size],
 );
 
-// The browser's clock: the server and the hydrating render draw no status.
 const isMounted = ref(false);
 onMounted(() => (isMounted.value = true));
 
-// A live page's own clock, else the page's last read.
 const updatedLabel = useUpdatedLabel(
   () => live.lastUpdatedAt.value ?? pageReadAt.value,
   props.showUpdatedAt,
 );
 
-// The live toggle says when the page was updated, and more: the toolbar
-// only does where there is none to see.
 const showsStatus = computed(
   () =>
     isMounted.value &&

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

@@ -13,10 +13,6 @@ import { useComposedText } from "../../../../dms-core/app/composables/translatio
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 
-// `StatGroup` block (interface-dms `base/stat-group`): the generic StatGroup
-// fed from the block options or from `fetchUrl` (`{ items }`). Texts follow
-// the `$` i18n-key convention or are composed texts; numeric values are
-// formatted for the locale.
 interface StatGroupBlockItem
   extends Omit<StatGroupItem, "eyebrow" | "value" | "detail"> {
   eyebrow: BlockText;

package/frontend-vue/layers/dms-ui/app/components/card/Card.vue

@@ -1,18 +1,8 @@
 <script setup lang="ts">
+import type { Slot } from "vue";
+
 import DmsEyebrow from "../section-header/Eyebrow.vue";
 
-// Card frame around primary components (design .card). The visual style
-// lives in the .dms-card class (dms-layout main.css) so non-template
-// consumers (e.g. the table's tailwind-variants theme) can share it;
-// this component is the template-facing API.
-//
-// - variant "elevated": stronger shadow for floating, full-page surfaces
-//   (auth boxes, error/account panels) that sit on an empty backdrop.
-// - interactive: hover affordances for clickable cards (accent border +
-//   lift). See <DmsNavCard> for the icon/title/description link tile.
-// - selected: the picked option of a card picker (accent border + glow).
-// - title / #header / #actions: the 48px head with the mono eyebrow title;
-//   #footer: the muted band. With either, `padded` only pads the body.
 interface Props {
   as?: string;
   padded?: boolean;
@@ -26,13 +16,13 @@ interface Props {
 }
 
 interface Slots {
-  default?: () => unknown;
+  default?: () => ReturnType<Slot>;
   /** Replaces the head content (title and count). */
-  header?: () => unknown;
+  header?: () => ReturnType<Slot>;
   /** Right-aligned head actions. */
-  actions?: () => unknown;
+  actions?: () => ReturnType<Slot>;
   /** Muted footer band. */
-  footer?: () => unknown;
+  footer?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -59,8 +49,7 @@ const cardClass = computed(() => [
   props.variant === "elevated" && "dms-card--elevated",
   props.interactive && "dms-card--interactive",
   props.selected && "dms-card--selected",
-  // Clip, not hidden: the card rounds its head and footer without becoming
-  // the scroll container a sticky save bar inside it would stick to.
+
   isSectioned.value && "flex flex-col overflow-clip",
   props.padded && !isSectioned.value && BODY_PADDING,
 ]);

package/frontend-vue/layers/dms-ui/app/components/card/NavCard.vue

@@ -4,22 +4,10 @@ import { tv } from "tailwind-variants";
 import DmsIconWell, { type IconWellTone } from "../icon-well/IconWell.vue";
 import DmsStatusPill from "../status-pill/StatusPill.vue";
 import DmsAutoLink from "../link/AutoLink.vue";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 import { MONO_TAG_CLASS } from "../../build/utils/monoChip";
 import { navBadgeClass } from "../../build/utils/navBadge";
 
-// Navigation tile (v2 .navcard): an icon well + title + description rendered
-// as a clickable card linking elsewhere (settings overview, a module's home),
-// optionally closed by the target's live state (v2 .sx-state, pinned to the
-// bottom so the states of a row line up) or a mono readout (v2
-// .module-tile__viz). A tag follows the title (v2 .sx-mod); the target's
-// navigation badge sits in the top corner, drawn as the settings nav draws it.
-//
-// Built on a bare <DmsAutoLink> rather than <ULink> on purpose: ULink's theme
-// injects its own `rounded-md` which would override the .dms-card radius.
-// The link is unstyled, so the shared .dms-card surface applies. Classes
-// passed by the caller are merged (tailwind-merge), so `gap-2.5` replaces the
-// default gap instead of competing with it.
 interface NavCardProps {
   /** Route, `#anchor` or URL. */
   to: string;
@@ -61,8 +49,7 @@ const attrs = useAttrs();
 const theme = tv({
   slots: {
     root: "dms-card dms-card--interactive group flex flex-col gap-3 p-[18px] text-start",
-    // Two lines before the ellipsis: a title cut on its first line no longer
-    // says where the card leads, and the card already grows with its text.
+
     title:
       "text-highlighted line-clamp-2 min-w-0 text-sm font-[650] [overflow-wrap:anywhere]",
     tag: `${MONO_TAG_CLASS} bg-elevated shrink-0 text-dimmed`,
@@ -76,6 +63,7 @@ const theme = tv({
 });
 
 const ui = theme();
+// oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Vue attrs expose unknown class values; inference and the theme's ClassValue owner cannot prove this pass-through input without validating or transforming it.
 const rootClass = computed(() => ui.root({ class: attrs.class as string }));
 const passthrough = computed(() => {
   const { class: _class, ...rest } = attrs;

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isObject } from "../../../../dms-core/app/utils/type-check";
 import {
   computed,
   defineAsyncComponent,
@@ -10,11 +11,13 @@ import {
   watch,
   type Component,
 } from "vue";
+import type { VueApexChartsComponentMethods } from "vue3-apexcharts";
 import { ensureApexLocale } from "../../composables/chart/apexLocales";
 
 interface Props {
   apexType: string;
   height: number | string;
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- The existing public prop accepts raw Apex overrides; ApexOptions would narrow that contract and cannot type arbitrary dotted-path values.
   options: Record<string, unknown>;
   series: unknown;
 }
@@ -32,12 +35,7 @@ interface ApexCore {
 
 interface ApexChartInstance {
   chart: ApexCore | null;
-  updateOptions: (
-    options: Record<string, unknown>,
-    redrawPaths?: boolean,
-    animate?: boolean,
-    updateSyncedCharts?: boolean,
-  ) => Promise<unknown>;
+  updateOptions: VueApexChartsComponentMethods["updateOptions"];
 }
 
 const props = defineProps<Props>();
@@ -50,15 +48,13 @@ const WIDTH_TOLERANCE_PX = 1;
 
 const { locale } = useI18n();
 
-// ApexCharts stays a lazy chunk: the caller (Chart) keeps the chart's frame
-// and a skeleton until this host reports the chart drawn.
-const ApexChart = defineAsyncComponent(async () => {
+const ApexChart = defineAsyncComponent<Component>(async () => {
   const [mod] = await Promise.all([
     import("vue3-apexcharts"),
     import("apexcharts"),
     ensureApexLocale(locale.value),
   ]);
-  return (mod.default ?? mod) as unknown as Component;
+  return mod.default ?? mod;
 });
 
 onMounted(() => {
@@ -78,34 +74,33 @@ const chartRef = ref<ApexChartInstance | null>(null);
  * (formatters, event handlers) and dates are kept as they are.
  */
 function toApexInput<T>(value: T): T {
-  const raw = toRaw(value) as unknown;
-  if (Array.isArray(raw)) return raw.map((entry) => toApexInput(entry)) as T;
-  if (raw && typeof raw === "object" && !(raw instanceof Date)) {
-    const copy: Record<string, unknown> = {};
+  const raw = toRaw(value);
+  if (Array.isArray(raw)) {
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Generic T may contain class instances or array properties this existing traversal does not preserve; its callers have no narrower validated options owner.
+    return raw.map((entry) => toApexInput(entry)) as T;
+  }
+  if (raw && isObject(raw) && !(raw instanceof Date)) {
+    const copy: Props["options"] = {};
     for (const [key, entry] of Object.entries(raw)) {
       copy[key] = toApexInput(entry);
     }
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Generic T does not establish a plain object; the existing clone drops prototypes and non-enumerable fields, so inference cannot prove it retains T.
     return copy as T;
   }
-  return raw as T;
+  return raw;
 }
 
 function rawApexInput<T extends object>(value: T): T {
   return markRaw(toApexInput(value));
 }
 
-const apexSeries = computed(() =>
-  rawApexInput((props.series ?? []) as unknown[]),
-);
+const apexSeries = computed(() => rawApexInput(props.series ?? []));
 
-// The wrapper's reactive options update JSON-clones away formatter callbacks.
-const pinnedOptions = shallowRef<Record<string, unknown>>(
-  rawApexInput(props.options),
-);
+const pinnedOptions = shallowRef<Props["options"]>(rawApexInput(props.options));
 
 function pushOptionsWithoutGroupBroadcast(
   instance: ApexChartInstance,
-  next: Record<string, unknown>,
+  next: Props["options"],
 ): void {
   void instance
     .updateOptions(
@@ -117,8 +112,9 @@ function pushOptionsWithoutGroupBroadcast(
     .catch(() => undefined);
 }
 
-function axisTypeOf(options: Record<string, unknown>): unknown {
-  return (options.xaxis as Record<string, unknown> | undefined)?.type;
+function axisTypeOf(options: Props["options"]) {
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Raw option overrides leave xaxis unknown; no owner proves this object shape, and validation would change the existing optional-property projection.
+  return (options.xaxis as { type?: unknown } | undefined)?.type;
 }
 
 /**

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

@@ -6,7 +6,10 @@ import {
   chartFrameHeight,
   useApexChart,
 } from "../../composables/chart/useApexChart";
-import type { MixedSeriesDef } from "../../composables/chart/useApexChart.types";
+import type {
+  ApexClickHandler,
+  MixedSeriesDef,
+} from "../../composables/chart/useApexChart.types";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { useThemeRevision } from "../../composables/chart/useThemeRevision";
 import { formatValue } from "../../composables/chart/formatValue";
@@ -92,7 +95,7 @@ const EMPTY_ICON = "i-ph-chart-line-up";
 
 const props = withDefaults(defineProps<Props>(), {
   height: DEFAULT_CHART_HEIGHT,
-  // Declared like the server schema: Vue casts a missing boolean to false.
+
   showGrid: true,
   roundedCorners: true,
   showTooltip: true,
@@ -121,9 +124,6 @@ const themeRevision = useThemeRevision();
 
 const isCircular = computed(() => CIRCULAR_CHART_TYPES.includes(props.type));
 
-// A bare chart's own series and slices are translated like a card's: the
-// `$` keys of a name, a category or a label reach Apex in the reader's
-// language. A nested chart receives its card's series already translated.
 function localized(series: ChartSeries[]): ChartSeries[] {
   return series.map((entry) => localizeSeries(entry, processI18n));
 }
@@ -131,6 +131,7 @@ function localized(series: ChartSeries[]): ChartSeries[] {
 const staticSeries = computed<ChartSeries[]>(() => {
   if (isCircular.value) return [];
   if (!props.staticDataset) return [];
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The prop permits either dataset independently of chart type. This legacy non-circular handoff assumes series without validating or transforming mismatched datasets.
   return localized(props.staticDataset as ChartSeries[]);
 });
 
@@ -138,6 +139,7 @@ const staticDonut = computed<DonutRecord[]>(() => {
   if (!isCircular.value) return [];
   if (!props.staticDataset) return [];
   return localizeDonutRecords(
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- The prop permits either dataset independently of chart type. This legacy circular handoff assumes donut records without validating or transforming mismatched datasets.
     props.staticDataset as DonutRecord[],
     processI18n,
   );
@@ -171,8 +173,6 @@ const finalSeries = computed<ChartSeries[]>(() => {
   return staticSeries.value;
 });
 
-// A donut plots the first series only; a nested one plots its card's, like
-// every other nested chart type.
 const finalDonutData = computed<DonutRecord[]>(() => {
   if (!isCircular.value) return [];
   const source = nestedContext ? nestedContext.cardSeries : fetchSeries.value;
@@ -206,8 +206,9 @@ function buildXyClickPayload(opts: {
   const point = series?.data[dataPointIndex];
   const pointValue = readPointValue(point);
   const label =
+    // oxlint-disable-next-line anti-slop/no-runtime-typeof -- The shared isObject guard widens this owner union's label to unknown; typeof preserves the ChartSeries field without a cast or changed payload validation.
     typeof point === "object" && point !== null && "label" in point
-      ? (point as { label?: string }).label
+      ? point.label
       : undefined;
   return {
     dataPointIndex,
@@ -219,8 +220,8 @@ function buildXyClickPayload(opts: {
 }
 
 function emitDataClick(
-  _e: unknown,
-  _ctx: unknown,
+  _e: Parameters<ApexClickHandler>[0],
+  _ctx: Parameters<ApexClickHandler>[1],
   opts: { dataPointIndex: number; seriesIndex: number },
 ) {
   const isSegment = isSegmentChart(props.type);
@@ -299,8 +300,7 @@ const apex = useApexChart(() => ({
 }));
 
 const heightInPx = computed(() => props.height);
-// Every state (placeholder, drawn chart, empty state) takes the box the drawn
-// chart occupies, so nothing moves when the data or the chart arrives.
+
 const frameHeight = computed(() =>
   chartFrameHeight(props.height, isCircular.value),
 );
@@ -308,16 +308,13 @@ const frameHeight = computed(() =>
 const hasData = computed(
   () => finalSeries.value.length > 0 || finalDonutData.value.length > 0,
 );
-// A nested chart plots its card's data, so it waits on the card's request.
+
 const isAwaitingData = computed(() =>
   nestedContext ? nestedContext.isLoading : isLoading.value,
 );
-// New inputs (a period applied) are on their way: the chart on screen still
-// shows the previous ones, so it dims like the KPI values do.
+
 const isRefreshing = computed(() => hasData.value && isAwaitingData.value);
 
-// The host (a lazy chunk) and Apex (another one) take a moment to draw: the
-// frame keeps the chart's box and its skeleton until the host says it drew.
 const isDrawn = ref(false);
 watch(hasData, (present) => {
   if (!present) isDrawn.value = false;

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

@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { computed, provide, reactive, watchEffect } from "vue";
+import { computed, provide, reactive } from "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 "./internal/TrendBadge.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import {
@@ -45,9 +43,6 @@ interface Props extends DefaultComponentProps {
   comparisonLabel?: string;
 }
 
-// The comparison series takes palette step 2 (v2 violet), re-resolved on
-// theme changes via useThemeRevision so it tracks light/dark mode. Its legend
-// key reads the same token in CSS.
 const COMPARISON_COLOR_TOKEN = "--dms-chart-2";
 const themeRevision = useThemeRevision();
 const comparisonColor = computed(() => {
@@ -84,8 +79,6 @@ const { data, isLoading } = useChartFetch<ChartCardResponse>({
   watchSource: () => watchKey.value,
 });
 
-// With no comparison selected on the scope, whatever comparison the data
-// still carries is not drawn: no change, no "vs" figure, no second series.
 const comparison = usePeriodComparisonDisplay(props.periodScope);
 const value = computed(() => data.value?.value);
 const previousValue = computed(() =>
@@ -95,9 +88,6 @@ const delta = computed(() =>
   comparison.isOff.value ? null : (data.value?.delta ?? null),
 );
 
-// ApexCharts prints names, categories and slice labels verbatim, so a
-// route's `$` keys are resolved here, before the array reaches the nested
-// chart and the default slot.
 function localized(entry: ChartSeries): ChartSeries {
   return localizeSeries(entry, processI18n);
 }
@@ -143,35 +133,24 @@ const previousFormatted = computed(() =>
 
 const hasComparison = computed(() => cardComparisonSeries.value.length > 0);
 
-const nestedContext = reactive<NestedChartContext>({
-  cardSeries: [],
-  cardComparisonSeries: [],
-  isLoading: false,
-  hideLegend: !props.showSeriesLegend,
-  valueFormat: props.valueFormat,
-  currencyCode: props.currencyCode,
-  valuePrecision: props.valuePrecision,
+const nestedContext: NestedChartContext = reactive({
+  cardSeries,
+  cardComparisonSeries,
+  isLoading,
+  hideLegend: computed(() => !props.showSeriesLegend),
+  valueFormat: computed(() => props.valueFormat),
+  currencyCode: computed(() => props.currencyCode),
+  valuePrecision: computed(() => props.valuePrecision),
 });
 
 provide(NESTED_CHART_INJECT_KEY, nestedContext);
 
-watchEffect(() => {
-  nestedContext.cardSeries = cardSeries.value;
-  nestedContext.cardComparisonSeries = cardComparisonSeries.value;
-  nestedContext.isLoading = isLoading.value;
-  nestedContext.hideLegend = !props.showSeriesLegend;
-  nestedContext.valueFormat = props.valueFormat;
-  nestedContext.currencyCode = props.currencyCode;
-  nestedContext.valuePrecision = props.valuePrecision;
-});
-
 const primaryLegendLabel = computed(() =>
   props.primaryLabel
     ? processI18n(props.primaryLabel)
     : t(DEFAULT_PRIMARY_LABEL_KEY, "Period"),
 );
-// The comparison the scope selects names its series ("Previous year"),
-// unless the card names it itself.
+
 const comparisonLegendLabel = computed(() =>
   props.comparisonLabel
     ? processI18n(props.comparisonLabel)
@@ -180,8 +159,7 @@ const comparisonLegendLabel = computed(() =>
 );
 
 const isFirstLoad = computed(() => isLoading.value && data.value === null);
-// New inputs (a period applied) are on their way: the figures on screen still
-// belong to the previous ones, so they dim like the KPI values do.
+
 const isRefreshing = computed(() => isLoading.value && data.value !== null);
 
 const showTrend = computed(() => props.showDelta && delta.value !== null);

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, useId } from "vue";
+import { computed, useId, type SVGAttributes } from "vue";
 import {
   closeSparkArea,
   projectSparkPoints,
@@ -30,9 +30,9 @@ const FLAT_AREA_OPACITY = 0.12;
 const PERCENT = 100;
 const DEFAULT_ARIA_LABEL = "Trend";
 
-// Accents resolve through theme tokens so sparklines follow light/dark mode;
-// primary is the v2 sparkline cyan, deeper than the fill cyan on white.
-const STROKE_BY_ACCENT: Record<string, string> = {
+type AccentStroke = Extract<SVGAttributes["stroke"], string>;
+
+const STROKE_BY_ACCENT: Record<NonNullable<Props["accent"]>, AccentStroke> = {
   primary: "var(--dms-sparkline)",
   secondary: "var(--ui-secondary)",
   success: "var(--ui-success)",
@@ -74,7 +74,6 @@ const areaOpacity = computed(() =>
   props.area === "flat" ? FLAT_AREA_OPACITY : undefined,
 );
 
-// The end dot is HTML over the stretched SVG, so it stays round at any size.
 const dotStyle = computed(() => {
   const last = points.value[points.value.length - 1];
   if (!props.showDot || !last) return null;

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

@@ -62,7 +62,6 @@ function directionOf(delta: number | null | undefined): TrendTone {
   return delta > 0 ? "up" : "down";
 }
 
-// The arrow follows the raw direction; the colour follows the meaning.
 const direction = computed(() => directionOf(props.delta));
 const tone = computed(() =>
   props.invert ? INVERTED_TONE[direction.value] : direction.value,

package/frontend-vue/layers/dms-ui/app/components/check-list/CheckList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import { tv } from "tailwind-variants";
 
 export type CheckListState = "ok" | "warn" | "error" | "pending" | "info";
@@ -43,9 +43,12 @@ interface CheckListProps {
 
 interface CheckListSlots {
   /** Inside the frame, above the list (summary, strength bars…). */
-  header?: () => unknown;
+  header?: () => ReturnType<Slot>;
   /** Custom label content. */
-  label?: (props: { item: CheckListItem; state: CheckListState }) => unknown;
+  label?: (props: {
+    item: CheckListItem;
+    state: CheckListState;
+  }) => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<CheckListProps>(), {

package/frontend-vue/layers/dms-ui/app/components/check-list/PasswordRules.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, toRef } from "vue";
+import { type Slot, computed, toRef } from "vue";
 import DmsCheckList, { type CheckListItem } from "./CheckList.vue";
 
 export type PasswordRulesVariant = "meter" | "summary";
@@ -19,7 +19,7 @@ interface PasswordRulesProps {
 
 interface PasswordRulesSlots {
   /** `summary` head text; defaults to "{met} of {total} met". */
-  head?: (props: { met: number; total: number }) => unknown;
+  head?: (props: { met: number; total: number }) => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<PasswordRulesProps>(), {
@@ -42,13 +42,15 @@ const VERDICT_KEYS = [
   "dms.password_rules.verdict.strong",
 ];
 
-const TONE_TEXT: Record<string, string> = {
+type PasswordColor = ReturnType<typeof usePasswordStrength>["color"]["value"];
+
+const TONE_TEXT: Partial<Record<PasswordColor, string>> = {
   error: "text-error",
   warning: "text-warning",
   success: "text-success",
 };
 
-const TONE_BAR: Record<string, string> = {
+const TONE_BAR: Partial<Record<PasswordColor, string>> = {
   error: "bg-error",
   warning: "bg-warning",
   success: "bg-success",
@@ -64,7 +66,7 @@ const total = computed(() => strength.value.length);
 const items = computed<CheckListItem[]>(() =>
   strength.value.map((rule, index) => ({
     label: rule.text,
-    // The summary lists unmet rules as "not yet", never as failures.
+
     state: rule.met ? "ok" : isSummary.value ? "pending" : "error",
     wide: isSummary.value && index === strength.value.length - 1,
   })),

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

@@ -11,12 +11,6 @@ import type {
   CodeToken,
 } from "../../build/utils/codeHighlight";
 
-// Read-only code in the editor's look: a head with the title, the language
-// and a copy button, then the code highlighted by the editor's languages.
-// Without a title or a language there is no head: the copy button floats in
-// the code's corner. Until its language's grammar loads (and on the server)
-// the code shows as is.
-
 /**
  * How long lines break: `false` scrolls them sideways, `true` wraps them
  * between words, `"anywhere"` also breaks a word too long for the line (a
@@ -57,7 +51,7 @@ const props = withDefaults(defineProps<CodeSnippetProps>(), {
 });
 
 const LINE_HEIGHT_PX = 19;
-// The code's top and bottom padding (`py-2`), around its lines.
+
 const CODE_PADDING_PX = 16;
 
 const WRAP_CLASSES: Record<"false" | "true" | "anywhere", string> = {
@@ -69,8 +63,7 @@ const WRAP_CLASSES: Record<"false" | "true" | "anywhere", string> = {
 const highlight = shallowRef<CodeHighlighter | null>(null);
 
 const language = computed(() => resolveCodeLanguage(props.language));
-// A language given, even `text`, is named in a head; without a title either,
-// a head would only hold the copy button.
+
 const isHeadless = computed(() => !props.title && props.language === undefined);
 const hasHead = computed(
   () =>
@@ -79,6 +72,7 @@ const hasHead = computed(
 );
 const hasFloatingCopy = computed(() => isHeadless.value && props.copy);
 const wrapClass = computed(
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Keep String coercion and direct lookup for malformed wrap props; a checked key guard would change those inputs.
   () => WRAP_CLASSES[String(props.wrap) as keyof typeof WRAP_CLASSES],
 );
 const tokens = computed<CodeToken[]>(() =>
@@ -92,8 +86,6 @@ const sizeStyle = computed(() => {
   return props.maxHeight ? { maxHeight: props.maxHeight } : undefined;
 });
 
-// Only the grammar of the language shown loads. A language changed while
-// one loads drops it: the code stays plain until its own grammar is in.
 async function loadHighlighter(): Promise<void> {
   const requested = language.value;
   highlight.value = null;