@antelopejs/dms 0.10.0 → 0.11.1

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

@@ -2,6 +2,7 @@ import { onMounted, shallowRef, watch } from "vue";
 import type { DataTypeSelectSource } from "#dms-core/app/composables/data-types/useDataType";
 import { unlabeledRelationIds } from "../data-types/relationValue";
 import {
+  notFoundRelationIds,
   relationRowLabel,
   relationRowValue,
   useRelationRows,
@@ -18,15 +19,24 @@ const labelKey = (searchUrl: string, id: string) => `${searchUrl}\n${id}`;
 const NO_LABELS: ReadonlySet<string> = new Set();
 const idsOf = (value: unknown) => unlabeledRelationIds(value, NO_LABELS);
 
+/** How a chip names one id of a relation filter. */
+export interface RelationFilterLabel {
+  label: string;
+  /** The id of a row the route did not answer, shown on hover. */
+  notFoundId?: string;
+}
+
 /**
  * The labels of the ids a table's relation filters hold: a chip names the
  * related row ("Acme"), not the raw id it filters on ("cust-060"). Each id is
  * read once from the relation's `select` route, as its picker does; an id the
- * route does not answer (deleted, out of reach) keeps showing as is.
+ * route does not answer (deleted, out of reach) is named "Not found".
  */
 export function useRelationFilterLabels(sources: () => RelationFilterSource[]) {
   const { readRelationRows } = useRelationRows();
+  const { t } = useI18n();
   const labels = shallowRef<Record<string, string>>({});
+  const notFound = shallowRef<ReadonlySet<string>>(new Set());
   const requested = new Set<string>();
 
   async function loadLabels(source: RelationFilterSource, ids: string[]) {
@@ -42,6 +52,13 @@ export function useRelationFilterLabels(sources: () => RelationFilterSource[]) {
     if (Object.keys(found).length) {
       labels.value = { ...labels.value, ...found };
     }
+    const missing = notFoundRelationIds(source, ids, rows);
+    if (missing.length) {
+      notFound.value = new Set([
+        ...notFound.value,
+        ...missing.map((id) => labelKey(source.searchUrl, id)),
+      ]);
+    }
   }
 
   const pending = () =>
@@ -63,11 +80,18 @@ export function useRelationFilterLabels(sources: () => RelationFilterSource[]) {
     );
   });
 
-  /** The labels of a relation filter's ids, in order; an unknown id as is. */
-  const labelsOf = (source: RelationFilterSource): string[] =>
-    idsOf(source.value).map(
-      (id) => labels.value[labelKey(source.searchUrl, id)] ?? id,
-    );
+  /**
+   * The labels of a relation filter's ids, in order: an id not read yet as
+   * is, one the route did not answer as "Not found".
+   */
+  const labelsOf = (source: RelationFilterSource): RelationFilterLabel[] =>
+    idsOf(source.value).map((id) => {
+      const key = labelKey(source.searchUrl, id);
+      if (notFound.value.has(key)) {
+        return { label: t("dms.form.relation.not_found"), notFoundId: id };
+      }
+      return { label: labels.value[key] ?? id };
+    });
 
   return { labelsOf };
 }

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

@@ -5,7 +5,10 @@ import {
   type FormPageUrls,
 } from "./useTableViewConfig";
 import type { FormProps } from "../../../composables/form/types";
-import type { QueryParamFilters } from "../../../composables/table-view/types";
+import type {
+  QueryParamFilters,
+  TableViewColumn,
+} from "../../../composables/table-view/types";
 import type { LocationQuery, LocationQueryValue } from "#dms/frontend-module";
 import {
   TableRowAction,
@@ -33,7 +36,7 @@ import {
   type BulkActionOutcome,
   type ConfirmedBulkAction,
 } from "./utils/bulkActions";
-import { resolveActionError } from "../confirm/actionError";
+import { describeTableWriteError } from "./utils/writeError";
 import {
   ConfirmActionError,
   type ConfirmOptions,
@@ -59,6 +62,8 @@ const getItemId = (
 interface TableRowActionsConfig {
   api: ReturnType<typeof $fetch.create>;
   location: string;
+  /** The columns, whose labels name the fields a refused write lacks. */
+  columns: ReadonlyArray<Pick<TableViewColumn, "accessorKey" | "header">>;
   caption?: string;
   labelKey?: string;
   rowIdKey?: string;
@@ -146,7 +151,12 @@ export const useTableRowActions = <T extends Data>(
       color: Color.error,
       icon: "i-ph-warning-circle",
       title: title || t("dms.form.error_title"),
-      description: resolveActionError(error, t),
+      description: describeTableWriteError(
+        error,
+        t,
+        config.columns,
+        processI18n,
+      ),
     });
   };
 

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

@@ -0,0 +1,21 @@
+import type { I18nTranslate } from "#dms-core/app/composables/translation/useTranslation";
+import type { TableViewColumn } from "../../../../composables/table-view/types/column";
+import { resolveActionError } from "../../confirm/actionError";
+
+/**
+ * Why a table view's write failed (a card moved on the board, a row moved
+ * by hand, a row action), for its toast: the server's reason, a field the
+ * data API refused named by its column's label ("Loss reason is
+ * required."). Never the raw ofetch error line.
+ */
+export function describeTableWriteError(
+  error: unknown,
+  translate: I18nTranslate,
+  columns: ReadonlyArray<Pick<TableViewColumn, "accessorKey" | "header">>,
+  processI18n: (text: string) => string,
+): string {
+  return resolveActionError(error, translate, (field) => {
+    const column = columns.find((entry) => entry.accessorKey === field);
+    return column ? processI18n(column.header) : undefined;
+  });
+}

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

@@ -1,19 +1,17 @@
-// Read-only highlighting: the code parsed by the editor's own CodeMirror
-// languages and cut into styled tokens, without mounting an editor. Loaded on
-// demand, like the editor: a page only pays for the parsers once it shows
-// code.
-import { htmlLanguage } from "@codemirror/lang-html";
-import {
-  javascriptLanguage,
-  typescriptLanguage,
-} from "@codemirror/lang-javascript";
-import { jsonLanguage } from "@codemirror/lang-json";
-import { StandardSQL } from "@codemirror/lang-sql";
-import { StreamLanguage } from "@codemirror/language";
+// Read-only highlighting: the code parsed by the grammars the editor's
+// CodeMirror languages are built on, and cut into styled tokens, without
+// mounting an editor. Each language's grammar loads on demand and alone: a
+// snippet needs neither the editor's view nor its state, which would triple
+// what a page showing a JSON payload downloads. SQL is the exception: its
+// grammar only ships inside `@codemirror/lang-sql`.
 import type { Parser } from "@lezer/common";
-import { highlightTree, tagHighlighter } from "@lezer/highlight";
+import {
+  type Highlighter,
+  highlightTree,
+  tagHighlighter,
+} from "@lezer/highlight";
 import { CODE_PALETTE, type CodeTokenStyle } from "./codePalette";
-import { shellParser } from "./shellParser";
+import type { HighlightedRange } from "./streamHighlight";
 
 /** A run of code drawn in one style; unstyled text has no `style`. */
 export interface CodeToken {
@@ -21,13 +19,42 @@ export interface CodeToken {
   style?: CodeTokenStyle;
 }
 
-const PARSERS: Record<string, Parser> = {
-  json: jsonLanguage.parser,
-  javascript: javascriptLanguage.parser,
-  typescript: typescriptLanguage.parser,
-  html: htmlLanguage.parser,
-  sql: StandardSQL.language.parser,
-  shell: StreamLanguage.define(shellParser).parser,
+/** Cuts code of the language it was loaded for into tokens. */
+export type CodeHighlighter = (code: string) => CodeToken[];
+
+/** Calls `put` for each styled range of `code`, in order. */
+type RangeReader = (
+  code: string,
+  highlighter: Highlighter,
+  put: HighlightedRange,
+) => void;
+
+const readWith =
+  (parser: Parser): RangeReader =>
+  (code, highlighter, put) =>
+    highlightTree(parser.parse(code), highlighter, put);
+
+// One dynamic import per language, so a page loads the grammar it shows.
+const READERS: Record<string, () => Promise<RangeReader>> = {
+  json: async () => readWith((await import("@lezer/json")).parser),
+  javascript: async () => readWith((await import("@lezer/javascript")).parser),
+  typescript: async () =>
+    readWith(
+      (await import("@lezer/javascript")).parser.configure({ dialect: "ts" }),
+    ),
+  html: async () => readWith((await import("./htmlGrammar")).htmlParser),
+  sql: async () =>
+    readWith(
+      (await import("@codemirror/lang-sql")).StandardSQL.language.parser,
+    ),
+  shell: async () => {
+    const [{ highlightStream }, { shellParser }] = await Promise.all([
+      import("./streamHighlight"),
+      import("./shellParser"),
+    ]);
+    return (code, highlighter, put) =>
+      highlightStream(shellParser, code, highlighter, put);
+  },
 };
 
 // Each palette entry's position is its class, read back into its style.
@@ -40,16 +67,11 @@ function styleOf(classes: string): CodeTokenStyle {
   return { color, fontStyle };
 }
 
-/**
- * Cuts `code` into tokens styled for `language` (a resolved name, see
- * `resolveCodeLanguage`); a language without a parser is one plain token.
- */
-export function highlightCode(code: string, language: string): CodeToken[] {
-  const parser = PARSERS[language];
-  if (!parser || !code) return [{ text: code }];
+function tokensOf(code: string, read: RangeReader): CodeToken[] {
+  if (!code) return [{ text: code }];
   const tokens: CodeToken[] = [];
   let cursor = 0;
-  highlightTree(parser.parse(code), HIGHLIGHTER, (from, to, classes) => {
+  read(code, HIGHLIGHTER, (from, to, classes) => {
     if (from > cursor) tokens.push({ text: code.slice(cursor, from) });
     tokens.push({ text: code.slice(from, to), style: styleOf(classes) });
     cursor = to;
@@ -57,3 +79,19 @@ export function highlightCode(code: string, language: string): CodeToken[] {
   if (cursor < code.length) tokens.push({ text: code.slice(cursor) });
   return tokens;
 }
+
+const plain: CodeHighlighter = (code) => [{ text: code }];
+
+/**
+ * Loads the grammar of `language` (a resolved name, see
+ * `resolveCodeLanguage`) and resolves to what cuts its code into styled
+ * tokens; a language without a grammar shows each code as one plain token.
+ */
+export async function loadCodeHighlighter(
+  language: string,
+): Promise<CodeHighlighter> {
+  const load = READERS[language];
+  if (!load) return plain;
+  const read = await load();
+  return (code) => tokensOf(code, read);
+}

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

@@ -0,0 +1,79 @@
+// HTML as the editor's language reads it (`@codemirror/lang-html`): scripts,
+// styles, `style` attributes and event handlers parsed in their own
+// languages, from the lezer grammars alone. The nesting mirrors lang-html's
+// defaults, so a snippet colours HTML exactly like the editor. A module of its
+// own because HTML is the one grammar composed of others.
+import { parser as cssParser } from "@lezer/css";
+import { configureNesting, parser } from "@lezer/html";
+import { parser as javascriptParser } from "@lezer/javascript";
+
+// What lezer read of a tag's attributes; an absent one is undefined.
+type Attributes = Readonly<Record<string, string | undefined>>;
+
+const typescriptParser = javascriptParser.configure({ dialect: "ts" });
+// A JSON script holds one value, read as JavaScript reads it.
+const jsonScriptParser = javascriptParser.configure({
+  top: "SingleExpression",
+});
+
+const JSON_SCRIPT_TYPE =
+  /^(importmap|speculationrules|application\/(.+\+)?json)$/i;
+const JAVASCRIPT_TYPE =
+  /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i;
+const CSS_TYPE = /^(text\/)?(x-)?(stylesheet|css)$/i;
+
+const NESTED_TAGS = [
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      attrs.type === "text/typescript" || attrs.lang === "ts",
+    parser: typescriptParser,
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      attrs.type === "text/babel" || attrs.type === "text/jsx",
+    parser: javascriptParser.configure({ dialect: "jsx" }),
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) => attrs.type === "text/typescript-jsx",
+    parser: javascriptParser.configure({ dialect: "jsx ts" }),
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) => JSON_SCRIPT_TYPE.test(attrs.type ?? ""),
+    parser: jsonScriptParser,
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      !attrs.type || JAVASCRIPT_TYPE.test(attrs.type),
+    parser: javascriptParser,
+  },
+  {
+    tag: "style",
+    attrs: (attrs: Attributes) =>
+      (!attrs.lang || attrs.lang === "css") &&
+      (!attrs.type || CSS_TYPE.test(attrs.type)),
+    parser: cssParser,
+  },
+];
+
+const EVENT_ATTRIBUTES = (
+  "beforeunload copy cut dragstart dragover dragleave dragenter dragend " +
+  "drag paste focus blur change click load mousedown mouseenter mouseleave " +
+  "mouseup keydown keyup resize scroll unload"
+)
+  .split(" ")
+  .map((name) => `on${name}`);
+
+const NESTED_ATTRIBUTES = [
+  { name: "style", parser: cssParser.configure({ top: "Styles" }) },
+  ...EVENT_ATTRIBUTES.map((name) => ({ name, parser: javascriptParser })),
+];
+
+/** The HTML grammar, with its embedded languages. */
+export const htmlParser = parser.configure({
+  wrap: configureNesting(NESTED_TAGS, NESTED_ATTRIBUTES),
+});

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

@@ -1,4 +1,4 @@
-import type { StreamParser, StringStream } from "@codemirror/language";
+import type { StreamParser, StringStream } from "@codemirror/streamparser";
 
 // A shell snippet as read for highlighting only: the command of each
 // pipeline step, its flags, quoted strings, variables and comments.

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

@@ -0,0 +1,90 @@
+// A CodeMirror stream parser (a language written as a line tokenizer, like
+// the shell's) run for read-only highlighting. `StreamLanguage` would do it
+// inside an editor state, and so pull CodeMirror's view and state into every
+// page showing a snippet: this drives the parser the same way, line by line
+// over `StringStream`, and names its tokens' tags the same way.
+import { type StreamParser, StringStream } from "@codemirror/streamparser";
+import { type Highlighter, type Tag, tags } from "@lezer/highlight";
+
+/** Receives one styled range of the code: its offsets and its classes. */
+export type HighlightedRange = (
+  from: number,
+  to: number,
+  classes: string,
+) => void;
+
+// CodeMirror's defaults, which `StreamLanguage` hands every stream.
+const TAB_SIZE = 4;
+const INDENT_UNIT = 2;
+// Zero-length tokens a parser may return in a row (each one changing its
+// state) before the stream moves on by itself, as `StreamLanguage` allows.
+const MAX_EMPTY_TOKENS = 10;
+
+type TagValue = Tag | readonly Tag[] | ((tag: Tag) => Tag);
+const TAG_TABLE = tags as unknown as Record<string, TagValue | undefined>;
+const tagsByName = new Map<string, Tag[]>();
+
+// A token type names tags the way `StreamLanguage` reads them: space
+// separated, each a tag followed by its modifiers (`variableName.special`).
+function tagsOf(type: string): Tag[] {
+  const cached = tagsByName.get(type);
+  if (cached) return cached;
+  const resolved = type.split(" ").flatMap((name) => {
+    let found: Tag[] = [];
+    for (const part of name.split(".")) {
+      const value = TAG_TABLE[part];
+      if (typeof value === "function") found = found.map(value);
+      else if (value && !found.length)
+        found = Array.isArray(value) ? [...value] : [value as Tag];
+    }
+    return found;
+  });
+  tagsByName.set(type, resolved);
+  return resolved;
+}
+
+/**
+ * Tokenizes `code` with `parser` and calls `put` for each range its
+ * highlighter styles, adjacent ranges of one style merged, as
+ * `highlightTree` reports a parsed tree.
+ */
+export function highlightStream<State>(
+  parser: StreamParser<State>,
+  code: string,
+  highlighter: Highlighter,
+  put: HighlightedRange,
+): void {
+  const state = parser.startState?.(INDENT_UNIT) ?? (true as State);
+  let pending: { from: number; to: number; classes: string } | null = null;
+  const flush = () => {
+    if (pending) put(pending.from, pending.to, pending.classes);
+    pending = null;
+  };
+  const add = (from: number, to: number, classes: string | null) => {
+    if (pending && (pending.to !== from || pending.classes !== classes))
+      flush();
+    if (!classes) return;
+    if (pending) pending.to = to;
+    else pending = { from, to, classes };
+  };
+
+  let lineStart = 0;
+  for (const line of code.split("\n")) {
+    if (!line) parser.blankLine?.(state, INDENT_UNIT);
+    const stream = new StringStream(line, TAB_SIZE, INDENT_UNIT);
+    let emptyTokens = 0;
+    while (!stream.eol()) {
+      stream.start = stream.pos;
+      const type = parser.token(stream, state);
+      if (stream.pos === stream.start) {
+        if (++emptyTokens < MAX_EMPTY_TOKENS) continue;
+        stream.next();
+      }
+      emptyTokens = 0;
+      const classes = type ? highlighter.style(tagsOf(type)) : null;
+      add(lineStart + stream.start, lineStart + stream.pos, classes);
+    }
+    lineStart += line.length + 1;
+  }
+  flush();
+}

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

@@ -1,18 +1,21 @@
 <script setup lang="ts">
-import { computed, onMounted, shallowRef } from "vue";
+import { computed, onMounted, shallowRef, watch } from "vue";
 import DmsCopyButton from "../copy/CopyButton.vue";
 import {
   codeLanguageLabel,
   PLAIN_CODE_LANGUAGE,
   resolveCodeLanguage,
 } from "../../build/utils/codeLanguages";
-import type { CodeToken, highlightCode } from "../../build/utils/codeHighlight";
+import type {
+  CodeHighlighter,
+  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 the highlighter loads (and on the server) the
-// code shows as is.
+// 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
@@ -63,7 +66,7 @@ const WRAP_CLASSES: Record<"false" | "true" | "anywhere", string> = {
   anywhere: "whitespace-pre-wrap [overflow-wrap:anywhere]",
 };
 
-const highlight = shallowRef<typeof highlightCode | null>(null);
+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,
@@ -79,9 +82,7 @@ const wrapClass = computed(
   () => WRAP_CLASSES[String(props.wrap) as keyof typeof WRAP_CLASSES],
 );
 const tokens = computed<CodeToken[]>(() =>
-  highlight.value
-    ? highlight.value(props.code, language.value)
-    : [{ text: props.code }],
+  highlight.value ? highlight.value(props.code) : [{ text: props.code }],
 );
 const sizeStyle = computed(() => {
   if (props.maxLines)
@@ -91,10 +92,20 @@ const sizeStyle = computed(() => {
   return props.maxHeight ? { maxHeight: props.maxHeight } : undefined;
 });
 
-onMounted(async () => {
-  const module = await import("../../build/utils/codeHighlight");
-  highlight.value = module.highlightCode;
-});
+// 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;
+  const { loadCodeHighlighter } = await import(
+    "../../build/utils/codeHighlight"
+  );
+  const highlighter = await loadCodeHighlighter(requested);
+  if (language.value === requested) highlight.value = highlighter;
+}
+
+onMounted(loadHighlighter);
+watch(language, loadHighlighter);
 </script>
 
 <template>

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

@@ -326,6 +326,7 @@ const localizedSchema = computed(() => {
     id: field.id,
     type: field.type,
     localized: field.localized,
+    fallbackLocale: field.fallbackLocale,
     required: isFieldRequired(field),
     acceptance: isAcceptanceField(field),
   }));

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

@@ -6,7 +6,10 @@ import {
   findCascaderNode,
   formatCascaderPath,
   isCascaderNodeSelectable,
+  readCascaderAncestry,
   resolveCascaderKeyMapping,
+  buildCascaderPathLabels,
+  CASCADER_PATH_SEPARATOR,
   searchCascaderTree,
   type CascaderKeyMapping,
   type CascaderNode,
@@ -18,6 +21,7 @@ import {
   FIELD_TRIGGER_INVALID_CLASS,
   FIELD_TRIGGER_UI,
 } from "../../../build/utils/fieldTrigger";
+import { useRelationRows } from "../../../build/composables/data-types/relationRows";
 
 interface CascaderProps {
   searchUrl: string;
@@ -88,6 +92,36 @@ const { data, status, execute } = await useDmsAsyncData(
 );
 
 const keyMapping = computed(() => resolveCascaderKeyMapping(props.keyMapping));
+const selectedValues = computed<string[]>(() => {
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.map(String);
+  }
+  return props.modelValue ? [String(props.modelValue)] : [];
+});
+
+// The picked rows and their ancestors, read by `?ids=` level by level: the
+// field names its value before the menu is opened, whatever the tree's size.
+const { readRelationRows } = useRelationRows();
+const { data: ancestry } = await useDmsAsyncData(
+  () => `cascader-value-${instanceId}-${selectedValues.value.join(",")}`,
+  () =>
+    selectedValues.value.length > 0
+      ? readCascaderAncestry(
+          (ids) =>
+            readRelationRows(
+              {
+                searchUrl: props.searchUrl,
+                keyMapping: { value: keyMapping.value.value },
+              },
+              ids,
+            ),
+          keyMapping.value,
+          selectedValues.value,
+        )
+      : Promise.resolve(undefined),
+  // The field's label, not the page's data.
+  { lazy: true, refreshOnPageRefresh: false },
+);
 const rows = computed(() => data.value?.results ?? []);
 const isPartial = computed(
   () => (data.value?.total ?? 0) > rows.value.length && rows.value.length > 0,
@@ -100,12 +134,6 @@ const selectionRules = computed(() => ({
   maxDepth: props.maxDepth,
 }));
 
-const selectedValues = computed<string[]>(() => {
-  if (Array.isArray(props.modelValue)) {
-    return props.modelValue.map(String);
-  }
-  return props.modelValue ? [String(props.modelValue)] : [];
-});
 const selectedSet = computed(() => new Set(selectedValues.value));
 
 const open = ref(false);
@@ -134,14 +162,11 @@ const columns = computed<CascaderNode[][]>(() => {
   return result;
 });
 
-function initialValueLabel(): string | undefined {
-  const source = Array.isArray(props.initialValue)
-    ? props.initialValue[0]
-    : props.initialValue;
-  if (!source || typeof source !== "object") return undefined;
-  const label = (source as Record<string, unknown>)[keyMapping.value.label];
-  return label === undefined || label === null ? undefined : String(label);
-}
+/** The picked id no row answers (deleted, out of reach), if it is one. */
+const notFoundValue = computed(() => {
+  const value = selectedValues.value[0];
+  return value && ancestry.value?.notFound.includes(value) ? value : undefined;
+});
 
 const triggerLabel = computed(() => {
   if (selectedValues.value.length === 0) return "";
@@ -151,9 +176,15 @@ const triggerLabel = computed(() => {
     });
   }
   const value = selectedValues.value[0]!;
+  if (notFoundValue.value) return t("dms.form.relation.not_found");
   const node = findCascaderNode(roots.value, value);
   if (node) return formatCascaderPath(node);
-  return initialValueLabel() ?? value;
+  const path = buildCascaderPathLabels(
+    ancestry.value?.rows ?? [],
+    keyMapping.value,
+    value,
+  );
+  return path.length > 0 ? path.join(CASCADER_PATH_SEPARATOR) : value;
 });
 
 const placeholderLabel = computed(() =>
@@ -339,12 +370,6 @@ watch(searchTerm, () => {
   };
 });
 
-onMounted(() => {
-  if (selectedValues.value.length > 0 || props.initialValue) {
-    void execute();
-  }
-});
-
 function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
   return [
     "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm",
@@ -383,7 +408,13 @@ function nodeClasses(node: CascaderNode, isHighlighted: boolean): string[] {
         :aria-label="placeholderLabel"
         v-bind="ariaAttrs"
       >
-        <span v-if="triggerLabel" class="truncate">{{ triggerLabel }}</span>
+        <span
+          v-if="triggerLabel"
+          :class="['truncate', notFoundValue && 'text-muted']"
+          :title="notFoundValue ?? triggerLabel"
+        >
+          {{ triggerLabel }}
+        </span>
         <span v-else class="text-dimmed truncate">{{ placeholderLabel }}</span>
       </UButton>