@antelopejs/dms 0.7.0 → 0.7.2

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);
+  },
+};

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

@@ -13,34 +13,78 @@ export interface ReplaceUrlVariablesContext {
   response?: Record<string, unknown>;
 }
 
+type EncodeValue = (value: string) => string;
+
+/** How each kind of route value is written into the text. */
+interface TokenEncoding {
+  param: EncodeValue;
+  query: EncodeValue;
+}
+
+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));
+  } catch {
+    return encodeURIComponent(value);
+  }
+};
+
+const URL_ENCODING: TokenEncoding = {
+  param: encodeParam,
+  query: encodeURIComponent,
+};
+const TEXT_ENCODING: TokenEncoding = { param: keepValue, query: keepValue };
+
+function fillRouteTokens(
+  text: string,
+  context: ReplaceUrlVariablesContext,
+  encoding: TokenEncoding,
+): string {
+  return text
+    .replace(PARAM_TOKEN, (match, key) => {
+      const value = context.routeParams?.[key];
+      return value ? encoding.param(value) : match;
+    })
+    .replace(QUERY_TOKEN, (match, key) => {
+      const value = context.routeQuery[key];
+      return typeof value === "string" ? 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,
+): string {
+  if (!response) return text;
+  return text.replace(RESPONSE_TOKEN, (match, key) => {
+    const value = response[key];
+    return typeof value === "string" || typeof value === "number"
+      ? String(value)
+      : match;
+  });
+}
+
 /**
  * Fills the `{{params.X}}`, `{{query.X}}` and (with a response)
- * `{{response.X}}` tokens of a URL. A token with no value is left as written.
+ * `{{response.X}}` tokens of a URL. Route values are percent-encoded, so a
+ * value such as `GET /api/a?b=c` stays one query value or one path segment;
+ * response values are written as answered. A token with no value is left as
+ * written.
  */
 export function replaceUrlVariables(
   url: string,
   context: ReplaceUrlVariablesContext,
 ): string {
-  let processedUrl = url.replace(
-    PARAM_TOKEN,
-    (match, key) => context.routeParams?.[key] || match,
+  return fillResponseTokens(
+    fillRouteTokens(url, context, URL_ENCODING),
+    context.response,
   );
-
-  processedUrl = processedUrl.replace(QUERY_TOKEN, (match, key) => {
-    const value = context.routeQuery[key];
-    return typeof value === "string" ? value : match;
-  });
-
-  if (context.response) {
-    processedUrl = processedUrl.replace(RESPONSE_TOKEN, (match, key) => {
-      const value = context.response?.[key];
-      return typeof value === "string" || typeof value === "number"
-        ? String(value)
-        : match;
-    });
-  }
-
-  return processedUrl;
 }
 
 /** Whether a URL still names a token: written so, or left unresolved. */
@@ -61,3 +105,16 @@ export function resolveUrlVariables(
   const resolved = replaceUrlVariables(url, context);
   return hasUrlVariables(resolved) ? undefined : resolved;
 }
+
+/**
+ * A plain value (not a URL) with its route tokens filled as they are, without
+ * encoding, or `undefined` while one is left: a submit default such as
+ * `{{query.status}}` is a field value.
+ */
+export function resolveTextVariables(
+  text: string,
+  context: ReplaceUrlVariablesContext,
+): string | undefined {
+  const resolved = fillRouteTokens(text, context, TEXT_ENCODING);
+  return hasUrlVariables(resolved) ? undefined : resolved;
+}