@antelopejs/dms 0.7.21 → 0.8.0

package/frontend-vue/layers/dms-ui/app/build/composables/chart/apexTheme.ts

@@ -18,9 +18,19 @@ const DATA_LABEL_FONT_SIZE = "11px";
 const DATA_LABEL_FONT_WEIGHT = 600;
 const TOOLTIP_DATETIME_FORMAT = "dd MMM yyyy";
 const HOVER_MARKER_SIZE = 5;
+/** Grows a visible point on hover instead of setting a size below its own. */
+const HOVER_POINT_SIZE_OFFSET = 2;
+/** A scatter is nothing but its points, so it draws them without `pointSize`. */
+const DEFAULT_POINT_SIZE = 6;
+const POINT_MARKER_TYPES: ChartType[] = ["scatter"];
+/** Half a data label's box and a gap: lifts the label off the point it names. */
+const POINT_LABEL_CLEARANCE = 11;
+const HALF = 2;
 const HEAD_MARKER_SIZE = 5;
 const SOLID_GRID = 0;
 const HEAD_MARKER_TYPES: ChartType[] = ["line", "area"];
+/** A radar draws its own polygon grid; the cartesian one would cross the card. */
+const OWN_GRID_TYPES: ChartType[] = ["radar"];
 
 /** Theme colors every section of an Apex config reads once per build. */
 export interface ApexThemeColors {
@@ -83,7 +93,10 @@ export function buildGrid(
   theme: ApexThemeColors,
 ): Record<string, unknown> {
   return {
-    show: !isCircular && (input.showGrid ?? true),
+    show:
+      !isCircular &&
+      !OWN_GRID_TYPES.includes(input.type) &&
+      (input.showGrid ?? true),
     borderColor: theme.border,
     strokeDashArray: SOLID_GRID,
     padding: GRID_PADDING,
@@ -140,6 +153,13 @@ export function buildMarkers(
   colors: string[],
   theme: ApexThemeColors,
 ): Record<string, unknown> {
+  if (POINT_MARKER_TYPES.includes(input.type)) {
+    return {
+      size: pointSize(input),
+      strokeWidth: 0,
+      hover: { sizeOffset: HOVER_POINT_SIZE_OFFSET },
+    };
+  }
   const showsHead = HEAD_MARKER_TYPES.includes(input.type) && !input.stacked;
   return {
     size: 0,
@@ -151,18 +171,55 @@ export function buildMarkers(
   };
 }
 
-/** Value labels in mono, without Apex's default drop shadow. */
+function pointSize(input: UseApexChartInput): number {
+  return input.pointSize ?? DEFAULT_POINT_SIZE;
+}
+
+/**
+ * How far a data label moves up: Apex centres it on its point, which hides a
+ * scatter's point under its own label.
+ */
+export function dataLabelOffset(input: UseApexChartInput): number {
+  if (!POINT_MARKER_TYPES.includes(input.type)) return 0;
+  return -(pointSize(input) / HALF + POINT_LABEL_CLEARANCE);
+}
+
+/** Where Apex is drawing a data label. */
+interface DataLabelContext {
+  seriesIndex: number;
+  dataPointIndex: number;
+  w: { config: { series: ChartSeries[] } };
+}
+
+/** A point's own `label` when it has one, else the value Apex would print. */
+function pointLabel(value: unknown, context: DataLabelContext): unknown {
+  const point =
+    context.w.config.series[context.seriesIndex]?.data[context.dataPointIndex];
+  if (typeof point !== "object" || point === null || !("label" in point)) {
+    return value;
+  }
+  return point.label || value;
+}
+
+/**
+ * Value labels in mono, without Apex's default drop shadow. A circular chart
+ * keeps Apex's own percent formatter: its series hold bare numbers.
+ */
 export function buildDataLabels(
   enabled: boolean,
   theme: ApexThemeColors,
+  isCircular = false,
+  offsetY = 0,
 ): Record<string, unknown> {
   return {
     enabled,
+    offsetY,
     dropShadow: { enabled: false },
     style: {
       fontSize: DATA_LABEL_FONT_SIZE,
       fontFamily: theme.monoFont,
       fontWeight: DATA_LABEL_FONT_WEIGHT,
     },
+    ...(isCircular ? {} : { formatter: pointLabel }),
   };
 }

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/confirmDialogTexts.ts

@@ -3,7 +3,10 @@ import type {
   ConfirmDialogSecondaryAction,
   ConfirmDialogSecondaryTarget,
 } from "#dms-core/app/types/confirm-dialog";
-import { interpolateUrl } from "#dms-core/app/utils/url-interpolation";
+import {
+  interpolateRowText,
+  interpolateUrl,
+} from "#dms-core/app/utils/url-interpolation";
 import { readTranslationKey } from "#dms-core/app/composables/translation/useTranslation";
 import type {
   ConfirmOptions,
@@ -11,6 +14,12 @@ import type {
 } from "../../../composables/confirm/types";
 import { processFieldI18n } from "../../utils/fieldOptionsI18n";
 import { interpolateLiteral } from "../../utils/literalText";
+import {
+  namesPageValue,
+  resolveLinkVariables,
+  resolveTextVariables,
+} from "../../utils/urlVariables";
+import { currentPageUrlValues } from "../page/pageUrlValues";
 
 /** `t` as vue-i18n gives it: named parameters, then the plural count. */
 export type ConfirmTranslate = (
@@ -41,22 +50,36 @@ export type SecondaryTargetRun = (
   target: ConfirmDialogSecondaryTarget,
 ) => Promise<void> | void;
 
+// The page's `{{params.X}}` / `{{query.X}}` come first, as on an action's own
+// target; the route is only read for a text holding such a token.
+function withPageLink(url: string): string {
+  return namesPageValue(url)
+    ? resolveLinkVariables(url, currentPageUrlValues())
+    : url;
+}
+
+function withPageText(text: string): string | undefined {
+  return namesPageValue(text)
+    ? resolveTextVariables(text, currentPageUrlValues())
+    : text;
+}
+
 /**
  * A dialog's secondary target with its URL (and file name) filled in with
- * the same parameters as its texts.
+ * the page's values and, as `{{row.X}}`, the same parameters as its texts.
  */
 function resolveSecondaryTarget(
   target: ConfirmDialogSecondaryTarget,
   params: Record<string, unknown>,
 ): ConfirmDialogSecondaryTarget {
-  const url = interpolateUrl(target.url, params);
+  const url = interpolateUrl(withPageLink(target.url), params);
   if (target.type !== "download" || target.filename === undefined) {
     return { ...target, url };
   }
   return {
     ...target,
     url,
-    filename: interpolateLiteral(target.filename, params),
+    filename: withPageText(interpolateRowText(target.filename, params)),
   };
 }
 

package/frontend-vue/layers/dms-ui/app/build/composables/confirm/useActionConfirm.ts

@@ -15,12 +15,17 @@ import {
 } from "./confirmDialogTexts";
 import type { DownloadFetch } from "../../utils/fileDownload";
 import { secondaryTargetRunner } from "./secondaryTarget";
+import {
+  namesPageValue,
+  resolveLinkVariables,
+} from "../../utils/urlVariables";
+import { currentPageUrlValues } from "../page/pageUrlValues";
 
 /** What an action asks its confirmation with. */
 export interface ActionConfirmRequest {
   /** The row the action targets: its fields fill the texts and `from` URL. */
   row?: Record<string, unknown>;
-  /** Fill-ins of a `from` URL besides the row's fields (`{id}`). */
+  /** Fill-ins of a `from` URL besides the row's fields (`{{row.id}}`). */
   urlParams?: Record<string, unknown>;
   /**
    * The look of the action, where the dialog leaves it out (an archive's
@@ -55,7 +60,10 @@ export function useActionConfirm() {
     request: ActionConfirmRequest,
   ): Promise<ConfirmDialog | undefined> => {
     if (!isConfirmFrom(declared)) return declared;
-    const url = interpolateUrl(declared.from, {
+    const from = namesPageValue(declared.from)
+      ? resolveLinkVariables(declared.from, currentPageUrlValues())
+      : declared.from;
+    const url = interpolateUrl(from, {
       ...request.row,
       ...request.urlParams,
     });

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

@@ -322,13 +322,8 @@ function renderRelation(value: unknown, options: unknown) {
 }
 
 function renderCascaderRelation(value: unknown, options: unknown) {
-  const { t } = useI18n();
   const opts = options as CascaderRelationOptions | undefined;
 
-  if (opts?.multiple && Array.isArray(value)) {
-    return t("dms.form.cascader.selected_count", { count: value.length });
-  }
-
   if (!value) return value;
 
   return h(CascaderPath, {

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

@@ -0,0 +1,23 @@
+import type { FormFieldOrGroup } from "../../../composables/form/types/field";
+import { isFieldGroup } from "../../../composables/form/types/field";
+
+function entryOrder(entry: FormFieldOrGroup): number | undefined {
+  return isFieldGroup(entry) ? entry.order : undefined;
+}
+
+/**
+ * A form's entries with its groups' `order` applied: the groups giving one
+ * trade the places they were declared at, sorted on it (equal orders keep
+ * their declaration order); every other entry keeps its place.
+ */
+export function orderFormEntries<T extends FormFieldOrGroup>(
+  entries: readonly T[],
+): T[] {
+  const ordered = entries
+    .filter((entry) => entryOrder(entry) !== undefined)
+    .sort((left, right) => entryOrder(left)! - entryOrder(right)!);
+  let next = 0;
+  return entries.map((entry) =>
+    entryOrder(entry) === undefined ? entry : ordered[next++]!,
+  );
+}

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

@@ -6,10 +6,10 @@
  *   it has somewhere to go back to, then "Unsaved changes" with Discard and
  *   Save.
  * - `action`: a form that does something each time (send a notification,
- *   invite someone, run a job). Reset and the form's own submit label once a
- *   value changed; untouched — pre-filled or not —, no buttons on a page, and
- *   Cancel beside a held submit in a drawer or a modal. It empties after a
- *   successful submit.
+ *   invite someone, run a job). Its own submit label, always ready: what it
+ *   holds untouched, its defaults included, is a payload too. Beside it,
+ *   Reset once a value changed, Cancel before that in a drawer or a modal.
+ *   It empties after a successful submit.
  */
 export type FormKind = "record" | "action";
 
@@ -83,21 +83,25 @@ function recordSaveBar(context: SaveBarContext): SaveBarState {
 }
 
 /**
- * An action form's bar: Reset and its submit once a value changed. Before
- * that, a form in a drawer or a modal offers Cancel beside its held submit —
- * the modal's only way out and the proof it sends something —, a page form
- * nothing; a form nothing in which can be changed, its submit alone.
+ * An action form's bar: its submit, never held, so a pre-filled form sends as
+ * it is. Beside it, Reset once a value changed; before that, Cancel in a
+ * drawer or a modal, its only way out. A form nothing in which can be changed
+ * has nothing to reset.
  */
 function actionSaveBar(context: SaveBarContext): SaveBarState {
-  const bar = { showsStatus: false, showsSubmit: true, isHidden: false };
-  if (!context.resettable) return { ...bar, isSubmitHeld: false };
-  if (context.dirty) {
-    return { ...bar, secondary: "discard", isSubmitHeld: false };
+  const bar: SaveBarState = {
+    showsStatus: false,
+    showsSubmit: true,
+    isSubmitHeld: false,
+    isHidden: false,
+  };
+  if (context.dirty && context.resettable) {
+    return { ...bar, secondary: "discard" };
   }
-  if (!context.cancellable) {
-    return { ...HIDDEN_BAR, showsStatus: false };
+  if (!context.dirty && context.cancellable) {
+    return { ...bar, secondary: "cancel" };
   }
-  return { ...bar, secondary: "cancel", isSubmitHeld: true };
+  return bar;
 }
 
 const SAVE_BARS: Record<FormKind, (context: SaveBarContext) => SaveBarState> = {

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

@@ -5,9 +5,33 @@ import { HTTP_FORBIDDEN } from "#dms-core/app/utils/http-status";
 /**
  * Why a form could not load the record it edits: `forbidden` when the server
  * refused the caller the read (a role that may edit rows but not view them),
- * `error` for anything else (a network failure, a server error, a row gone).
+ * `missing` when its address lacks the record's id (a page reached without
+ * its `?id=`), `error` for anything else (a network failure, a server error,
+ * a row gone).
  */
-export type FormLoadFailure = "forbidden" | "error";
+export type FormLoadFailure = "forbidden" | "missing" | "error";
+
+/** What a form knows of the record it is about, as far as `missing` goes. */
+export interface FormRecordAddress {
+  requiresRecord?: boolean;
+  fetchUrl?: string;
+  /** `fetchUrl` with its route values filled; unset while one is missing. */
+  resolvedFetchUrl?: string;
+}
+
+/**
+ * `missing` for a form about one record whose address names no record yet:
+ * its fields would only hold their defaults, which read as a record.
+ */
+export function missingRecordFailure(
+  address: FormRecordAddress,
+): FormLoadFailure | null {
+  const isMissing =
+    !!address.requiresRecord &&
+    !!address.fetchUrl &&
+    !address.resolvedFetchUrl;
+  return isMissing ? "missing" : null;
+}
 
 /** The cached load of a form's record (`useDmsAsyncData`), as far as it is read. */
 export interface FormLoadSource<T> {

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

@@ -0,0 +1,41 @@
+import {
+  namesPageValue,
+  type ReplaceUrlVariablesContext,
+  resolveLinkVariables,
+  resolveUrlVariables,
+} from "../../utils/urlVariables";
+
+/**
+ * The values of the page being shown that a `{{params.X}}` / `{{query.X}}`
+ * token names: the route parameters of the DMS page matching the URL, and its
+ * query. Read when called, so it follows the URL as it changes.
+ */
+export function currentPageUrlValues(): ReplaceUrlVariablesContext {
+  const route = useDmsRoute();
+  return {
+    routeParams: useSiteLayout().findMatchingRoute(route.path)?.params,
+    routeQuery: route.query as Record<string, unknown>,
+  };
+}
+
+/**
+ * A link declared on a block (`to`) with the page's tokens filled, as a page
+ * header button's: a query pair the page has no value for is left out. The
+ * route is only read for a link holding a token.
+ */
+export function pageLink(to: string): string;
+export function pageLink(to: string | undefined): string | undefined;
+export function pageLink(to: string | undefined): string | undefined {
+  if (!to || !namesPageValue(to)) return to;
+  return resolveLinkVariables(to, currentPageUrlValues());
+}
+
+/**
+ * A route a field or block requests (`searchUrl`, `rotateUrl`, …) with the
+ * page's tokens filled, or `undefined` while one has no value, as a block's
+ * `fetchUrl`.
+ */
+export function pageRequestUrl(url: string | undefined): string | undefined {
+  if (!url || !namesPageValue(url)) return url;
+  return resolveUrlVariables(url, currentPageUrlValues());
+}

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

@@ -1,5 +1,5 @@
 import type { LocationQueryValue } from "#dms/frontend-module";
-import { replaceUrlVariables } from "../../utils/urlVariables";
+import { resolveLinkVariables } from "../../utils/urlVariables";
 
 type RouteQuery = Record<string, LocationQueryValue | LocationQueryValue[]>;
 
@@ -23,7 +23,7 @@ export function resolveFormSuccessTarget(
   { url, preserveQuery }: FormSuccessParams,
   route: FormSuccessRoute,
 ): { path: string; query?: RouteQuery } {
-  const path = replaceUrlVariables(url, {
+  const path = resolveLinkVariables(url, {
     routeParams: route.params,
     routeQuery: route.query,
   });

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

@@ -1,5 +1,6 @@
 import { get } from "@nuxt/ui/runtime/utils/index.js";
 import { computed } from "vue";
+import { interpolateUrl } from "#dms-core/app/utils/url-interpolation";
 import type {
   TableViewColumn,
   TableViewListResponse,
@@ -54,7 +55,6 @@ const DESCENDING = "desc";
  */
 export const LIVE_HELD_AT_QUERY_KEY = "liveHeldAt";
 const NO_ROUTE_VALUES: ReplaceUrlVariablesContext = { routeQuery: {} };
-const ROW_ID_TOKEN = "{id}";
 
 type SourceCapabilities = TableViewSourceConfig["capabilities"];
 
@@ -251,10 +251,8 @@ export function useTableRows<T extends Record<string, unknown>>(
     id: string,
   ): Promise<T | undefined> => {
     const url = resolveUrlVariables(
-      sourceConfig.fetchRowUrl?.replaceAll(
-        ROW_ID_TOKEN,
-        encodeURIComponent(id),
-      ),
+      sourceConfig.fetchRowUrl &&
+        interpolateUrl(sourceConfig.fetchRowUrl, { id }),
       options.route?.() ?? NO_ROUTE_VALUES,
     );
     return url ? api<T>(url) : Promise.resolve(undefined);

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

@@ -102,20 +102,15 @@ export const useTableViewConfig = <T extends Data>(
       .map((col) => ({ ...col, header: processI18n(col.header) })),
   );
 
-  // Config-derived (SSR-safe; the registry is client-only): the implicit `table`
-  // display (unless `tableDisplay` is false) plus explicit `displays`. Built-in defaults
+  // Config-derived (SSR-safe; the registry is client-only): the listed
+  // `displays`, else the built-in `table` alone. Built-in defaults
   // (selfManagedData/capabilities) are merged per id.
-  const resolvedDisplays: TableViewDisplayConfig[] = (() => {
-    const list: TableViewDisplayConfig[] =
-      config.tableDisplay === false ? [] : [{ id: TABLE_DISPLAY_ID }];
-    for (const display of config.displays ?? []) {
-      if (display.id === TABLE_DISPLAY_ID) continue;
-      list.push(display);
-    }
-    return list.map(withBuiltinDefaults);
-  })();
+  const resolvedDisplays: TableViewDisplayConfig[] = (
+    config.displays ?? [{ id: TABLE_DISPLAY_ID }]
+  ).map(withBuiltinDefaults);
 
-  const defaultDisplay = config.defaultDisplay ?? TABLE_DISPLAY_ID;
+  const defaultDisplay =
+    config.defaultDisplay ?? resolvedDisplays[0]?.id ?? TABLE_DISPLAY_ID;
 
   const initialVisibility = buildInitialColumnVisibility(config.columns ?? []);
 

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

@@ -1,3 +1,4 @@
+import { namesRowField } from "#dms-core/app/utils/url-interpolation";
 import {
   fillFormPageUrl,
   type FormContainer,
@@ -91,7 +92,6 @@ interface BulkActionConfig {
 /** Runs a confirmed action from inside its dialog (see `onConfirm`). */
 type ConfirmedRun = NonNullable<ConfirmOptions["onConfirm"]>;
 
-const ROW_URL_PLACEHOLDER = /\{[^}]+\}/;
 /** Options of a delete: from the archive, it is a permanent one. */
 interface DeleteRowsOptions {
   permanently?: boolean;
@@ -634,7 +634,7 @@ export const useTableRowActions = <T extends Data>(
    * reaches: a `from` dialog is worded for one row, so several rows keep the
    * generic confirmation. Undefined when none applies.
    */
-  // A `from` URL naming a row (`{id}`, `{_id}`…) is worded for that row
+  // A `from` URL naming a row (`{{row.id}}`, `{{row._id}}`…) is worded for that row
   // alone; one naming none receives the rows as `?ids=`, one or several, like
   // the `from` of a bulk custom action.
   const declaredBulkConfirm = (
@@ -643,7 +643,7 @@ export const useTableRowActions = <T extends Data>(
   ): ActionConfirm | undefined => {
     const declared = normalizeActionConfig(actionConfig).confirm;
     if (!declared || !isConfirmFrom(declared)) return declared;
-    if (ROW_URL_PLACEHOLDER.test(declared.from)) {
+    if (namesRowField(declared.from)) {
       return ids.length === 1 ? declared : undefined;
     }
     return {

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

@@ -3,6 +3,8 @@
 // bare `<a href="#…">` (an Inertia visit would reload the page to scroll), an
 // absolute URL opens in a new tab, and everything else is a DMS route.
 
+import { pageLink } from "../composables/page/pageUrlValues";
+
 export type LinkKind = "internal" | "anchor" | "external";
 
 const EXTERNAL_LINK_PATTERN = /^(?:[a-z][a-z\d+.-]*:|\/\/)/i;
@@ -20,12 +22,14 @@ export const EXTERNAL_LINK_ATTRIBUTES = {
 } as const;
 
 /**
- * Props for a `UButton` (or `ULink`) following `to`: an external target opens
- * in a new tab, the others navigate in place.
+ * Props for a `UButton` (or `ULink`) following `to`, its page tokens
+ * (`{{params.X}}`, `{{query.X}}`) filled: an external target opens in a new
+ * tab, the others navigate in place.
  */
 export function buttonLinkProps(
-  to: string | undefined,
+  declared: string | undefined,
 ): Record<string, string> {
+  const to = pageLink(declared);
   if (!to) return {};
   return linkKind(to) === "external"
     ? { to, ...EXTERNAL_LINK_ATTRIBUTES }

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

@@ -1,11 +1,24 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+
+// Every token is `{{<scope>.<key>}}`, spaces inside the braces allowed, as the
+// server's filter tokens (`{{ user.id }}`) are.
+//
 // `{{params.id}}` takes the bare name, which on a route repeating a placeholder
 // is its last occurrence — the row id of a form page. The `:<n>` suffix reaches
 // a specific occurrence, `{{params.id:1}}` being the id of the page carrying the
 // table view (see extractRouteParams).
-const PARAM_TOKEN = /\{\{params\.(\w+(?::\d+)?)\}\}/g;
+const PARAM_KEY = String.raw`params\.(\w+(?::\d+)?)`;
 // A query key may carry dots and dashes: a period selector writes `<id>.period`.
-const QUERY_TOKEN = /\{\{query\.([\w.-]+)\}\}/g;
-const RESPONSE_TOKEN = /\{\{response\.(\w+)\}\}/g;
+const QUERY_KEY = String.raw`query\.([\w.-]+)`;
+// A response key is a path into the answered body: `{{response.data.id}}`.
+const RESPONSE_KEY = String.raw`response\.([\w.-]+)`;
+
+const tokenPattern = (key: string, flags = "g"): RegExp =>
+  new RegExp(String.raw`\{\{\s*${key}\s*\}\}`, flags);
+
+const PARAM_TOKEN = tokenPattern(PARAM_KEY);
+const QUERY_TOKEN = tokenPattern(QUERY_KEY);
+const RESPONSE_TOKEN = tokenPattern(RESPONSE_KEY);
 const TOKEN_OPENING = "{{";
 
 export interface ReplaceUrlVariablesContext {
@@ -63,8 +76,8 @@ function fillResponseTokens(
   response: Record<string, unknown> | undefined,
 ): string {
   if (!response) return text;
-  return text.replace(RESPONSE_TOKEN, (match, key) => {
-    const value = response[key];
+  return text.replace(RESPONSE_TOKEN, (match, key: string) => {
+    const value: unknown = get(response, key);
     return typeof value === "string" || typeof value === "number"
       ? String(value)
       : match;
@@ -122,10 +135,20 @@ export function resolveTextVariables(
 
 // A route token left without a value: `{{params.id}}`, `{{query.workspace}}`,
 // `{{query.sales.period}}` (a query key may carry dots and dashes, as above).
-const UNRESOLVED_ROUTE_TOKEN =
-  /\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}/g;
-const UNRESOLVED_ROUTE_VALUE =
-  /^\{\{(?:params\.\w+(?::\d+)?|query\.[\w.-]+)\}\}$/;
+const ROUTE_KEY = `(?:${PARAM_KEY}|${QUERY_KEY})`;
+const UNRESOLVED_ROUTE_TOKEN = tokenPattern(ROUTE_KEY);
+const UNRESOLVED_ROUTE_VALUE = new RegExp(
+  `^${tokenPattern(ROUTE_KEY, "").source}$`,
+);
+
+/**
+ * Whether a text names a value of the page (`{{params.X}}`, `{{query.X}}`):
+ * the route is only read for one that does.
+ */
+export function namesPageValue(text: string): boolean {
+  return new RegExp(UNRESOLVED_ROUTE_TOKEN.source).test(text);
+}
+
 const QUERY_SEPARATOR = "?";
 const FRAGMENT_SEPARATOR = "#";
 const PAIR_SEPARATOR = "&";

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

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { pageLink } from "../../build/composables/page/pageUrlValues";
 import { computed, ref, resolveComponent } from "vue";
 import DmsActivityItem from "../activity/ActivityItem.vue";
 import DmsBlockActions, {
@@ -236,6 +237,11 @@ const scrollArea = computed(() =>
 const dayHeadClass = computed(
   () => props.fillHeight && "sticky top-0 z-[1] bg-(--dms-surface-card)",
 );
+// …and the "Show N more" button at its foot, where entries taller than the
+// row would otherwise push it out of sight.
+const foldClass = computed(
+  () => props.fillHeight && "sticky bottom-0 z-[1] bg-(--dms-surface-card)",
+);
 
 const Wrapper = props.card ? resolveComponent("DmsCard") : "div";
 const wrapperProps = computed(() =>
@@ -365,13 +371,14 @@ const wrapperProps = computed(() =>
             :unread="item.unread"
             :mono="props.mono"
             :wrap="props.wrap"
-            :to="item.to"
+            :to="pageLink(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"
+          :class="foldClass"
         >
           <UButton
             :label="foldLabel"

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

@@ -1,19 +1,22 @@
 <script setup lang="ts">
 import { computed } from "vue";
 import DmsIconWell, { type IconWellSize } from "../icon-well/IconWell.vue";
-import type { SemanticColor } from "../../utils/semanticTint";
+import {
+  BANNER_TONE_ICONS,
+  type BannerTone,
+} from "../../utils/bannerToneIcons";
 
 // DMS-styled notice banner (design .banner): a left-to-right tinted wash over
 // the card surface with a boxed leading icon, used for module beta / info
 // notices. Wraps UAlert so we keep its a11y + slots while pinning the exact
 // reference look. The `cli` slot hosts the optional inset command box
 // (compose with DmsCopyButton), `actions` the right-aligned buttons.
-type BannerTone = Exclude<SemanticColor, "neutral">;
 type BannerSize = "sm" | "md";
 
 interface BannerProps {
   title?: string;
   description?: string;
+  /** Defaults to the tone's icon. */
   icon?: string;
   /** Colour of the wash and the icon well. */
   tone?: BannerTone;
@@ -39,7 +42,7 @@ interface BannerSlots {
 const props = withDefaults(defineProps<BannerProps>(), {
   title: undefined,
   description: undefined,
-  icon: "i-ph-warning",
+  icon: undefined,
   tone: "warning",
   size: "md",
   dismissible: false,
@@ -99,6 +102,8 @@ const alertUi = computed(() => ({
   actions: `items-center gap-2 mt-0 ${slots.actions ? "max-sm:basis-full max-sm:flex-wrap" : ""}`,
 }));
 
+const leadingIcon = computed(() => props.icon ?? BANNER_TONE_ICONS[props.tone]);
+
 function onOpenChange(open: boolean) {
   if (!open) emit("dismiss");
 }
@@ -116,7 +121,7 @@ function onOpenChange(open: boolean) {
     @update:open="onOpenChange"
   >
     <template #leading>
-      <DmsIconWell :icon="icon" :tone="tone" :size="SIZE_WELL[size]" />
+      <DmsIconWell :icon="leadingIcon" :tone="tone" :size="SIZE_WELL[size]" />
     </template>
 
     <template v-if="slots.description || slots.cli" #description>