@antelopejs/dms 0.7.1 → 0.7.3

package/frontend-vue/layers/dms-ui/app/build/composables/data-types/registerDefaults.ts

@@ -18,7 +18,10 @@ import {
 import { registerMetricCellTypes } from "./metricCells";
 import { registerTwoLineCellType } from "./twoLineCell";
 import { useComposedText } from "../../../../../dms-core/app/composables/translation/useComposedText";
-import StatusPill from "../../../components/status-pill/StatusPill.vue";
+import StatusPill, {
+  type StatusPillVariant,
+} from "../../../components/status-pill/StatusPill.vue";
+import { isDmsTone } from "../../utils/tone";
 import IdentityCell from "../../components/table-view/IdentityCell.vue";
 import {
   firstNameOf,
@@ -453,9 +456,76 @@ const PILL_FILLED_CLASS =
   "shrink-0 border-(--dms-accent-fill) bg-(--dms-accent-fill) font-[650] text-(--dms-accent-on-fill)";
 
 /**
- * `pills`: a list (relation rows, select values, strings) as v2 role pills,
- * or a single filled pill when the row's `exclusive.field` is set (an owner's
- * crown). A bare id a relation could not resolve (a deleted row) is skipped.
+ * A pill the server styles per row. Mirror of `DefaultDisplays.PillItem` from
+ * `@antelopejs/interface-dms/base/table-view`.
+ */
+interface PillItem {
+  label: string;
+  tone?: string;
+  variant?: string;
+}
+
+const PILL_VARIANTS = new Set<string>(["soft", "outline"]);
+const DEFAULT_PILL_VARIANT: StatusPillVariant = "soft";
+
+const pillVariantOf = (variant: string | undefined): StatusPillVariant =>
+  variant && PILL_VARIANTS.has(variant)
+    ? (variant as StatusPillVariant)
+    : DEFAULT_PILL_VARIANT;
+const DEFAULT_PILL_TONE = "neutral";
+
+// An object with a `label` but no `labelKey` field: a related row carries
+// that field, which tells the two apart.
+const isPillItem = (item: unknown, labelKey: string): item is PillItem =>
+  isObject(item) && typeof item.label === "string" && !(labelKey in item);
+
+/**
+ * The pills of a list. A bare id is skipped next to the related rows it
+ * could not be resolved into; next to pill items it is a pill.
+ */
+function pillsOf(
+  items: unknown[],
+  labelKey: string,
+  processI18n: (text: string) => string,
+): PillItem[] {
+  const hasRelatedRows = items.some(
+    (item) => isObject(item) && !isPillItem(item, labelKey),
+  );
+  return items.flatMap((item): PillItem[] => {
+    if (isPillItem(item, labelKey)) {
+      return [{ ...item, label: processI18n(item.label) }];
+    }
+    if (isObject(item)) {
+      const label = (item as Record<string, unknown>)[labelKey];
+      return label === undefined ? [] : [{ label: processI18n(String(label)) }];
+    }
+    return hasRelatedRows ? [] : [{ label: processI18n(String(item)) }];
+  });
+}
+
+/** A plain pill in the role-pill outline, a styled one as a status pill. */
+function renderPill(pill: PillItem) {
+  if (!pill.tone && !pill.variant) {
+    return h(
+      "span",
+      { class: [PILL_CLASS, PILL_OUTLINE_CLASS, PILL_SHRINK_CLASS] },
+      [h("span", { class: "truncate" }, pill.label)],
+    );
+  }
+  return h(StatusPill, {
+    label: pill.label,
+    tone: pill.tone && isDmsTone(pill.tone) ? pill.tone : DEFAULT_PILL_TONE,
+    variant: pillVariantOf(pill.variant),
+    dot: "none",
+    class: PILL_SHRINK_CLASS,
+  });
+}
+
+/**
+ * `pills`: a list (relation rows, select values, strings, pill items) as v2
+ * role pills, a pill item in its own tone and variant, or a single filled
+ * pill when the row's `exclusive.field` is set (an owner's crown). A bare id
+ * a relation could not resolve (a deleted row) is skipped.
  */
 function renderPills(value: unknown, options: unknown, row: Row) {
   const { processI18n } = useTranslation();
@@ -468,17 +538,13 @@ function renderPills(value: unknown, options: unknown, row: Row) {
       processI18n(opts.exclusive.label),
     ]);
   }
-  const labelKey = opts.labelKey ?? DEFAULT_RELATION_LABEL_KEY;
   const items = Array.isArray(value) ? value : value == null ? [] : [value];
-  const hasObjects = items.some((item) => isObject(item));
-  const labels = items.flatMap((item) => {
-    if (isObject(item)) {
-      const label = (item as Record<string, unknown>)[labelKey];
-      return label === undefined ? [] : [processI18n(String(label))];
-    }
-    return hasObjects ? [] : [processI18n(String(item))];
-  });
-  if (labels.length === 0) {
+  const pills = pillsOf(
+    items,
+    opts.labelKey ?? DEFAULT_RELATION_LABEL_KEY,
+    processI18n,
+  );
+  if (pills.length === 0) {
     return opts.emptyLabel
       ? h(
           "span",
@@ -491,14 +557,11 @@ function renderPills(value: unknown, options: unknown, row: Row) {
   // few letters); the list's tooltip names them all.
   return h(
     "span",
-    { class: "flex min-w-0 gap-1 overflow-hidden", title: labels.join(", ") },
-    labels.map((label) =>
-      h(
-        "span",
-        { class: [PILL_CLASS, PILL_OUTLINE_CLASS, PILL_SHRINK_CLASS] },
-        [h("span", { class: "truncate" }, label)],
-      ),
-    ),
+    {
+      class: "flex min-w-0 gap-1 overflow-hidden",
+      title: pills.map((pill) => pill.label).join(", "),
+    },
+    pills.map(renderPill),
   );
 }
 

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

@@ -21,6 +21,12 @@ export interface TableNarrowingState {
    * search neither narrows the rows nor needs offering to clear.
    */
   searchApplies?: Ref<boolean>;
+  /**
+   * Filters the table applies without showing them (the page URL's
+   * `queryParamFilters`) narrow the rows: they count as filters, though no
+   * clear action reaches them.
+   */
+  hiddenFiltersApply?: Ref<boolean>;
 }
 
 /** What a clear would change. */
@@ -57,9 +63,11 @@ export const clearableTableFilters = (
   search: hasSearch(state),
 });
 
-/** The rows are narrowed by a search or a filter chip. */
+/** The rows are narrowed by a search, a filter chip or a hidden filter. */
 export const isTableNarrowed = (state: TableNarrowingState): boolean =>
-  hasSearch(state) || state.columnFilters.value.some(isFilterEffective);
+  hasSearch(state) ||
+  state.columnFilters.value.some(isFilterEffective) ||
+  !!state.hiddenFiltersApply?.value;
 
 /** i18n key of a clear action, naming what it clears. */
 export const clearTableFiltersLabelKey = (

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

@@ -0,0 +1,79 @@
+import type { PaginationState } from "@tanstack/vue-table";
+import { computed, ref, watch, type Ref } from "vue";
+
+const FIRST_PAGE_INDEX = 0;
+const PAGINATION_PREFERENCE = "pagination";
+// The hidden filters the stored page was reached under, next to it.
+const PAGINATION_SCOPE_PREFERENCE = "paginationScope";
+
+/** The preference store the page is kept in (`usePreferences`). */
+export interface PaginationPreferences {
+  getPreference: <V>(keyPath: string, defaultValue?: V) => V;
+  setPreference: (keyPath: string, value: unknown) => void;
+}
+
+export interface PersistedPaginationOptions {
+  preferences: PaginationPreferences;
+  /** The table's preference key of a setting. */
+  preferenceKey: (suffix: string) => string;
+  defaults: PaginationState;
+  /**
+   * What lists other rows without the user picking it: the hidden filters
+   * the page URL sets. A change of value lists from the first page.
+   */
+  scope: () => unknown;
+}
+
+const firstPage = (pagination: PaginationState): PaginationState => ({
+  ...pagination,
+  pageIndex: FIRST_PAGE_INDEX,
+});
+
+/**
+ * The table's page, kept in the user's preferences with the hidden filters
+ * it was reached under. A page restored under other hidden filters (a link
+ * that remounted the page with another `?status=`) starts at the first
+ * page, as does a change of their value while the table is shown; compared
+ * by value, so another query parameter changing keeps the page.
+ */
+export function usePersistedPagination(
+  options: PersistedPaginationOptions,
+): Ref<PaginationState> {
+  const { preferences, preferenceKey } = options;
+  const scopeKey = computed(() => JSON.stringify(options.scope() ?? null));
+  const stored = preferences.getPreference<PaginationState>(
+    preferenceKey(PAGINATION_PREFERENCE),
+    options.defaults,
+  );
+  // A page stored before its scope was: kept, as it always was.
+  const storedScope = preferences.getPreference<string>(
+    preferenceKey(PAGINATION_SCOPE_PREFERENCE),
+    scopeKey.value,
+  );
+  const pagination = ref<PaginationState>(
+    storedScope === scopeKey.value ? stored : firstPage(stored),
+  );
+
+  // Synchronous, so the list is queried once, with both changes.
+  watch(
+    scopeKey,
+    () => {
+      if (pagination.value.pageIndex === FIRST_PAGE_INDEX) return;
+      pagination.value = firstPage(pagination.value);
+    },
+    { flush: "sync" },
+  );
+  watch(
+    [pagination, scopeKey],
+    ([value, scope]) => {
+      preferences.setPreference(preferenceKey(PAGINATION_PREFERENCE), value);
+      preferences.setPreference(
+        preferenceKey(PAGINATION_SCOPE_PREFERENCE),
+        scope,
+      );
+    },
+    { deep: true },
+  );
+
+  return pagination;
+}

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

@@ -0,0 +1,94 @@
+import type { ComputedRef } from "vue";
+import type { TableViewListResponse } from "../../../composables/table-view/types";
+import { useServerRenderedAsyncData } from "./useServerRenderedAsyncData";
+import type { useTableRows } from "./useTableRows";
+import { buildTableDataKey } from "./utils/tableQuery";
+
+type Query = Record<string, unknown>;
+type TableRows<T extends Record<string, unknown>> = ReturnType<
+  typeof useTableRows<T>
+>;
+
+/** What the list and the tab counters of a table view are read for. */
+export interface TableListDataOptions<T extends Record<string, unknown>> {
+  componentId: string | undefined;
+  pageId: string | undefined;
+  rows: TableRows<T>;
+  query: ComputedRef<object>;
+  archiveQuery: ComputedRef<Query>;
+  /** A self-managed display (the kanban) reads its own rows. */
+  isSelfManaged: ComputedRef<boolean>;
+}
+
+/** One counter: its id and its list query, as the table view builds it. */
+export interface TableCountRequest {
+  id: string;
+  query: object;
+}
+
+export interface TableCountsDataOptions<T extends Record<string, unknown>> {
+  componentId: string | undefined;
+  pageId: string | undefined;
+  rows: TableRows<T>;
+  queries: ComputedRef<TableCountRequest[]>;
+  archiveQuery: ComputedRef<Query>;
+}
+
+const EMPTY_LIST_RESULT: TableViewListResponse<never> = {
+  results: [],
+  total: 0,
+  offset: 0,
+  limit: 0,
+};
+
+/**
+ * The page of rows a table view shows. The key names the source URL: a
+ * navigation that remounts the page while the previous one is still on screen
+ * binds to the cached entry of its key, so another URL needs another key to be
+ * requested at all, and the watch covers a page kept mounted.
+ */
+export function useTableListData<T extends Record<string, unknown>>(
+  options: TableListDataOptions<T>,
+) {
+  const { rows, query, archiveQuery, isSelfManaged } = options;
+  const key = buildTableDataKey({
+    componentId: options.componentId,
+    pageId: options.pageId,
+    query: query.value,
+    archiveQuery: archiveQuery.value,
+    isSelfManaged: isSelfManaged.value,
+    sourceUrl: rows.sourceUrl.value,
+  });
+  return useServerRenderedAsyncData(
+    key,
+    (): Promise<TableViewListResponse<T>> =>
+      isSelfManaged.value
+        ? Promise.resolve(EMPTY_LIST_RESULT)
+        : rows.list({ ...query.value, ...archiveQuery.value }),
+    { watch: [query, archiveQuery, isSelfManaged, rows.sourceUrl] },
+  );
+}
+
+/**
+ * The counters of a table view's tabs and views, keyed by id; `null` until
+ * they arrive. Keyed by source URL like the list (see useTableListData).
+ */
+export function useTableCountsData<T extends Record<string, unknown>>(
+  options: TableCountsDataOptions<T>,
+) {
+  const { rows, queries, archiveQuery } = options;
+  const sourceSuffix = rows.sourceUrl.value ? `-${rows.sourceUrl.value}` : "";
+  return useServerRenderedAsyncData<Record<string, number>>(
+    `table-view-${options.componentId}-${options.pageId}-tab-counts${sourceSuffix}`,
+    async () => {
+      if (queries.value.length === 0) return {};
+      return await rows.countBatch(
+        queries.value.map(({ id, query }) => ({
+          id,
+          query: { ...query, ...archiveQuery.value },
+        })),
+      );
+    },
+    { watch: [queries, archiveQuery, rows.sourceUrl] },
+  );
+}

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

@@ -1,9 +1,14 @@
 import { get } from "@nuxt/ui/runtime/utils/index.js";
+import { computed } from "vue";
 import type {
   TableViewColumn,
   TableViewListResponse,
   TableViewSourceConfig,
 } from "../../../composables/table-view/types";
+import {
+  type ReplaceUrlVariablesContext,
+  resolveUrlVariables,
+} from "../../utils/urlVariables";
 
 type Query = Record<string, unknown>;
 
@@ -20,6 +25,11 @@ export interface TableRowsOptions {
   /** A `TableView.fromSource` table's route, instead of a controller. */
   source?: TableViewSourceConfig;
   columns: TableViewColumn[];
+  /**
+   * The page route a source's `fetchUrl` names: its parameters and query,
+   * read again on every request.
+   */
+  route?: () => ReplaceUrlVariablesContext;
 }
 
 const FILTER_PREFIX = "filter_";
@@ -27,6 +37,7 @@ const SEARCH_KEY = "search";
 const SORT_KEYS = ["sortKey", "sortDirection"];
 const PAGE_KEYS = ["offset", "limit"];
 const DESCENDING = "desc";
+const NO_ROUTE_VALUES: ReplaceUrlVariablesContext = { routeQuery: {} };
 
 type SourceCapabilities = TableViewSourceConfig["capabilities"];
 
@@ -107,26 +118,51 @@ export function processSourceRows<T extends Record<string, unknown>>(
   };
 }
 
+/** A page with no rows: what a source shows while its URL is unresolved. */
+function emptySourcePage<T>(query: Query): TableViewListResponse<T> {
+  return {
+    results: [],
+    total: 0,
+    offset: Number(query.offset) || 0,
+    limit: Number(query.limit) || 0,
+  };
+}
+
 /**
  * Where a table view reads its rows: its data controller's routes, or the
  * route of a `TableView.fromSource` table — which answers `{ results, total }`
  * for the part of the query it handles. A route answering every row leaves
  * the rest to the browser; a route answering one page is taken as it is.
+ *
+ * A source's `{{params.X}}` and `{{query.X}}` tokens are filled from `route`;
+ * while one has no value nothing is requested and the list is empty.
+ * `sourceUrl` is the URL requested, for the caller to list again when it
+ * changes.
  */
 export function useTableRows<T extends Record<string, unknown>>(
   options: TableRowsOptions,
 ) {
   const { api, location, source, columns } = options;
 
+  const sourceUrl = computed(() =>
+    source
+      ? resolveUrlVariables(
+          source.fetchUrl,
+          options.route?.() ?? NO_ROUTE_VALUES,
+        )
+      : undefined,
+  );
+
   const listFromSource = async (
     sourceConfig: TableViewSourceConfig,
     query: Query,
   ): Promise<TableViewListResponse<T>> => {
+    const url = sourceUrl.value;
+    if (!url) return emptySourcePage(query);
     const { capabilities } = sourceConfig;
-    const response = await api<{ results: T[]; total: number }>(
-      sourceConfig.fetchUrl,
-      { query: sourceRouteQuery(query, capabilities) },
-    );
+    const response = await api<{ results: T[]; total: number }>(url, {
+      query: sourceRouteQuery(query, capabilities),
+    });
     if (capabilities.paginate) {
       return {
         ...response,
@@ -171,5 +207,5 @@ export function useTableRows<T extends Record<string, unknown>>(
       ? Promise.resolve(undefined)
       : api<T>(`${location}/get`, { query: { id } });
 
-  return { isSource: !!source, list, countBatch, getRow };
+  return { isSource: !!source, sourceUrl, list, countBatch, getRow };
 }

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

@@ -17,6 +17,8 @@ interface TableDataKeyConfig {
   query: unknown;
   archiveQuery: unknown;
   isSelfManaged: boolean;
+  /** The resolved URL of a `TableView.fromSource` table. */
+  sourceUrl?: string;
 }
 
 const NO_VALUE_COMPARE_MODES = new Set(["is_empty", "is_not_empty"]);
@@ -72,4 +74,5 @@ export const buildTableDataKey = (config: TableDataKeyConfig): string =>
     query: config.query,
     archiveQuery: config.archiveQuery,
     isSelfManaged: config.isSelfManaged,
+    sourceUrl: config.sourceUrl,
   })}`;

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

@@ -35,7 +35,7 @@ import {
   placeholder as placeholderText,
   tooltips,
 } from "@codemirror/view";
-import { tags } from "@lezer/highlight";
+import { CODE_PALETTE } from "./codePalette";
 
 /** A suggestion of the autocomplete (interface-dms `CodeCompletion`). */
 export interface CodeEditorCompletion {
@@ -84,18 +84,7 @@ const LANGUAGES: Record<string, () => Extension> = {
   javascript: () => javascript(),
 };
 
-// The query console's palette, read from the theme's variables so light and
-// dark follow the app.
-const HIGHLIGHT = HighlightStyle.define([
-  { tag: [tags.keyword, tags.operatorKeyword], color: "var(--ui-primary)" },
-  { tag: [tags.string, tags.special(tags.string)], color: "var(--ui-success)" },
-  { tag: [tags.number, tags.bool, tags.null], color: "var(--ui-warning)" },
-  { tag: [tags.comment], color: "var(--ui-text-dimmed)", fontStyle: "italic" },
-  { tag: [tags.propertyName, tags.attributeName], color: "var(--ui-info)" },
-  { tag: [tags.function(tags.variableName)], color: "var(--ui-primary)" },
-  { tag: [tags.tagName], color: "var(--ui-primary)" },
-  { tag: [tags.invalid], color: "var(--ui-error)" },
-]);
+const HIGHLIGHT = HighlightStyle.define(CODE_PALETTE);
 
 const THEME = EditorView.theme({
   "&": {

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

@@ -0,0 +1,59 @@
+// 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";
+import type { Parser } from "@lezer/common";
+import { highlightTree, tagHighlighter } from "@lezer/highlight";
+import { CODE_PALETTE, type CodeTokenStyle } from "./codePalette";
+import { shellParser } from "./shellParser";
+
+/** A run of code drawn in one style; unstyled text has no `style`. */
+export interface CodeToken {
+  text: string;
+  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,
+};
+
+// Each palette entry's position is its class, read back into its style.
+const HIGHLIGHTER = tagHighlighter(
+  CODE_PALETTE.map((entry, index) => ({ tag: entry.tag, class: `${index}` })),
+);
+
+function styleOf(classes: string): CodeTokenStyle {
+  const { color, fontStyle } = CODE_PALETTE[Number(classes.split(" ")[0])];
+  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 }];
+  const tokens: CodeToken[] = [];
+  let cursor = 0;
+  highlightTree(parser.parse(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;
+  });
+  if (cursor < code.length) tokens.push({ text: code.slice(cursor) });
+  return tokens;
+}

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

@@ -0,0 +1,36 @@
+// The languages the code views name, shared by the editor's status line and
+// the read-only snippets. Kept apart from the highlighters so a view can
+// label its language before CodeMirror has loaded.
+
+/** The language a snippet is shown as written in. */
+export const PLAIN_CODE_LANGUAGE = "text";
+
+const LANGUAGE_ALIASES: Record<string, string> = {
+  js: "javascript",
+  ts: "typescript",
+  bash: "shell",
+  sh: "shell",
+  plain: PLAIN_CODE_LANGUAGE,
+};
+
+// The label of each language, as the status line and the snippet head show it.
+const CODE_LANGUAGE_LABELS: Record<string, string> = {
+  json: "JSON",
+  sql: "SQL",
+  html: "HTML",
+  javascript: "JavaScript",
+  typescript: "TypeScript",
+  shell: "Shell",
+  text: "Text",
+};
+
+/** The language an alias (`bash`, `ts`, `plain`) stands for; `text` when unset. */
+export function resolveCodeLanguage(language: string | undefined): string {
+  const name = language?.trim().toLowerCase() || PLAIN_CODE_LANGUAGE;
+  return LANGUAGE_ALIASES[name] ?? name;
+}
+
+/** The label of a language; an unknown one is shown as written. */
+export function codeLanguageLabel(language: string): string {
+  return CODE_LANGUAGE_LABELS[language] ?? language;
+}

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

@@ -0,0 +1,32 @@
+import type { Tag } from "@lezer/highlight";
+import { tags } from "@lezer/highlight";
+
+/**
+ * How one kind of token is drawn: its colour, and italic for comments. A type
+ * rather than an interface, so it binds to a `style` attribute as it is.
+ */
+export type CodeTokenStyle = {
+  color: string;
+  fontStyle?: string;
+};
+
+/** The tokens one entry of the palette colours. */
+export interface CodePaletteEntry extends CodeTokenStyle {
+  tag: Tag | Tag[];
+}
+
+/**
+ * The query console's palette, read from the theme's variables so light and
+ * dark follow the app: the editor and the read-only snippets draw code alike.
+ */
+export const CODE_PALETTE: CodePaletteEntry[] = [
+  { tag: [tags.keyword, tags.operatorKeyword], color: "var(--ui-primary)" },
+  { tag: [tags.string, tags.special(tags.string)], color: "var(--ui-success)" },
+  { tag: [tags.number, tags.bool, tags.null], color: "var(--ui-warning)" },
+  { tag: [tags.comment], color: "var(--ui-text-dimmed)", fontStyle: "italic" },
+  { tag: [tags.propertyName, tags.attributeName], color: "var(--ui-info)" },
+  { tag: [tags.function(tags.variableName)], color: "var(--ui-primary)" },
+  { tag: [tags.tagName], color: "var(--ui-primary)" },
+  { tag: [tags.invalid], color: "var(--ui-error)" },
+  { tag: [tags.special(tags.variableName)], color: "var(--ui-warning)" },
+];

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

@@ -0,0 +1,55 @@
+import type { StreamParser, StringStream } from "@codemirror/language";
+
+// A shell snippet as read for highlighting only: the command of each
+// pipeline step, its flags, quoted strings, variables and comments.
+
+interface ShellState {
+  /** The next word is a command: at a line start, after `|`, `&&` or `;`. */
+  isAtCommand: boolean;
+  /** The line ends with `\`: the next one carries on the same command. */
+  isContinued: boolean;
+}
+
+const COMMENT = /^#.*/;
+const VARIABLE = /^\$(?:\{[^}]*\}|\w+|[?!#$@*-])/;
+const STRING = /^(?:"(?:[^"\\]|\\.)*"?|'[^']*'?)/;
+const FLAG = /^--?[\w-]+/;
+const SEPARATOR = /^(?:\|\|?|&&?|;)/;
+const WORD = /^[^\s|&;"'$]+/;
+const CONTINUATION = /^\\$/;
+
+function readToken(stream: StringStream, state: ShellState): string | null {
+  if (stream.match(COMMENT)) return "comment";
+  if (stream.match(STRING)) return "string";
+  if (stream.match(VARIABLE)) return "variableName.special";
+  if (stream.match(SEPARATOR)) {
+    state.isAtCommand = true;
+    return "operator";
+  }
+  if (stream.match(FLAG)) return "attributeName";
+  if (stream.match(CONTINUATION)) {
+    state.isContinued = true;
+    return null;
+  }
+  if (!stream.match(WORD)) {
+    stream.next();
+    return null;
+  }
+  const isCommand = state.isAtCommand;
+  state.isAtCommand = false;
+  return isCommand ? "keyword" : null;
+}
+
+export const shellParser: StreamParser<ShellState> = {
+  name: "shell",
+  startState: () => ({ isAtCommand: true, isContinued: false }),
+  copyState: (state) => ({ ...state }),
+  token(stream, state) {
+    if (stream.sol()) {
+      state.isAtCommand = !state.isContinued;
+      state.isContinued = false;
+    }
+    if (stream.eatSpace()) return null;
+    return readToken(stream, state);
+  },
+};