@antelopejs/dms 0.7.10 → 0.7.12

package/frontend-vue/layers/dms-ui/app/build/composables/form/enclosingForm.ts

@@ -0,0 +1,38 @@
+import type { InjectionKey } from "vue";
+import type { RegisterValidator } from "../../../composables/form/types/validation";
+
+/**
+ * What a `Form` offers the fields it draws (see `useEnclosingForm`).
+ *
+ * @internal
+ */
+export interface FormHandle {
+  /** Submits as the save button does: validation, validators, then the request. */
+  submit: () => Promise<void>;
+  registerValidator: RegisterValidator;
+  /** Brings a field of the form into view and focuses its control. */
+  revealField: (fieldId: string) => Promise<void>;
+}
+
+/** @internal */
+export const FORM_HANDLE_KEY: InjectionKey<FormHandle> = Symbol("form-handle");
+
+/**
+ * The field of `fieldIds` a URL fragment names (`#requestLogMaxBodyKb`, the
+ * id its control carries), `undefined` when it names none.
+ *
+ * @internal
+ */
+export function linkedFieldId(
+  hash: string,
+  fieldIds: readonly string[],
+): string | undefined {
+  if (!hash.startsWith("#")) return undefined;
+  let id: string;
+  try {
+    id = decodeURIComponent(hash.slice(1));
+  } catch {
+    return undefined;
+  }
+  return fieldIds.includes(id) ? id : undefined;
+}

package/frontend-vue/layers/dms-ui/app/build/composables/global/searchShortcuts.ts

@@ -1,3 +1,10 @@
+// The page search keys are public (`composables/global/searchShortcuts`):
+// re-exported for the layer's own callers.
+export {
+  buildPageSearchShortcuts,
+  PAGE_SEARCH_SHORTCUTS,
+} from "../../../composables/global/searchShortcuts";
+
 const GLOBAL_COMPONENT = "$dms.components.global";
 
 /**
@@ -6,15 +13,6 @@ const GLOBAL_COMPONENT = "$dms.components.global";
  */
 export const NAV_SEARCH_SHORTCUT = "/";
 
-/**
- * Focuses a page's own search (⌘ / on macOS, Ctrl / elsewhere), so it never
- * competes with "/" for the navigation search. `meta` is read as Ctrl off
- * macOS by `defineShortcuts`. The shifted variant is the same physical keys
- * on layouts where "/" needs Shift (AZERTY: Shift + :), which
- * `defineShortcuts` would otherwise reject as an extra modifier.
- */
-export const PAGE_SEARCH_SHORTCUTS = ["meta_/", "meta_shift_/"] as const;
-
 /**
  * The page search keys as hint chips, by `defineShortcuts` key name: print
  * them with `keyboardKeyLabel` ("⌘" "/" on macOS, "Ctrl" "/" elsewhere).
@@ -33,13 +31,6 @@ export function buildNavSearchShortcuts(
   return { [NAV_SEARCH_SHORTCUT]: focus };
 }
 
-/** `defineShortcuts` map focusing a page's own search on ⌘ / or Ctrl /. */
-export function buildPageSearchShortcuts(
-  focus: () => void,
-): Record<string, () => void> {
-  return Object.fromEntries(PAGE_SEARCH_SHORTCUTS.map((key) => [key, focus]));
-}
-
 /** "/" focuses the navigation search (listed on the shortcuts page). */
 export const GLOBAL_SLASH_METADATA: ShortcutMetadata = {
   key: [NAV_SEARCH_SHORTCUT],

package/frontend-vue/layers/dms-ui/app/build/composables/live/liveNotes.ts

@@ -0,0 +1,54 @@
+import type { PageLiveNote, PageLiveNoteTone } from "../../../types/live";
+import {
+  resolveConfirmText,
+  type ConfirmTranslate,
+} from "../confirm/confirmDialogTexts";
+
+/**
+ * How a live note is coloured: a breakdown in 5xx reads as an error.
+ *
+ * @internal
+ */
+export const LIVE_NOTE_TONE_CLASSES: Record<PageLiveNoteTone, string> = {
+  neutral: "",
+  warning: "text-warning",
+  error: "text-error",
+};
+
+/** A live note as shown, and its colour. @internal */
+export interface ShownLiveNote {
+  text: string;
+  toneClass: string;
+}
+
+/**
+ * A live note as the toggle and a held table's strip show it: its `$` key
+ * translated with its params, or its text.
+ *
+ * @internal
+ */
+export function showLiveNote(
+  note: PageLiveNote,
+  t: ConfirmTranslate,
+): ShownLiveNote {
+  return {
+    text: resolveConfirmText(note.text, note.params ?? {}, t),
+    toneClass: LIVE_NOTE_TONE_CLASSES[note.tone ?? "neutral"],
+  };
+}
+
+/**
+ * How many new rows came in: a module's own wording given `{count}`
+ * (`missedLabel`), or "N new".
+ *
+ * @internal
+ */
+export function missedRowsText(
+  count: number,
+  missedLabel: string | undefined,
+  t: ConfirmTranslate,
+): string {
+  return missedLabel
+    ? resolveConfirmText(missedLabel, { count }, t)
+    : t("dms.live.new_rows", { count }, count);
+}

package/frontend-vue/layers/dms-ui/app/build/composables/page/blockAnchors.ts

@@ -0,0 +1,50 @@
+import type { ComponentPublicInstance, VNode } from "vue";
+
+// The blocks a page draws, by their anchor: the key path `RecursiveComponent`
+// renders them under (`summary`, `tabs.statistics`). Registered from a
+// template ref, which only runs in the browser, so a server render never
+// fills it.
+const blocks = new Map<string, ComponentPublicInstance>();
+
+/**
+ * Records the block drawn under `anchor`, or forgets it once unmounted
+ * (`instance` is `null`). A block drawn again under the same anchor (a
+ * drawer showing the same page) takes it over until it unmounts.
+ *
+ * @internal
+ */
+export function registerBlockAnchor(
+  anchor: string | undefined,
+  instance: ComponentPublicInstance | null,
+  previous?: ComponentPublicInstance | null,
+): void {
+  if (!anchor) return;
+  if (instance) {
+    blocks.set(anchor, instance);
+    return;
+  }
+  if (!previous || blocks.get(anchor) === previous) blocks.delete(anchor);
+}
+
+function firstElementOf(vnode: VNode | null | undefined): Element | null {
+  if (!vnode) return null;
+  if (vnode.el instanceof Element) return vnode.el;
+  if (vnode.component) return firstElementOf(vnode.component.subTree);
+  if (!Array.isArray(vnode.children)) return null;
+  for (const child of vnode.children) {
+    const element = firstElementOf(child as VNode);
+    if (element) return element;
+  }
+  return null;
+}
+
+/**
+ * The first element the block drawn under `anchor` renders, `null` when no
+ * such block is on screen (an unknown key, a closed tab, a hidden block).
+ *
+ * @internal
+ */
+export function blockAnchorElement(anchor: string): Element | null {
+  const instance = blocks.get(anchor);
+  return instance ? firstElementOf(instance.$.subTree) : null;
+}

package/frontend-vue/layers/dms-ui/app/build/composables/table-view/useTableLiveHold.ts

@@ -1,6 +1,9 @@
 import { computed, ref, watch, type ComputedRef } from "vue";
 import { usePageLive } from "../../../composables/live/usePageLive";
-import type { TableViewLiveHoldOptions } from "../../../types/live";
+import type {
+  PageLiveNote,
+  TableViewLiveHoldOptions,
+} from "../../../types/live";
 import type { LiveGate } from "../live/currentPageLive";
 import { useScrolledPastTop } from "./useScrolledPastTop";
 import { LIVE_HELD_AT_QUERY_KEY } from "./useTableRows";
@@ -11,10 +14,21 @@ type Query = Record<string, unknown>;
 export interface TableLiveHoldSignals {
   /** One of its rows is open in the side panel. */
   isRowOpen?: () => boolean;
+  /** The user's search narrows the rows. */
+  isSearching?: () => boolean;
+  /** The rows are sorted otherwise than by the table's default. */
+  isSorted?: () => boolean;
   /** The table's element, whose first row `whileScrolled` follows. */
   tableElement?: () => unknown;
 }
 
+/** Why a table holds its rows by itself, its page staying live. */
+export type TableLiveHoldReason =
+  | "rowOpen"
+  | "searching"
+  | "sorted"
+  | "scrolled";
+
 export interface TableLiveHoldOptions {
   /** The table's `liveHold`: `true` or an object enables it. */
   liveHold: boolean | TableViewLiveHoldOptions | undefined;
@@ -33,6 +47,18 @@ export interface TableLiveHold {
   isHolding: ComputedRef<boolean>;
   /** Events the table received since its rows were held or last shown. */
   newCount: ComputedRef<number>;
+  /**
+   * Why the table holds by itself while its page is live, `null` otherwise:
+   * a paused page says why on its toggle.
+   */
+  reason: ComputedRef<TableLiveHoldReason | null>;
+  /** What the new rows are called, given `{count}` (`liveHold.missedLabel`). */
+  missedLabel: string | undefined;
+  /**
+   * The breakdown of what the paused page missed (`setMissedDetail`), `null`
+   * while the page is live or nothing came in.
+   */
+  missedDetail: ComputedRef<PageLiveNote | null>;
   /** Reads the rows once, staying held, and holds them from now. */
   showNew: () => void;
   /** The bound a source route receives with each request while held. */
@@ -51,54 +77,53 @@ function holdOptionsOf(
 }
 
 // The table alone holds while the page is live: the user reads a row in the
-// side panel, or reads further down than the rows that would move.
+// side panel, narrows or reorders the rows, or reads further down than the
+// rows that would move. The first reason in this order is the one shown.
 function useLocalHold(
   holdOptions: TableViewLiveHoldOptions | null,
   signals: TableLiveHoldSignals,
-): ComputedRef<boolean> {
-  const isRowOpen = signals.isRowOpen ?? NEVER;
+): ComputedRef<TableLiveHoldReason | null> {
   const tableElement = signals.tableElement ?? NO_ELEMENT;
   const isScrolled = useScrolledPastTop(() => {
     const element = tableElement();
     return element instanceof HTMLElement ? element : null;
   }, !!holdOptions?.whileScrolled);
+  const reasons: Array<[TableLiveHoldReason, boolean, () => boolean]> = [
+    ["rowOpen", !!holdOptions?.whileRowOpen, signals.isRowOpen ?? NEVER],
+    ["searching", !!holdOptions?.whileSearching, signals.isSearching ?? NEVER],
+    ["sorted", !!holdOptions?.whileSorted, signals.isSorted ?? NEVER],
+    ["scrolled", !!holdOptions?.whileScrolled, () => isScrolled.value],
+  ];
   return computed(
     () =>
-      (!!holdOptions?.whileRowOpen && isRowOpen()) ||
-      (!!holdOptions?.whileScrolled && isScrolled.value),
+      reasons.find(([, isEnabled, isActive]) => isEnabled && isActive())?.[0] ??
+      null,
   );
 }
 
 /**
  * The `liveHold` of a table view: while its live page is paused — or, with
- * `whileRowOpen` / `whileScrolled`, while the user reads a row or scrolled
- * down — the table keeps its rows: the gate requests nothing on its events
- * and counts them, and a source route is told the moment they were frozen, so
- * the user's own search, sort and pagination list the rows as they stood.
+ * `whileRowOpen` / `whileSearching` / `whileSorted` / `whileScrolled`, while
+ * the user reads a row, searches, sorts or scrolled down — the table keeps
+ * its rows: the gate requests nothing on its events and counts them, and a
+ * source route is told the moment they were frozen, so the user's own
+ * search, sort and pagination list the rows as they stood.
  * Show reads them once more without leaving the hold; the end of a hold of
  * the table's own reads them if it missed any.
  *
  * @internal
  */
 export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
-  const { isEnabled, isPaused } = usePageLive();
+  const { isEnabled, isPaused, missedDetail } = usePageLive();
   const holdOptions = holdOptionsOf(options.liveHold);
-  const isLocallyHeld = useLocalHold(holdOptions, options.signals ?? {});
-  const pausedAt = ref<number | null>(null);
+  const localReason = useLocalHold(holdOptions, options.signals ?? {});
+  const isLocallyHeld = computed(() => localReason.value !== null);
   const isHolding = computed(
     () =>
       !!holdOptions &&
       isEnabled.value &&
       (isPaused.value || isLocallyHeld.value),
   );
-
-  watch(
-    isHolding,
-    (holding) => {
-      pausedAt.value = holding ? Date.now() : null;
-    },
-    { immediate: true },
-  );
   // Again on a new controller: the gate binds to the page on screen.
   watch(
     [isLocallyHeld, isEnabled],
@@ -107,25 +132,43 @@ export function useTableLiveHold(options: TableLiveHoldOptions): TableLiveHold {
     },
     { flush: "sync" },
   );
-
-  // The rows are as fresh as the hold, or as the last read the user asked
-  // for since (Show, an action of theirs).
-  const heldAt = () =>
-    pausedAt.value === null
-      ? null
-      : Math.max(pausedAt.value, options.gate().lastReadAt.value);
+  const newCount = computed(() =>
+    isHolding.value ? options.gate().missed.value : 0,
+  );
 
   return {
     isHolding,
-    newCount: computed(() =>
-      isHolding.value ? options.gate().missed.value : 0,
+    newCount,
+    reason: computed(() =>
+      isHolding.value && !isPaused.value ? localReason.value : null,
+    ),
+    missedLabel: holdOptions?.missedLabel,
+    missedDetail: computed(() =>
+      isPaused.value && newCount.value > 0 ? missedDetail.value : null,
     ),
     showNew: () => options.gate().catchUp(),
-    heldQuery: () => {
-      const at = heldAt();
-      return options.isSource && at !== null
-        ? { [LIVE_HELD_AT_QUERY_KEY]: new Date(at).toISOString() }
-        : NO_QUERY;
+    heldQuery: useHeldQuery(isHolding, options),
+  };
+}
+
+// The bound a source route receives while the rows are held: they are as
+// fresh as the hold, or as the last read the user asked for since (Show, an
+// action of theirs).
+function useHeldQuery(
+  isHolding: ComputedRef<boolean>,
+  options: TableLiveHoldOptions,
+): () => Query {
+  const pausedAt = ref<number | null>(null);
+  watch(
+    isHolding,
+    (holding) => {
+      pausedAt.value = holding ? Date.now() : null;
     },
+    { immediate: true },
+  );
+  return () => {
+    if (!options.isSource || pausedAt.value === null) return NO_QUERY;
+    const at = Math.max(pausedAt.value, options.gate().lastReadAt.value);
+    return { [LIVE_HELD_AT_QUERY_KEY]: new Date(at).toISOString() };
   };
 }

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

@@ -0,0 +1,60 @@
+import type {
+  InputNumberAdjustment,
+  InputNumberAdjustmentReason,
+} from "../../types/input-number";
+
+/** The bounds a number field keeps its value within. */
+export interface NumberFieldBounds {
+  min?: number;
+  max?: number;
+}
+
+// 11111.1 writes both the group and the decimal separator in every locale.
+const SEPARATOR_SAMPLE = 11111.1;
+const WHITESPACE = /\s/g;
+const NOT_NUMERIC = /[^\d.+-]/g;
+
+function separatorsOf(locale: string): { group?: string; decimal: string } {
+  const parts = new Intl.NumberFormat(locale).formatToParts(SEPARATOR_SAMPLE);
+  return {
+    group: parts.find((part) => part.type === "group")?.value,
+    decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
+  };
+}
+
+/**
+ * A number as typed in a field written in `locale` ("1,020", "1 020,5"):
+ * `null` when nothing is typed or it does not read as a number.
+ */
+export function parseTypedNumber(text: string, locale: string): number | null {
+  const { group, decimal } = separatorsOf(locale);
+  let digits = text.replace(WHITESPACE, "");
+  if (group && group.trim()) digits = digits.split(group).join("");
+  digits = digits.split(decimal).join(".").replace(NOT_NUMERIC, "");
+  if (!digits) return null;
+  const value = Number(digits);
+  return Number.isFinite(value) ? value : null;
+}
+
+function reasonOf(
+  typed: number,
+  bounds: NumberFieldBounds,
+): InputNumberAdjustmentReason {
+  if (bounds.max !== undefined && typed > bounds.max) return "max";
+  if (bounds.min !== undefined && typed < bounds.min) return "min";
+  return "step";
+}
+
+/**
+ * How a number field changed what was typed into the value it keeps: kept
+ * within its bounds, or put on its steps. `null` when it keeps what was typed.
+ */
+export function numberAdjustment(
+  typed: number | null,
+  value: number | null | undefined,
+  bounds: NumberFieldBounds,
+): InputNumberAdjustment | null {
+  if (typed === null || typeof value !== "number" || value === typed)
+    return null;
+  return { typed, value, reason: reasonOf(typed, bounds) };
+}

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

@@ -1,4 +1,5 @@
 <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 { childComponentId } from "../utils/componentId";
@@ -7,6 +8,7 @@ import {
   type GridDeclaredColumns,
 } from "./grid/constants";
 import DmsPermissionVeil from "../build/components/permission/PermissionVeil.vue";
+import { registerBlockAnchor } from "../build/composables/page/blockAnchors";
 
 interface Props {
   component: ResolvedComponentInfo;
@@ -22,6 +24,14 @@ interface Props {
 
 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 {
+  const block = (instance as ComponentPublicInstance | null) ?? null;
+  registerBlockAnchor(props.layoutPath, block, anchored);
+  anchored = block;
+}
+
 const { t } = useI18n();
 const preview = usePermissionPreview();
 const previewBlock = computed(() => preview.blockFor(props.layoutPath));
@@ -97,6 +107,7 @@ provide<GridDeclaredColumns>(GRID_DECLARED_COLUMNS, {
   >
     <Component
       :is="component.component"
+      :ref="anchorBlock"
       v-bind="JSON.parse(JSON.stringify(component.options || {})) || {}"
       :page-id="pageId"
       :component-id="componentId"

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

@@ -26,6 +26,12 @@ interface Props {
   to?: string;
   /** Hover band; on by default. */
   interactive?: boolean;
+  /**
+   * The title, details and detail line wrap over as many lines as they
+   * need, a long path or query breaking anywhere, instead of one line each
+   * cut with an ellipsis.
+   */
+  wrap?: boolean;
 }
 
 interface Slots {
@@ -45,6 +51,7 @@ const props = withDefaults(defineProps<Props>(), {
   unread: false,
   to: undefined,
   interactive: true,
+  wrap: false,
 });
 const slots = defineSlots<Slots>();
 
@@ -57,7 +64,8 @@ const hasTitle = computed(() => !!props.title || !!slots.default);
     size="sm"
     icon-size="xs"
     marker="trailing"
-    truncate
+    :truncate="!props.wrap"
+    :class="props.wrap && '[overflow-wrap:anywhere]'"
     :icon="props.icon"
     :tone="props.iconColor"
     :meta="meta"
@@ -71,15 +79,15 @@ const hasTitle = computed(() => !!props.title || !!slots.default);
     <template v-if="hasTitle" #default>
       <!-- One line on wide screens (the full text shows on hover); on a
            phone a sentence wraps rather than losing its end, while a mono
-           path or query keeps its line. -->
+           path or query keeps its line. `wrap` keeps every word. -->
       <span
-        class="min-w-0 truncate"
-        :class="
-          props.mono
-            ? 'text-toned font-mono text-[12.5px]'
-            : 'max-sm:whitespace-normal'
-        "
-        :title="props.title"
+        class="min-w-0"
+        :class="[
+          props.mono && 'text-toned font-mono text-[12.5px]',
+          !props.wrap && 'truncate',
+          !props.wrap && !props.mono && 'max-sm:whitespace-normal',
+        ]"
+        :title="props.wrap ? undefined : props.title"
       >
         <slot>{{ props.title }}</slot>
       </span>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, resolveComponent } from "vue";
+import { computed, ref, resolveComponent } from "vue";
 import DmsActivityItem from "../activity/ActivityItem.vue";
 import DmsBlockActions, {
   type BlockAction,
@@ -48,6 +48,16 @@ interface ActivityFeedProps extends Partial<DefaultComponentProps> {
   groupByDay?: boolean;
   /** Shows at most this many entries. */
   maxItems?: number;
+  /**
+   * Shows the first this many entries, and a "Show N more" button under them
+   * that unfolds the rest (up to `maxItems`), and folds them back.
+   */
+  visibleItems?: number;
+  /**
+   * Entries wrap their title, details and detail line rather than cutting
+   * each to one line with an ellipsis.
+   */
+  wrap?: boolean;
   /**
    * Fills its grid cell instead of growing with its entries, which scroll
    * under the fixed head: the cards beside it set the row's height.
@@ -80,6 +90,8 @@ const props = withDefaults(defineProps<ActivityFeedProps>(), {
   realtimeTopic: undefined,
   groupByDay: true,
   maxItems: undefined,
+  visibleItems: undefined,
+  wrap: false,
   fillHeight: false,
   skeletonCount: undefined,
   actions: () => [],
@@ -119,13 +131,36 @@ 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
+    ? Math.max(0, entries.value.length - props.visibleItems)
+    : 0,
+);
+const shownEntries = computed<ActivityFeedItem[]>(() =>
+  foldedCount.value > 0 && !isUnfolded.value
+    ? entries.value.slice(0, props.visibleItems)
+    : entries.value,
+);
+const foldLabel = computed(() =>
+  isUnfolded.value
+    ? t("dms.activity_feed.show_fewer")
+    : t(
+        "dms.activity_feed.show_more",
+        { count: foldedCount.value },
+        foldedCount.value,
+      ),
+);
+
 const days = computed<ActivityFeedDay[]>(() =>
   props.groupByDay
-    ? groupActivityByDay(entries.value, locale.value, {
+    ? groupActivityByDay(shownEntries.value, locale.value, {
         today: t("dms.activity_feed.today"),
         yesterday: t("dms.activity_feed.yesterday"),
       })
-    : [{ key: "all", items: entries.value }],
+    : [{ key: "all", items: shownEntries.value }],
 );
 
 const trailingOf = (item: ActivityFeedItem): string | undefined => {
@@ -158,11 +193,12 @@ 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 `maxItems`; never more than `maxItems`), under day
-// separators when the entries are grouped by day.
+// (`skeletonCount`, else `visibleItems` or `maxItems`; never more than
+// those), under day separators when the entries are grouped by day.
 const skeletonDays = computed<number[][]>(() => {
-  const wanted = props.skeletonCount ?? props.maxItems ?? SKELETON_ROWS;
-  const count = props.maxItems ? Math.min(wanted, props.maxItems) : wanted;
+  const shown = props.visibleItems ?? props.maxItems;
+  const wanted = props.skeletonCount ?? shown ?? SKELETON_ROWS;
+  const count = shown ? Math.min(wanted, shown) : wanted;
   const perDay = props.groupByDay ? SKELETON_ROWS_PER_DAY : count;
   const days: number[][] = [];
   for (let start = 0; start < count; start += perDay) {
@@ -328,10 +364,25 @@ const wrapperProps = computed(() =>
             :trailing="trailingOf(item)"
             :unread="item.unread"
             :mono="props.mono"
+            :wrap="props.wrap"
             :to="item.to"
             :interactive="!!item.to"
           />
         </section>
+        <div
+          v-if="foldedCount > 0"
+          class="dms-activity-feed__fold border-t border-(--ui-border-muted) px-[18px] pt-2 pb-1"
+        >
+          <UButton
+            :label="foldLabel"
+            :aria-expanded="isUnfolded"
+            color="neutral"
+            variant="link"
+            size="xs"
+            class="p-0 font-medium"
+            @click="isUnfolded = !isUnfolded"
+          />
+        </div>
       </div>
     </div>
   </component>

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

@@ -4,6 +4,7 @@ import DmsCodeSnippet from "../code-snippet/CodeSnippet.vue";
 import DmsBlockStatus from "../../build/components/blocks/BlockStatus.vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
 import { readFetchNotFound } from "../../build/utils/fetchNotFound";
+import { PLAIN_CODE_LANGUAGE } from "../../build/utils/codeLanguages";
 import { useWatch } from "../../../../dms-core/app/composables/watch/useWatch";
 import { useComposedText } from "../../../../dms-core/app/composables/translation/useComposedText";
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
@@ -58,7 +59,10 @@ const { data, isLoading, error, refresh } = useChartFetch<CodeBlockResponse>({
 });
 
 const code = computed(() => data.value?.code ?? props.code);
-const language = computed(() => data.value?.language ?? props.language);
+// The block always heads its code with its language, plain text included.
+const language = computed(
+  () => data.value?.language ?? props.language ?? PLAIN_CODE_LANGUAGE,
+);
 const title = computed(() =>
   props.title ? processText(props.title) : undefined,
 );

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

@@ -5,6 +5,7 @@ import DmsEmptyState, {
   type EmptyStateVariant,
 } from "../empty-state/EmptyState.vue";
 import DmsCodeSnippet from "../code-snippet/CodeSnippet.vue";
+import { PLAIN_CODE_LANGUAGE } from "../../build/utils/codeLanguages";
 import DmsBlockActions, {
   type BlockAction,
 } from "../../build/components/blocks/BlockActions.vue";
@@ -75,7 +76,7 @@ const description = computed(() =>
       <template v-if="props.code" #content>
         <DmsCodeSnippet
           :code="props.code.content"
-          :language="props.code.language"
+          :language="props.code.language ?? PLAIN_CODE_LANGUAGE"
           :copy="props.code.copy ?? true"
         />
       </template>