@antelopejs/dms 0.7.14 → 0.7.16

package/frontend-vue/layers/dms-layout/app/emails/components/EmailLayout.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { emailStyles } from "./index";
+import { emailLogoUrl, emailStyles } from "./index";
 
 interface EmailAppConfig {
   branding?: {
@@ -11,38 +11,61 @@ interface EmailAppConfig {
   };
 }
 
-defineProps<{
-  title: string;
-  lang?: string;
-}>();
+const props = withDefaults(
+  defineProps<{
+    /** Shown as the email's heading; no heading when omitted. */
+    title?: string;
+    lang?: string;
+    /** Inbox preview text, hidden in the message body. */
+    preheader?: string;
+    /** Draws the separator between the content and the `footer` slot. */
+    divider?: boolean;
+    logoAlt?: string;
+    /**
+     * Leaves the logo out unless a mail client can load it: an absolute
+     * public http(s) URL, not an SVG (see `emailLogoUrl`).
+     */
+    publicLogoOnly?: boolean;
+  }>(),
+  { divider: true, logoAlt: "Logo", publicLogoOnly: false },
+);
 
 const appConfig = useDmsAppConfig() as EmailAppConfig;
 const runtimeConfig = useDmsRuntimeConfig();
 
 const logoPath = appConfig.branding?.logo?.default?.light;
 const clientBaseUrl = runtimeConfig.public.dms?.clientBaseUrl ?? "";
-const logoUrl = logoPath?.startsWith("/")
-  ? `${clientBaseUrl}${logoPath}`
-  : logoPath;
+const logoUrl = props.publicLogoOnly
+  ? emailLogoUrl(logoPath, clientBaseUrl)
+  : logoPath?.startsWith("/")
+    ? `${clientBaseUrl}${logoPath}`
+    : logoPath;
 </script>
 
 <template>
   <EHtml :lang="lang ?? 'en'">
-    <EHead />
+    <EHead>
+      <slot name="head" />
+    </EHead>
     <EBody :style="emailStyles.main">
+      <EPreview v-if="preheader">{{ preheader }}</EPreview>
       <EContainer :style="emailStyles.container">
         <ESection :style="emailStyles.card">
           <ESection v-if="logoUrl" :style="emailStyles.logo">
-            <EImg :src="logoUrl" alt="Logo" :style="emailStyles.logoImage" />
+            <EImg
+              :src="logoUrl"
+              :alt="logoAlt"
+              :style="emailStyles.logoImage"
+            />
           </ESection>
 
-          <EHeading as="h1" :style="emailStyles.heading">
+          <EHeading v-if="title" as="h1" :style="emailStyles.heading">
             {{ title }}
           </EHeading>
 
           <slot />
 
-          <EHr :style="emailStyles.divider" />
+          <EHr v-if="divider" :style="emailStyles.divider" />
 
           <slot name="footer" />
         </ESection>

package/frontend-vue/layers/dms-layout/app/emails/components/email-logo.ts

@@ -0,0 +1,54 @@
+/**
+ * Which logo URL an email may carry. A recipient's mail client fetches the
+ * image from the internet, so it needs an absolute public http(s) URL; Gmail
+ * and Outlook also refuse SVG. A logo that fails either test is left out
+ * rather than drawn as a broken image.
+ */
+
+const ROOT_PATH = "/";
+const WEB_PROTOCOLS = ["http:", "https:"];
+const SVG_PATH = /\.svg(?:[?#]|$)/i;
+const LOCAL_HOSTS = ["localhost", "0.0.0.0", "[::]", "[::1]"];
+const LOCAL_SUFFIXES = [".localhost", ".local", ".internal"];
+const PRIVATE_ADDRESSES = [
+  /^127\./,
+  /^10\./,
+  /^192\.168\./,
+  /^172\.(1[6-9]|2\d|3[01])\./,
+  /^169\.254\./,
+  /^\[f[cd][0-9a-f]{0,2}:/i,
+  /^\[fe[89ab][0-9a-f]:/i,
+];
+
+function absoluteUrl(path: string, clientBaseUrl: string): URL | null {
+  const source = path.startsWith(ROOT_PATH) ? `${clientBaseUrl}${path}` : path;
+  try {
+    return new URL(source);
+  } catch {
+    return null;
+  }
+}
+
+/** Whether a mail client out on the internet can reach `hostname`. */
+export function isPublicEmailHost(hostname: string): boolean {
+  const name = hostname.toLowerCase();
+  if (LOCAL_HOSTS.includes(name)) return false;
+  if (LOCAL_SUFFIXES.some((suffix) => name.endsWith(suffix))) return false;
+  return !PRIVATE_ADDRESSES.some((pattern) => pattern.test(name));
+}
+
+/**
+ * The logo URL an email may use: `logoPath` made absolute against
+ * `clientBaseUrl` when it starts with `/`, or `""` when it is an SVG, not
+ * http(s), or served from a host a mail client cannot reach (localhost, a
+ * private address).
+ */
+export function emailLogoUrl(
+  logoPath: string | undefined,
+  clientBaseUrl: string,
+): string {
+  if (!logoPath || SVG_PATH.test(logoPath)) return "";
+  const url = absoluteUrl(logoPath, clientBaseUrl);
+  if (!url || !WEB_PROTOCOLS.includes(url.protocol)) return "";
+  return isPublicEmailHost(url.hostname) ? url.href : "";
+}

package/frontend-vue/layers/dms-layout/app/emails/components/index.ts

@@ -1,3 +1,5 @@
+export * from "./email-logo";
+
 export const emailFontFamily =
   '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif';
 

package/frontend-vue/layers/dms-ui/app/build/components/period/PeriodRangeCalendar.vue

@@ -20,7 +20,10 @@ import {
   RangeCalendarRoot,
   type DateRange,
 } from "reka-ui";
-import type { CalendarRange } from "../../composables/period/periodDisplay";
+import {
+  type CalendarRange,
+  isBeyondMaxDays,
+} from "../../composables/period/periodDisplay";
 
 // Two-month range calendar of the period selector (design .cal): a
 // continuous accent strip for the selected range with filled endpoints, and
@@ -32,6 +35,11 @@ interface Props {
   weekStartsOn?: number;
   numberOfMonths?: number;
   readonly?: boolean;
+  /**
+   * The longest range, in days, that can be picked: once a start day is
+   * picked, the days that would exceed it are disabled.
+   */
+  maxDays?: number;
 }
 
 type WeekStart = 0 | 1 | 2 | 3 | 4 | 5 | 6;
@@ -107,6 +115,13 @@ function onUpdate(value: DateRange | null) {
   emit("pending", pendingStart.value);
 }
 
+function isDateDisabled(date: DateValue): boolean {
+  const picked = pendingStart.value;
+  return (
+    !!picked && isBeyondMaxDays(date as CalendarDate, picked, props.maxDays)
+  );
+}
+
 function onPlaceholder(value: DateValue) {
   // Picking a start day re-anchors reka's view on it; with two months on
   // screen that would shift the grid under the pointer.
@@ -210,6 +225,7 @@ const weekStart = computed(() => props.weekStartsOn as WeekStart);
     :number-of-months="numberOfMonths"
     :max-value="todayDate"
     :readonly="readonly"
+    :is-date-disabled="isDateDisabled"
     weekday-format="short"
     prevent-deselect
     class="flex gap-6"

package/frontend-vue/layers/dms-ui/app/build/components/table/FiltersRow.vue

@@ -9,6 +9,7 @@ import type {
   TableColumn,
   TableFilter,
   TableSharedData,
+  TableUrlFilter,
 } from "./Table.vue";
 import TableMenuFilter from "./MenuFilter.vue";
 import { formatFilterValue } from "../../composables/table/utils/formatFilterValue";
@@ -126,6 +127,17 @@ const deleteFilter = (index: number) => {
   tableSharedData?.value?.deleteFilter(index);
 };
 
+const urlFilters = computed(() => tableSharedData?.value?.urlFilters ?? []);
+
+const urlFilterLabel = (filter: TableUrlFilter): string =>
+  (filter.label && processI18n(filter.label)) ||
+  getColumn(filter.accessorKey)?.label ||
+  filter.param;
+
+const removeUrlFilter = (filter: TableUrlFilter) => {
+  tableSharedData?.value?.emits("removeUrlFilter", filter.param);
+};
+
 // The "clear all" action: offered while something narrows the rows, named
 // after what it clears (filters, search or both).
 const clearable = computed(
@@ -171,9 +183,9 @@ const displayValue = (filter: TableFilter): string => {
 };
 
 // The whole filter in words, for a chip shrunk to an ellipsis.
-const chipTitle = (filter: TableFilter): string =>
+const chipTitle = (filter: TableFilter, label?: string): string =>
   [
-    getColumn(filter.accessorKey)?.label,
+    label ?? getColumn(filter.accessorKey)?.label,
     t(`dms.table.compare_mode.${filter.mode}`),
     displayValue(filter),
   ]
@@ -184,6 +196,31 @@ const chipTitle = (filter: TableFilter): string =>
 <template>
   <div :class="ui.root()">
     <ul :class="ui.list()">
+      <li
+        v-for="filter in urlFilters"
+        :key="`url-${filter.param}`"
+        :class="ui.item()"
+        data-dms-url-filter
+      >
+        <span
+          :class="ui.chip()"
+          :title="chipTitle(filter, urlFilterLabel(filter))"
+        >
+          <span :class="ui.label()">{{ urlFilterLabel(filter) }}</span>
+          <span :class="ui.mode()">
+            {{ t(`dms.table.compare_mode.${filter.mode}`) }}
+          </span>
+          <span :class="ui.value()">{{ displayValue(filter) }}</span>
+        </span>
+        <button
+          type="button"
+          :class="ui.remove()"
+          :aria-label="t('dms.button.delete')"
+          @click="removeUrlFilter(filter)"
+        >
+          <UIcon :name="appConfig.ui.icons.close" />
+        </button>
+      </li>
       <li
         v-for="(filter, index) in filters"
         :key="`${filter.accessorKey}-${index}`"

package/frontend-vue/layers/dms-ui/app/build/components/table/Table.vue

@@ -247,6 +247,11 @@ export interface TableProps<T> {
    * says no row matches rather than that there are none yet.
    */
   hiddenFiltersApply?: boolean;
+  /**
+   * The page URL's filters declared `visible`: drawn as chips of the filters
+   * row, each removable (`removeUrlFilter`).
+   */
+  urlFilters?: TableUrlFilter[];
 
   data?: T[] | null;
   columns?: TableColumn<T>[];
@@ -307,6 +312,7 @@ export interface TableEmits<T> {
   (e: "details" | "edit", item: T): void;
   (e: "delete" | "archive" | "restore" | "export", itemIds: string[]): void;
   (e: "duplicate", itemId: string): void;
+  (e: "removeUrlFilter", param: string): void;
 }
 
 export interface TableFilter {
@@ -317,6 +323,14 @@ export interface TableFilter {
   initialValue?: unknown | unknown[];
 }
 
+/** A filter the page URL applies and shows (see `TableProps.urlFilters`). */
+export interface TableUrlFilter extends TableFilter {
+  /** The query parameter carrying it, removed with the chip. */
+  param: string;
+  /** The chip's name, before the column's label. */
+  label?: string;
+}
+
 export interface TableSharedData<T> {
   table: Table<T>;
   emits: TableEmits<T>;
@@ -343,6 +357,8 @@ export interface TableSharedData<T> {
   resetSorting: () => void;
   hasCustomColumns: ComputedRef<boolean>;
   deleteFilter: (index: number) => void;
+  /** The URL filters shown as chips (see `TableProps.urlFilters`). */
+  urlFilters: TableUrlFilter[];
   /**
    * Clears everything that narrows the rows — filter chips (quick filters
    * included) and the toolbar search — and goes back to the first page.
@@ -1183,6 +1199,7 @@ watchEffect(() => {
     resetSorting,
     hasCustomColumns,
     deleteFilter,
+    urlFilters: props.urlFilters ?? [],
     resetFilters,
     clearSearch,
     clearFilters,
@@ -1348,7 +1365,7 @@ defineShortcuts({
 
       <TableFiltersRow
         v-if="
-          filtersRowOpen &&
+          (filtersRowOpen || !!urlFilters?.length) &&
           resolvedCapabilities.filters &&
           resolvedChrome.filters
         "

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

@@ -0,0 +1,10 @@
+import type { InjectionKey } from "vue";
+
+/** Where a form collects the errors its controls report, by field id. */
+export interface FormControlErrors {
+  report: (fieldId: string, message: string | undefined) => void;
+}
+
+export const FORM_CONTROL_ERRORS_KEY: InjectionKey<FormControlErrors> = Symbol(
+  "dms-form-control-errors",
+);

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

@@ -1,34 +1,10 @@
-import { formFieldInjectionKey } from "@nuxt/ui/composables/useFormField";
-import { type InjectionKey, inject, onBeforeUnmount, ref } from "vue";
-
-/** Where a form collects the errors its controls report, by field id. */
-export interface FormControlErrors {
-  report: (fieldId: string, message: string | undefined) => void;
-}
-
-export const FORM_CONTROL_ERRORS_KEY: InjectionKey<FormControlErrors> = Symbol(
-  "dms-form-control-errors",
-);
-
 /**
- * Lets a control refuse what was typed into it (a duration or JSON it cannot
- * read): inside a form, the message becomes the field's error, which blocks
- * the submit and joins the form's summary like any other. `message` holds it
- * for a control used outside a form.
+ * Former home of `useControlError`, kept importable for the modules that
+ * reached it here.
+ *
+ * @deprecated Import `useControlError` from
+ * `#dms-ui/app/composables/form/useControlError` (or rely on its auto-import).
+ * This path is removed in the next breaking release.
  */
-export function useControlError() {
-  const field = inject(formFieldInjectionKey, undefined);
-  const errors = inject(FORM_CONTROL_ERRORS_KEY, null);
-  const message = ref<string>();
-
-  function report(next: string | undefined): void {
-    if (message.value === next) return;
-    message.value = next;
-    const name = field?.value?.name;
-    if (name) errors?.report(name, next);
-  }
-
-  onBeforeUnmount(() => report(undefined));
-
-  return { message, report };
-}
+export * from "../../../composables/form/useControlError";
+export * from "./formControlErrors";

package/frontend-vue/layers/dms-ui/app/build/composables/period/periodDisplay.ts

@@ -53,6 +53,55 @@ export function calendarToRange(range: CalendarRange): PeriodRange {
   };
 }
 
+/** Which bound of a range stays put when the range has to shrink. */
+export type CalendarRangeAnchor = "start" | "end";
+
+const RANGE_SHRINKERS: Record<
+  CalendarRangeAnchor,
+  (range: CalendarRange, span: number) => CalendarRange
+> = {
+  start: (range, span) => ({
+    start: range.start,
+    end: range.start.add({ days: span }),
+  }),
+  end: (range, span) => ({
+    start: range.end.subtract({ days: span }),
+    end: range.end,
+  }),
+};
+
+/** The number of days a range covers, both ends included. */
+export function calendarRangeDays(range: CalendarRange): number {
+  return range.end.compare(range.start) + 1;
+}
+
+/**
+ * Shrinks a range to at most `maxDays` days, keeping its `anchor` bound and
+ * moving the other one. Without a limit, or within it, the range is returned
+ * as is.
+ */
+export function limitCalendarRange(
+  range: CalendarRange,
+  maxDays: number | undefined,
+  anchor: CalendarRangeAnchor,
+): CalendarRange {
+  if (!maxDays || calendarRangeDays(range) <= maxDays) return range;
+  return RANGE_SHRINKERS[anchor](range, maxDays - 1);
+}
+
+/**
+ * Whether a range starting (or ending) on `pickedDay` and reaching `date`
+ * would cover more than `maxDays` days.
+ */
+export function isBeyondMaxDays(
+  date: CalendarDate,
+  pickedDay: CalendarDate,
+  maxDays: number | undefined,
+): boolean {
+  if (!maxDays) return false;
+  return Math.abs(date.compare(pickedDay)) >= maxDays;
+}
+
 function isStartOfDay(date: Date): boolean {
   return (
     date.getHours() === 0 &&

package/frontend-vue/layers/dms-ui/app/build/composables/period/usePeriodLocation.ts

@@ -63,15 +63,23 @@ function selectionText(selection: PeriodSelection): string {
   return JSON.stringify(writePeriodQuery(selection, STORED_KEYS));
 }
 
+type DmsRouteState = ReturnType<typeof useDmsRoute>;
+
+function browserQuery(): PeriodQuery {
+  return Object.fromEntries(new URLSearchParams(window.location.search));
+}
+
 /**
  * Writes the period into the URL: the history entry is replaced, and no
  * request reloads the page. The browser's URL is written at once, so a
- * second selector writing in the same tick merges into it; Inertia's
- * client-side replace then moves its page URL, which the DMS route follows,
- * so a component writing the query from the route (a tab, a quick action)
- * carries the period on instead of the one the page was opened with.
+ * second selector writing in the same tick merges into it, and so is the
+ * route's query: a component or a module building a query from the route
+ * (a tab, a quick action) carries the new period on at once, instead of the
+ * one the page was opened with. Inertia's client-side replace then moves its
+ * page URL, which the route follows, a few ticks later, to the same query.
  */
 function replacePeriodInUrl(
+  route: DmsRouteState,
   keys: PeriodQueryKeys,
   selection: PeriodSelection,
 ): string | null {
@@ -81,15 +89,29 @@ function replacePeriodInUrl(
   if (isPeriodQueryCurrent(query, keys, selection)) return null;
   url.search = mergePeriodSearch(url.search, keys, selection);
   const written = urlKeysText(Object.fromEntries(url.searchParams), keys);
+  const fullPath = `${url.pathname}${url.search}${url.hash}`;
   window.history.replaceState(window.history.state, "", url);
+  route.query = Object.fromEntries(url.searchParams);
+  route.fullPath = fullPath;
   inertiaRouter.replace({
-    url: `${url.pathname}${url.search}${url.hash}`,
+    url: fullPath,
     preserveState: true,
     preserveScroll: true,
   });
   return written;
 }
 
+/**
+ * Until Inertia's page catches up with a URL written in place, the route can
+ * still be set back to the page's previous query (a component reading the
+ * route meanwhile refreshes it from that page). The address bar is ahead of
+ * it, never behind: a route whose period keys differ from it is stale.
+ */
+function isRouteBehindBrowser(text: string, keys: PeriodQueryKeys): boolean {
+  if (typeof window === "undefined") return false;
+  return text !== urlKeysText(browserQuery(), keys);
+}
+
 /** The user's last choice of one selector, kept in the preferences. */
 function useRememberedPeriod(target: RememberedPeriodTarget) {
   const { getPreference, setPreference } = usePreferences();
@@ -113,11 +135,11 @@ function useRememberedPeriod(target: RememberedPeriodTarget) {
  * later, and a pick made meanwhile must not be undone by the URL of the one
  * before: `isEcho` tells a route naming a URL written here from a change.
  */
-function usePeriodUrlWriter(keys: PeriodQueryKeys) {
+function usePeriodUrlWriter(route: DmsRouteState, keys: PeriodQueryKeys) {
   const pending: string[] = [];
   return {
     write: (selection: PeriodSelection) => {
-      const written = replacePeriodInUrl(keys, selection);
+      const written = replacePeriodInUrl(route, keys, selection);
       if (written !== null) pending.push(written);
     },
     isEcho: (text: string) => {
@@ -142,8 +164,9 @@ function usePeriodUrlWriter(keys: PeriodQueryKeys) {
  * period, then on every change: the history entry is replaced instead of
  * pushed, so Back leaves the page rather than stepping through every pick,
  * and the page is not requested again, only the bound cards and tables
- * refetch. A route changed from outside (Back to the page with another
- * period, a link) moves the period.
+ * refetch. The route's query (`useDmsRoute().query`) follows each write at
+ * once. A route changed from outside (Back to the page with another period,
+ * a link) moves the period.
  */
 export function usePeriodLocation(
   period: UsePeriodReturn,
@@ -152,7 +175,7 @@ export function usePeriodLocation(
   const route = useDmsRoute();
   const urlKeys = periodQueryKeys(options.id);
   const remembered = useRememberedPeriod(options);
-  const writer = usePeriodUrlWriter(urlKeys);
+  const writer = usePeriodUrlWriter(route, urlKeys);
   const choices = {
     presets: period.presets.value,
     comparisons: period.comparisons.value,
@@ -186,7 +209,7 @@ export function usePeriodLocation(
   watch(
     () => urlKeysText(route.query as PeriodQuery, urlKeys),
     (text) => {
-      if (writer.isEcho(text)) return;
+      if (writer.isEcho(text) || isRouteBehindBrowser(text, urlKeys)) return;
       const current = readSelection(period);
       const next = resolvePeriodSelection([urlSource()], choices, current);
       if (selectionText(next) === selectionText(current)) return;

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

@@ -0,0 +1,47 @@
+import { watch, type Ref } from "vue";
+import { readTableUrlKey, type TableUrlScope } from "./utils/views";
+
+const TAB_URL_KEY = "tab";
+
+/** The route fields the URL tab is read from. */
+export interface TableUrlTabRoute {
+  query: Record<string, unknown>;
+}
+
+/** What `useTableUrlTab` reads the tab from and drives. */
+export interface TableUrlTabOptions {
+  route: TableUrlTabRoute;
+  urlScope: TableUrlScope;
+  /** The open tab: set from the URL on arrival by the caller, then here. */
+  activeTabId: Ref<string>;
+  /** Whether the table has a tab of that id it can open in place. */
+  isOpenable: (tabId: string) => boolean;
+}
+
+/**
+ * The tab the URL names for a table (`?<tableId>.tab=`, or `?tab=` on a page
+ * carrying a single table view), as it reads on arrival.
+ */
+export function readTableUrlTab(
+  query: Record<string, unknown>,
+  urlScope: TableUrlScope,
+): string | undefined {
+  return readTableUrlKey(query, urlScope, TAB_URL_KEY).value;
+}
+
+/**
+ * Follows the URL's tab after arrival: a link or a `router.replace` naming
+ * another tab of the same page switches to it without remounting the page.
+ * A URL dropping the key, or naming a tab the table cannot open in place (an
+ * unknown id, a link tab), leaves the open tab alone.
+ */
+export function useTableUrlTab(options: TableUrlTabOptions): void {
+  watch(
+    () => readTableUrlTab(options.route.query, options.urlScope),
+    (tabId) => {
+      if (!tabId || tabId === options.activeTabId.value) return;
+      if (!options.isOpenable(tabId)) return;
+      options.activeTabId.value = tabId;
+    },
+  );
+}

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

@@ -82,12 +82,18 @@ export interface DeepLinkedRow<T> {
   row?: T;
   /** The route answered 404: the row the link names no longer exists. */
   isMissing: boolean;
+  /**
+   * The read failed for another reason (a refusal, the network, a server
+   * error): the row may still exist, the link just could not be followed.
+   */
+  isFailed?: boolean;
 }
 
 /**
  * The row a deep link names: the listed one, else the one read by id — a row
- * beyond the first page. A route answering 404 marks it missing; any other
- * failure (a refusal, the network) or no route at all finds nothing.
+ * beyond the first page. A route answering 404 marks it missing, any other
+ * failure (a refusal, the network) marks it failed, and no route at all finds
+ * nothing.
  */
 export async function resolveDeepLinkedRow<T>(
   id: string,
@@ -99,6 +105,31 @@ export async function resolveDeepLinkedRow<T>(
     const row = await source.getRow(id);
     return { row: row ?? undefined, isMissing: false };
   } catch (error: unknown) {
-    return { isMissing: readFetchNotFound(error) !== null };
+    if (readFetchNotFound(error) !== null) return { isMissing: true };
+    return { isMissing: false, isFailed: true };
   }
 }
+
+/**
+ * What a table does with the row a deep link resolved to: open it, let a side
+ * panel show its own "no longer available" state, tell the user the link led
+ * nowhere (a drawer or a modal has no such state, and a table with no route to
+ * read one row finds nothing either), or tell them the row could not be read
+ * (a refusal, the network) without claiming it is gone.
+ */
+export type DeepLinkOutcome =
+  | "open"
+  | "missingPanel"
+  | "notify"
+  | "notifyFailed";
+
+export function deepLinkOutcome(
+  found: DeepLinkedRow<unknown>,
+  action: CustomRowAction,
+): DeepLinkOutcome {
+  if (found.row) return "open";
+  if (found.isFailed) return "notifyFailed";
+  if (found.isMissing && action.target.type === "sidePanel")
+    return "missingPanel";
+  return "notify";
+}

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

@@ -0,0 +1,29 @@
+import type { TableUrlFilter } from "../../../components/table/Table.vue";
+import type { QueryParamFilters } from "../../../../composables/table-view/types/config";
+
+const DEFAULT_FILTER_MODE = "is";
+
+/** The `queryParamFilters` declared `visible` that the URL applies now. */
+export function visibleUrlFilters(
+  filters: QueryParamFilters | undefined,
+  query: Record<string, unknown>,
+): TableUrlFilter[] {
+  return Object.entries(filters ?? {})
+    .filter(([param, config]) => config.visible && query[param] !== undefined)
+    .map(([param, config]) => ({
+      param,
+      label: config.label,
+      accessorKey: config.field,
+      mode: config.mode || DEFAULT_FILTER_MODE,
+      value: query[param],
+    }));
+}
+
+/** The URL query without `param`, for a chip the user removed. */
+export function withoutQueryParam<Query extends Record<string, unknown>>(
+  query: Query,
+  param: string,
+): Query {
+  const { [param]: _removed, ...rest } = query;
+  return rest as Query;
+}

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

@@ -56,7 +56,7 @@ import {
   resolveSectionNav,
   sectionState,
 } from "../../build/composables/form/formSections";
-import { FORM_CONTROL_ERRORS_KEY } from "../../build/composables/form/useControlError";
+import { FORM_CONTROL_ERRORS_KEY } from "../../build/composables/form/formControlErrors";
 import { useInstantForm } from "../../build/composables/form/useInstantForm";
 import { useInstantSaveHeader } from "#dms-layout/app/composables/layout/useInstantSaveHeader";
 import DmsFormEntries from "../../build/components/form/FormEntries.vue";