@antelopejs/dms 0.11.0 → 0.12.0

package/frontend-vue/layers/dms-ui/app/build/utils/urlVariables.ts

@@ -1,16 +1,11 @@
+import { isString, isNumber } from "../../../../dms-core/app/utils/type-check";
 import { get } from "@nuxt/ui/runtime/utils/index.js";
+import type { MenuRouteState } from "#dms-core/app/types/menu";
 
-// Every token is `{{<scope>.<key>}}`, spaces inside the braces allowed, as the
-// server's filter tokens (`{{ user.id }}`) are.
-//
-// `{{params.id}}` takes the bare name, which on a route repeating a placeholder
-// is its last occurrence — the row id of a form page. The `:<n>` suffix reaches
-// a specific occurrence, `{{params.id:1}}` being the id of the page carrying the
-// table view (see extractRouteParams).
 const PARAM_KEY = String.raw`params\.(\w+(?::\d+)?)`;
-// A query key may carry dots and dashes: a period selector writes `<id>.period`.
+
 const QUERY_KEY = String.raw`query\.([\w.-]+)`;
-// A response key is a path into the answered body: `{{response.data.id}}`.
+
 const RESPONSE_KEY = String.raw`response\.([\w.-]+)`;
 
 const tokenPattern = (key: string, flags = "g"): RegExp =>
@@ -23,7 +18,8 @@ const TOKEN_OPENING = "{{";
 
 export interface ReplaceUrlVariablesContext {
   routeParams?: Record<string, string>;
-  routeQuery: Record<string, unknown>;
+  routeQuery: MenuRouteState["query"];
+  // oxlint-disable-next-line anti-slop/no-unsafe-dictionary-type -- Response bodies retain arbitrary nested values for path lookup; the core JSON contract would exclude existing non-JSON inputs.
   response?: Record<string, unknown>;
 }
 
@@ -37,8 +33,6 @@ interface TokenEncoding {
 
 const keepValue: EncodeValue = (value) => value;
 
-// A route parameter is a segment of the page path, which the router keeps
-// percent-encoded: it is decoded first so that it is not encoded twice.
 const encodeParam: EncodeValue = (value) => {
   try {
     return encodeURIComponent(decodeURIComponent(value));
@@ -65,22 +59,18 @@ function fillRouteTokens(
     })
     .replace(QUERY_TOKEN, (match, key) => {
       const value = context.routeQuery[key];
-      return typeof value === "string" ? encoding.query(value) : match;
+      return isString(value) ? encoding.query(value) : match;
     });
 }
 
-// Written as answered: a response may hand back a whole path to open next
-// (`redirectOnSuccess: "{{response.redirectPath}}"`), which encoding would break.
 function fillResponseTokens(
   text: string,
-  response: Record<string, unknown> | undefined,
+  response: ReplaceUrlVariablesContext["response"],
 ): string {
   if (!response) return text;
   return text.replace(RESPONSE_TOKEN, (match, key: string) => {
     const value: unknown = get(response, key);
-    return typeof value === "string" || typeof value === "number"
-      ? String(value)
-      : match;
+    return isString(value) || isNumber(value) ? String(value) : match;
   });
 }
 
@@ -133,8 +123,6 @@ export function resolveTextVariables(
   return hasUrlVariables(resolved) ? undefined : resolved;
 }
 
-// A route token left without a value: `{{params.id}}`, `{{query.workspace}}`,
-// `{{query.sales.period}}` (a query key may carry dots and dashes, as above).
 const ROUTE_KEY = `(?:${PARAM_KEY}|${QUERY_KEY})`;
 const UNRESOLVED_ROUTE_TOKEN = tokenPattern(ROUTE_KEY);
 const UNRESOLVED_ROUTE_VALUE = new RegExp(
@@ -196,7 +184,6 @@ export function resolveLinkVariables(
   return stripTokens(filled, UNRESOLVED_ROUTE_TOKEN, UNRESOLVED_ROUTE_VALUE);
 }
 
-// A row field, `{{row.<path>}}`, as `interpolateUrl` fills it.
 const ROW_KEY = String.raw`row\.[^{}\s]+`;
 const ROW_TOKEN = tokenPattern(ROW_KEY);
 const ROW_VALUE = new RegExp(`^${tokenPattern(ROW_KEY, "").source}$`);

package/frontend-vue/layers/dms-ui/app/components/PasswordStrength.vue

@@ -42,6 +42,7 @@
 <script setup lang="ts">
 const props = defineProps({
   color: {
+    // SAFETY: PropType only supplies Vue's static color union; the runtime constructor remains String.
     type: String as PropType<
       | "error"
       | "primary"
@@ -55,6 +56,7 @@ const props = defineProps({
   },
   score: Number,
   strength: {
+    // SAFETY: PropType only supplies Vue's static requirement shape; the runtime constructor remains Array.
     type: Array as PropType<{ met: boolean; text: string }[]>,
     required: true,
   },

package/frontend-vue/layers/dms-ui/app/components/RecursiveComponent.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import type { ComponentPublicInstance } from "vue";
-import { usePermissionPreview } from "#dms-core/app/build/composables/auth/usePermissionPreview";
-import { childLayoutPath } from "#dms-core/app/build/utils/permission-preview";
+import type { ComponentPublicInstance, useAttrs } from "vue";
+import { usePermissionPreview } from "#dms-core/app/entries/composables/auth/usePermissionPreview";
+import { childLayoutPath } from "#dms-core/app/entries/utils/permission-preview";
 import { childComponentId } from "../utils/componentId";
 import {
   GRID_DECLARED_COLUMNS,
@@ -24,14 +24,17 @@ interface Props {
    * Props handed to this block only, as they are (functions included), over
    * its options: what an action target's container gives its block.
    */
-  rootProps?: Record<string, unknown>;
+  rootProps?: Record<
+    keyof ReturnType<typeof useAttrs>,
+    ReturnType<typeof useAttrs>[string]
+  >;
 }
 
 const props = defineProps<Props>();
 
-// The block's anchor is its layout path: `scrollToBlock(key)` finds it there.
 let anchored: ComponentPublicInstance | null = null;
-function anchorBlock(instance: unknown): void {
+function anchorBlock(instance: Element | ComponentPublicInstance | null): void {
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Dynamic components can resolve to native elements; preserve the existing unchecked anchor forwarding.
   const block = (instance as ComponentPublicInstance | null) ?? null;
   registerBlockAnchor(props.layoutPath, block, anchored);
   anchored = block;
@@ -64,6 +67,7 @@ function calculateColumnCount(
 ): number {
   if (!children) return 0;
   return children.reduce(
+    // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Keep the existing addition behavior even when an unvalidated colSpan is not numeric.
     (sum, child) => sum + ((child.colSpan as number) || 1),
     0,
   );
@@ -74,9 +78,7 @@ function getColSpanStyle(
 ): Record<string, string> | undefined {
   const colSpan = Number(child.colSpan);
   if (!colSpan || colSpan <= 1) return undefined;
-  // Never more tracks than the grid has left at its current width (a phone
-  // keeps one): a wider span would add implicit columns past the screen.
-  // `--dms-grid-tracks` comes from the enclosing Grid / GridRow.
+
   return {
     gridColumn: `span min(${colSpan}, var(--dms-grid-tracks, ${colSpan}))`,
   };
@@ -86,8 +88,6 @@ const columnCount = computed(() =>
   calculateColumnCount(props.component.children),
 );
 
-// A Grid drawn here lines its rows up on the widest of them: declared from
-// the layout, so it is known before any row sets up (see GridDeclaredColumns).
 provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
   componentId: props.componentId,
   columns: computed(() =>

package/frontend-vue/layers/dms-ui/app/components/activity/ActivityItem.vue

@@ -1,13 +1,8 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import DmsListRow from "../list-row/ListRow.vue";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 
-// DMS activity / feed / history row (v2 .activity): the feed preset of
-// DmsListRow — a 30px tinted well, a one-line title, a dimmed subtitle and a
-// mono trailing time. Stack these in DmsActivityFeed or a card for activity
-// feeds, "Recent requests", history panels… The title, subtitle and trailing
-// accept slots so callers can inline badges or rich markup.
 interface Props {
   icon?: string;
   /** Well tone (v2 .activity.is-*). */
@@ -35,9 +30,9 @@ interface Props {
 }
 
 interface Slots {
-  default?: () => unknown;
-  subtitle?: () => unknown;
-  trailing?: () => unknown;
+  default?: () => ReturnType<Slot>;
+  subtitle?: () => ReturnType<Slot>;
+  trailing?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<Props>(), {

package/frontend-vue/layers/dms-ui/app/components/activity-feed/ActivityFeed.vue

@@ -24,8 +24,6 @@ import DmsBlockStatus, {
   type BlockEmptyText,
 } from "../../build/components/blocks/BlockStatus.vue";
 
-// The renderer's props are optional: DmsActivityFeed is both the backend
-// `ActivityFeed` block (`dms-activity-feed-block`) and a template component.
 interface ActivityFeedProps extends Partial<DefaultComponentProps> {
   /** Eyebrow title of the card head ("Activity"). */
   title?: string;
@@ -102,7 +100,7 @@ const props = withDefaults(defineProps<ActivityFeedProps>(), {
 });
 
 const SKELETON_ROWS = 3;
-// A day separator every few placeholder rows, the rhythm of a recent feed.
+
 const SKELETON_ROWS_PER_DAY = 3;
 const SKELETON_TITLE_WIDTHS = ["w-3/5", "w-1/2", "w-2/5"];
 
@@ -132,8 +130,6 @@ const entries = computed<ActivityFeedItem[]>(() =>
   props.maxItems ? list.value.slice(0, props.maxItems) : list.value,
 );
 
-// Folded, the feed shows its first `visibleItems` entries; the button under
-// them unfolds the rest and folds them back.
 const isUnfolded = ref(false);
 const foldedCount = computed(() =>
   props.visibleItems
@@ -193,9 +189,6 @@ const metaOf = (item: ActivityFeedItem): string | undefined =>
 
 const isFirstLoad = isPending;
 
-// The placeholder takes the feed's loaded shape: as many rows as it will show
-// (`skeletonCount`, else `visibleItems` or `maxItems`; never more than
-// those), under day separators when the entries are grouped by day.
 const skeletonDays = computed<number[][]>(() => {
   const shown = props.visibleItems ?? props.maxItems;
   const wanted = props.skeletonCount ?? shown ?? SKELETON_ROWS;
@@ -213,13 +206,6 @@ const skeletonDays = computed<number[][]>(() => {
   return days;
 });
 
-// Filling its cell, the body is the scroll area: sized to nothing
-// (`contain: size`), it leaves the row's height to the cards beside it and
-// stretches to it. Once the grid stacks its cells (`--dms-grid-tracks: 1`,
-// see grid/columns.ts) no neighbour sets that height: the list takes its own,
-// capped like a top-list card's (24rem, about six entries under their day
-// separators). Focusable, so the keyboard scrolls it too; its ring is drawn
-// inside, where the card's clipped edge cannot hide it.
 const scrollArea = computed(() =>
   props.fillHeight
     ? {
@@ -233,12 +219,11 @@ const scrollArea = computed(() =>
       }
     : {},
 );
-// Inside the scroll area, a day's separator stays on top of its entries.
+
 const dayHeadClass = computed(
   () => props.fillHeight && "sticky top-0 z-[1] bg-(--dms-surface-card)",
 );
-// …and the "Show N more" button at its foot, where entries taller than the
-// row would otherwise push it out of sight.
+
 const foldClass = computed(
   () => props.fillHeight && "sticky bottom-0 z-[1] bg-(--dms-surface-card)",
 );

package/frontend-vue/layers/dms-ui/app/components/banner/Banner.vue

@@ -1,16 +1,11 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import DmsIconWell, { type IconWellSize } from "../icon-well/IconWell.vue";
 import {
   BANNER_TONE_ICONS,
   type BannerTone,
 } from "../../utils/bannerToneIcons";
 
-// DMS-styled notice banner (design .banner): a left-to-right tinted wash over
-// the card surface with a boxed leading icon, used for module beta / info
-// notices. Wraps UAlert so we keep its a11y + slots while pinning the exact
-// reference look. The `cli` slot hosts the optional inset command box
-// (compose with DmsCopyButton), `actions` the right-aligned buttons.
 type BannerSize = "sm" | "md";
 
 interface BannerProps {
@@ -32,11 +27,11 @@ interface BannerEmits {
 
 interface BannerSlots {
   /** Rich description body (overrides the `description` prop). */
-  description?: () => unknown;
+  description?: () => ReturnType<Slot>;
   /** Optional inset command/CLI box rendered under the description. */
-  cli?: () => unknown;
+  cli?: () => ReturnType<Slot>;
   /** Right-aligned actions, vertically centred. */
-  actions?: () => unknown;
+  actions?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<BannerProps>(), {
@@ -51,8 +46,6 @@ const props = withDefaults(defineProps<BannerProps>(), {
 const emit = defineEmits<BannerEmits>();
 const slots = defineSlots<BannerSlots>();
 
-// Literal class maps (Tailwind needs the full class string to extract them —
-// no dynamic `bg-${color}` interpolation).
 const SURFACE: Record<BannerTone, string> = {
   warning: "border-warning/40 from-warning/10",
   info: "border-info/40 from-info/10",
@@ -71,7 +64,6 @@ const SIZE_WELL: Record<BannerSize, IconWellSize> = {
   sm: "2xs",
 };
 
-// Compact banners run the description on the title line.
 const SIZE_WRAPPER: Record<BannerSize, string> = {
   md: "min-w-0",
   sm: "min-w-0 flex-row flex-wrap items-baseline gap-x-2",
@@ -88,13 +80,7 @@ const DISMISS_BUTTON = {
   variant: "ghost",
 } as const;
 
-// color="neutral" on UAlert below → no semantic bg/text injected; we own the
-// whole surface here: the card background under a 100deg tint that fades out
-// at 70%, like the reference.
 const alertUi = computed(() => ({
-  // On a phone the actions wrap under the text instead of squeezing it. Nuxt
-  // UI renders the dismiss button inside the actions box: a banner with no
-  // actions keeps that box (the lone dismiss) on the text line.
   root: `items-center border ring-0 bg-default bg-linear-100 to-transparent to-70% max-sm:flex-wrap ${SIZE_ROOT[props.size]} ${SURFACE[props.tone]}`,
   wrapper: SIZE_WRAPPER[props.size],
   title: "text-highlighted text-sm font-[650]",

package/frontend-vue/layers/dms-ui/app/components/block-preview/BlockPreview.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isString } from "../../../../dms-core/app/utils/type-check";
 import { markRaw, type Component } from "vue";
 import BlockPreviewIssue from "../../build/components/block-preview/BlockPreviewIssue.vue";
 import { useBlockPreviewEmbed } from "../../build/composables/block-preview/useBlockPreviewEmbed";
@@ -56,15 +57,14 @@ const root = useTemplateRef<HTMLElement>("root");
 
 const stateParam = route.query[STATE_QUERY];
 const initialState =
-  props.embed && typeof stateParam === "string"
+  props.embed && isString(stateParam)
     ? decodePreviewState(stateParam)
     : undefined;
 const isStateInvalid = props.embed && !!stateParam && !initialState;
 
 function switchLocale(code: string): void {
   const known = locales.value.some((entry) => entry.code === code);
-  if (known && code !== locale.value)
-    void setLocale(code as typeof locale.value);
+  if (known && code !== locale.value) void setLocale(code);
 }
 
 const embed = props.embed
@@ -96,7 +96,9 @@ function toPageComponent(node: PreviewResolvedNode): ResolvedComponentInfo {
     componentName: node.componentName,
     options: node.issue ? { issue: node.issue } : node.options,
     children: node.children.map(toPageComponent),
+    // oxlint-disable-next-line anti-slop/no-conditional-empty-object-spread -- Omit absent keys without replacing spread's own-property definition semantics with assignment.
     ...(node.slot ? { slot: node.slot } : {}),
+    // oxlint-disable-next-line anti-slop/no-conditional-empty-object-spread -- Preserve omission, property order, and getter evaluation for unvalidated preview nodes.
     ...(node.colSpan === undefined ? {} : { colSpan: node.colSpan }),
   };
 }
@@ -120,8 +122,7 @@ watch(resolved, reportIssues);
 onMounted(async () => {
   if (isStateInvalid) embed?.reportError(t("dms.block_preview.invalid_state"));
   reportIssues(resolved.value);
-  // The page always hands the allowlist; fetching it is for a signed-in
-  // dashboard, and a public visitor would only be sent to the login page.
+
   if (props.blockTypes || props.embed) return;
   const { $authFetch } = useAuthFetch();
   try {

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

@@ -45,11 +45,6 @@ interface ResolvedBanner extends BannerContent {
   actions: BlockActionItem[];
 }
 
-// `Banner` block (interface-dms `base/banner`): the v2 notice banner placed
-// on a page, with actions and an optional dismiss that is remembered.
-// Dismissals live in a cookie (like the dashboard banners) so the server
-// render already leaves a dismissed banner out instead of flashing it. With a
-// `fetchUrl` the route answers the content, or nothing for no banner.
 interface BannerBlockProps
   extends Partial<DefaultComponentProps>,
     BannerContent {
@@ -77,11 +72,9 @@ const props = withDefaults(defineProps<BannerBlockProps>(), {
 
 const DISMISSED_COOKIE = "dms-dismissed-blocks";
 const DISMISSED_MAX_AGE_S = 60 * 60 * 24 * 365;
-// Keeps the cookie well under the 4 KB limit; the oldest dismissals go first.
+
 const DISMISSED_MAX_KEYS = 40;
 
-// Keys the actions' drawers and modals are opened under, for a banner placed
-// outside a page (a preview).
 const FALLBACK_COMPONENT_ID = "banner";
 const FALLBACK_PAGE_ID = "page";
 
@@ -99,8 +92,6 @@ const { data } = useChartFetch<BannerContent | null>({
   watchSource: () => JSON.stringify(watchState.value),
 });
 
-// A button that changed something changes what the page shows: its blocks,
-// this banner included, read their data again.
 const { handleCustomButton } = useActionTargets({
   api: useAuthFetch().$authFetch,
   componentId: props.componentId ?? FALLBACK_COMPONENT_ID,
@@ -109,14 +100,10 @@ const { handleCustomButton } = useActionTargets({
   handleApiError: (error, title) => useApiError(error, { title }),
 });
 
-// A fetched banner is an alert: it draws nothing until its route answered
-// something (a skeleton would flash a banner that may not exist), and nothing
-// when the answer is empty.
 const hasFetchedContent = computed(
-  () => Boolean(data.value) && Object.keys(data.value as object).length > 0,
+  () => !!data.value && Object.keys(data.value).length > 0,
 );
 
-// Field by field, the route's answer over the options.
 const banner = computed<ResolvedBanner>(() => {
   const fetched: BannerContent = data.value ?? {};
   return {
@@ -166,6 +153,7 @@ function dismiss(): void {
 }
 
 function press(action: BlockButtonAction): void {
+  // oxlint-disable-next-line anti-slop/require-safety-comment-for-type-assertion -- Block buttons permit Nuxt UI variants wider than CustomButtonVariant; deriving either owner cannot prove the narrower variant, and this dispatcher forwards the original object unchanged.
   handleCustomButton(action as CustomButton);
 }
 </script>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed } from "vue";
+import { type Slot, computed } from "vue";
 import DmsCard from "../card/Card.vue";
 import DmsSectionHeader from "../section-header/SectionHeader.vue";
 import DmsBlockActions, {
@@ -8,10 +8,6 @@ import DmsBlockActions, {
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 
-// `Card` block (interface-dms `base/card`): a titled v2 card holding other
-// blocks. Children without a slot stack in the body; a child in the
-// `actions` slot joins the head's link actions, one in the `footer` slot
-// fills the muted foot band. Texts follow the `$` i18n-key convention.
 interface CardBlockProps extends Partial<DefaultComponentProps> {
   /** Eyebrow title of the card head. */
   title?: string;
@@ -30,9 +26,9 @@ interface CardBlockProps extends Partial<DefaultComponentProps> {
 }
 
 interface CardBlockSlots {
-  default?: () => unknown;
-  actions?: () => unknown;
-  footer?: () => unknown;
+  default?: () => ReturnType<Slot>;
+  actions?: () => ReturnType<Slot>;
+  footer?: () => ReturnType<Slot>;
 }
 
 const props = withDefaults(defineProps<CardBlockProps>(), {

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

@@ -16,9 +16,6 @@ interface CodeBlockResponse {
   language?: string;
 }
 
-// `CodeBlock` block (interface-dms `base/code-block`): read-only code with
-// highlighting and a copy button, written in the options or read from a
-// route answering `{ code, language? }`. DmsCodeSnippet draws it.
 interface CodeBlockProps extends DefaultComponentProps {
   code?: string;
   language?: string;
@@ -42,7 +39,6 @@ const props = withDefaults(defineProps<CodeBlockProps>(), {
   fetchUrlMethod: undefined,
 });
 
-// The placeholder lines while the route answers, at the code's line height.
 const SKELETON_LINE_WIDTHS = ["w-2/3", "w-1/2", "w-3/4"];
 
 const { processText } = useComposedText();
@@ -59,7 +55,7 @@ const { data, isLoading, error, refresh } = useChartFetch<CodeBlockResponse>({
 });
 
 const code = computed(() => data.value?.code ?? props.code);
-// The block always heads its code with its language, plain text included.
+
 const language = computed(
   () => data.value?.language ?? props.language ?? PLAIN_CODE_LANGUAGE,
 );
@@ -70,8 +66,7 @@ const showSkeleton = computed(() => isLoading.value && !data.value);
 const notFound = computed(() =>
   isLoading.value ? null : readFetchNotFound(error.value),
 );
-// A failed first load shows a retry in place of the code; a failed refetch
-// keeps the code on screen.
+
 const hasError = computed(
   () =>
     !isLoading.value && !data.value && Boolean(error.value) && !notFound.value,

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

@@ -9,14 +9,10 @@ import { PLAIN_CODE_LANGUAGE } from "../../build/utils/codeLanguages";
 import DmsBlockActions, {
   type BlockAction,
 } from "../../build/components/blocks/BlockActions.vue";
-import type { Tone } from "../../types/tone";
+import type { Tone } from "#dms-core/app/types/tone";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 
-// `EmptyState` block (interface-dms `base/empty-state`): the generic v2
-// .c-empty placed on a page — a first-run screen, a "nothing here yet" panel
-// — with link actions. In a card by default. Texts follow the `$` i18n-key
-// convention.
 /** A snippet under the text (interface-dms `EmptyStateCode`). */
 interface EmptyStateCode {
   content: string;

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { isString } from "../../../../dms-core/app/utils/type-check";
 import { computed } from "vue";
 import DmsCard from "../card/Card.vue";
 import DmsKeyValueList, {
@@ -13,10 +14,6 @@ import type { DefaultComponentProps } from "../../../../dms-core/app/types/compo
 import type { BlockText } from "../../../../dms-core/app/types/composed-text";
 import { isComposedText } from "../../../../dms-core/app/utils/composedText";
 
-// `KeyValueList` block (interface-dms `base/key-value-list`): label / value
-// rows (v2 .c-dl), static or from `fetchUrl` (`{ items }`), in a card by
-// default. Labels, details and text values follow the `$` i18n convention or
-// are composed texts.
 interface KeyValueListBlockItem
   extends Omit<KeyValueItem, "label" | "value" | "detail"> {
   label: BlockText;
@@ -60,8 +57,7 @@ const props = withDefaults(defineProps<KeyValueListBlockProps>(), {
   periodScope: undefined,
   realtimeTopic: undefined,
   empty: undefined,
-  // A fetched list's length is unknown until it lands: draw the rows a record
-  // card usually lists (customer, ids, status, amounts, dates), not a stub.
+
   skeletonCount: 5,
 });
 
@@ -81,15 +77,12 @@ const { items, isPending, hasError, notFound, refresh } =
     componentId: props.componentId,
   });
 
-// A composed value already says how each of its parameters is written, so it
-// is composed whatever the row's type; a plain one is translated only where
-// the type draws text.
 function resolveValue(item: KeyValueListBlockItem): KeyValueItem["value"] {
   if (isComposedText(item.value)) return processText(item.value);
-  if (typeof item.value === "string" && TRANSLATED_TYPES.has(item.type)) {
+  if (isString(item.value) && TRANSLATED_TYPES.has(item.type)) {
     return processText(item.value);
   }
-  return item.value as KeyValueItem["value"];
+  return item.value;
 }
 
 const resolvedItems = computed<KeyValueItem[]>(() =>
@@ -110,8 +103,7 @@ const isEmpty = computed(
     !notFound.value &&
     resolvedItems.value.length === 0,
 );
-// A card with a head gets its body padding from the list itself, so the rows'
-// hairlines run to the same inset as the head's.
+
 const listClass = computed(() => (props.card ? "px-[18px] py-2" : undefined));
 </script>
 

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

@@ -18,8 +18,6 @@ import {
 import { PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES } from "../../build/composables/page-toolbar/toolbarControlHeight";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 
-// Its ids are optional: it reads the page's live state, not its own, and a
-// component may draw it by hand inside its own `PageToolbar`.
 interface LiveToggleBlockProps extends Partial<DefaultComponentProps> {
   align?: "left" | "center" | "right";
   /** Shows "updated N s ago". */
@@ -61,8 +59,6 @@ interface LiveToggleSizeClasses {
   pillButton: string;
 }
 
-// The pill takes the toolbar's one height (its buttons fill it), as the
-// period selector's segments beside it and the Resume button do.
 const SIZE_CLASSES: Record<PageToolbarSize, LiveToggleSizeClasses> = {
   xs: {
     text: "text-[11.5px]",
@@ -79,7 +75,7 @@ const SIZE_CLASSES: Record<PageToolbarSize, LiveToggleSizeClasses> = {
 };
 
 const { t } = useI18n();
-const translate = t as ConfirmTranslate;
+const translate: ConfirmTranslate = t;
 const live = usePageLive();
 const toolbar = usePageToolbar();
 useToolbarLiveToggle(toolbar);
@@ -89,10 +85,6 @@ const heightClass = computed(
   () => PAGE_TOOLBAR_CONTROL_HEIGHT_CLASSES[size.value],
 );
 
-// The toggle is drawn from the server on, live (the remembered pause applies
-// once mounted), so it takes its place before the page paints. Only the
-// "updated N s ago" text waits for the browser's clock: the server's would
-// not match the hydrating render's.
 const isMounted = ref(false);
 onMounted(() => (isMounted.value = true));
 const updatedText = useUpdatedLabel(
@@ -113,8 +105,6 @@ const items = computed(() => [
   { value: PAUSE, label: t("dms.live.pause"), icon: "i-ph-pause" },
 ]);
 
-// The browser's clock only: the server's text would not match the hydrating
-// render's.
 const updatedLabel = computed(() => (isMounted.value ? updatedText.value : ""));
 
 const missedText = computed(() => {
@@ -123,8 +113,6 @@ const missedText = computed(() => {
   return missedRowsText(count, props.missedLabel, translate);
 });
 
-// "Paused · typing in the Tester · 40 new requests", the detail apart: it
-// takes its own tone.
 const pausedText = computed(() => {
   const reason = live.pauseReason.value;
   return [
@@ -142,7 +130,6 @@ const detail = computed(() => {
   return showLiveNote(note, translate);
 });
 
-// A hidden tab resumes by itself when it shows again: no button for it.
 const canResume = computed(
   () =>
     live.isPaused.value &&