@antelopejs/dms 0.9.8 → 0.10.0

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

@@ -0,0 +1,106 @@
+import { get } from "@nuxt/ui/runtime/utils/index.js";
+import type { RowLocation } from "../../actions/rowNavigation";
+
+/** One window of the table's result, under its current query. */
+export interface LocatedWindow {
+  results: Data[];
+  total: number;
+}
+
+export interface RowLocatorOptions {
+  /**
+   * Reads the rows from `offset`, `limit` of them, under the table's current
+   * query; `limit: 0` reads every row (`wholeRead`). `null` while it cannot.
+   */
+  list: (offset: number, limit: number) => Promise<LocatedWindow | null>;
+  rowIdKey: string;
+  /**
+   * The table pages the rows itself (a source answering every row): one read
+   * holds them all.
+   */
+  isWholeRead?: () => boolean;
+}
+
+/** Rows read per window while looking for a row. */
+export const LOCATE_WINDOW = 200;
+/**
+ * How far into the result a row is looked for: past it, a deep link opens
+ * without a position rather than reading the table to its end.
+ */
+export const LOCATE_MAX_ROWS = 5_000;
+const HALF_WINDOW = Math.floor(LOCATE_WINDOW / 2);
+/** The row and one on each side. */
+const NEIGHBOURHOOD = 3;
+
+const idOf = (row: Data, rowIdKey: string): string =>
+  String(get(row, rowIdKey));
+
+/** The location of the row at `local` in `rows`, read from `offset`. */
+function locationIn(
+  window: LocatedWindow,
+  offset: number,
+  local: number,
+): RowLocation {
+  return {
+    index: offset + local,
+    total: Math.max(window.total, offset + local + 1),
+    prev: window.results[local - 1],
+    next: window.results[local + 1],
+  };
+}
+
+/**
+ * Finds a row among all the rows a table lists, by id, reading its result
+ * a window at a time: a deep link to a row past the page loaded, or a row
+ * live updates pushed out of it, gets its position and its neighbours in the
+ * table's current order. Each window overlaps the previous one by a row, so a
+ * row found has its neighbours with it; one at a window's edge has them read
+ * around it.
+ */
+export function rowLocator(options: RowLocatorOptions) {
+  const { list, rowIdKey } = options;
+  const find = (window: LocatedWindow, id: string) =>
+    window.results.findIndex((row) => idOf(row, rowIdKey) === id);
+
+  const withNeighbours = async (
+    location: RowLocation,
+  ): Promise<RowLocation> => {
+    const lacksPrev = !location.prev && location.index > 0;
+    const lacksNext = !location.next && location.index < location.total - 1;
+    if (!lacksPrev && !lacksNext) return location;
+    const offset = Math.max(0, location.index - 1);
+    const around = await list(offset, NEIGHBOURHOOD);
+    const local = around ? location.index - offset : -1;
+    if (!around || !around.results[local]) return location;
+    return { ...locationIn(around, offset, local), total: location.total };
+  };
+
+  return async (
+    id: string,
+    hint?: number,
+  ): Promise<RowLocation | undefined> => {
+    if (options.isWholeRead?.()) {
+      const all = await list(0, 0);
+      const local = all ? find(all, id) : -1;
+      return all && local >= 0 ? locationIn(all, 0, local) : undefined;
+    }
+    // The window around where the row last stood first, then the result
+    // from its start, until its end or the rows looked through run out.
+    const starts = hint === undefined ? [] : [Math.max(0, hint - HALF_WINDOW)];
+    let end = LOCATE_MAX_ROWS;
+    for (let start = 0; start < end; start += LOCATE_WINDOW) starts.push(start);
+    const read = new Set<number>();
+    for (const start of starts) {
+      if (read.has(start) || start >= end) continue;
+      read.add(start);
+      // One row before the window: its first row's previous.
+      const offset = Math.max(0, start - 1);
+      const window = await list(offset, LOCATE_WINDOW + (start > 0 ? 2 : 1));
+      if (!window) return undefined;
+      const local = find(window, id);
+      if (local >= 0) return withNeighbours(locationIn(window, offset, local));
+      end = Math.min(window.total, LOCATE_MAX_ROWS);
+    }
+    return undefined;
+  };
+}

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

@@ -0,0 +1,34 @@
+/**
+ * How the page shown was reached: a full load of the document (a reload, a
+ * URL typed or opened in a new browser tab), an Inertia visit (a link, a
+ * redirect), or Back and Forward.
+ */
+export type PageArrivalKind = "load" | "visit" | "history";
+
+interface InertiaBeforeDetail {
+  visit: { prefetch?: boolean };
+}
+
+let arrivalKind: PageArrivalKind = "load";
+let isTracking = false;
+
+/**
+ * Starts following how each page is reached, once, when the app starts: a
+ * table mounted later must still see the visit that brought it. A server
+ * render never tracks, so it and the hydrating client both read a full load.
+ */
+export function trackPageArrivals(): void {
+  if (typeof document === "undefined" || isTracking) return;
+  isTracking = true;
+  // A prefetch (a link hovered) announces a visit that may never be made.
+  document.addEventListener("inertia:before", (event) => {
+    const { visit } = (event as CustomEvent<InertiaBeforeDetail>).detail;
+    if (!visit.prefetch) arrivalKind = "visit";
+  });
+  window.addEventListener("popstate", () => {
+    arrivalKind = "history";
+  });
+}
+
+/** How the page shown was reached (`trackPageArrivals`). */
+export const pageArrivalKind = (): PageArrivalKind => arrivalKind;

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

@@ -27,3 +27,20 @@ export function pinRows<T extends Record<string, unknown>>(
   );
   return pinned.length === 0 ? rows : [...pinned, ...rest];
 }
+
+/**
+ * `rows` as a table reading `span` of them at a time shows them: the pinned
+ * rows lead each read, not the whole list. `rows` starts at a read's first.
+ */
+export function pinRowsBySpan<T extends Record<string, unknown>>(
+  rows: T[],
+  span: number,
+  pinnedRows: RowActionRule | undefined,
+): T[] {
+  if (!pinnedRows || span <= 0) return pinRows(rows, pinnedRows);
+  const spans: T[][] = [];
+  for (let start = 0; start < rows.length; start += span) {
+    spans.push(pinRows(rows.slice(start, start + span), pinnedRows));
+  }
+  return spans.flat();
+}

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

@@ -1,6 +1,14 @@
 import type { TableViewColumn } from "../../../../composables/table-view/types/column";
 import type { TableViewQuickFilterMode } from "../../../../composables/table-view/types/config";
 import type { TableFilter } from "../../../components/table/Table.vue";
+import type {
+  DataType,
+  DataTypeSelectSource,
+} from "#dms-core/app/composables/data-types/useDataType";
+import {
+  relationRowLabel,
+  relationRowValue,
+} from "../../data-types/relationRows";
 
 /** A value a quick filter offers. */
 export interface QuickFilterItem {
@@ -20,22 +28,13 @@ export interface ResolvedQuickFilter {
   pending?: boolean;
 }
 
-/** Where a relation quick filter reads its values from. */
-export interface QuickFilterRelationSource {
-  url: string;
-  labelKey: string;
-  valueKey: string;
-}
-
 interface ColumnInputOptions {
   items?: Array<{ value: unknown; label: string }>;
+  /** A tags column's suggested tags: the values it offers. */
+  suggestions?: string[];
   multiple?: boolean;
-  searchUrl?: string;
-  keyMapping?: { label?: string; value?: string };
 }
 
-const DEFAULT_LABEL_KEY = "name";
-const DEFAULT_VALUE_KEY = "_id";
 const ARRAY_MODE: TableViewQuickFilterMode = "array_contains_string";
 const SCALAR_MODE: TableViewQuickFilterMode = "is";
 
@@ -44,26 +43,30 @@ const inputOptions = (column: TableViewColumn | undefined) =>
 
 /**
  * The compare mode a quick filter applies: the declared one, else "contains"
- * for a multiple select or relation (the row holds a list) and equality
- * otherwise.
+ * when the row holds a list -- a multiple select or relation, or a type that
+ * filters on "contains" by default (tags) -- and equality otherwise.
  */
 export function quickFilterMode(
   column: TableViewColumn | undefined,
   declared?: TableViewQuickFilterMode,
 ): TableViewQuickFilterMode {
   if (declared) return declared;
-  return inputOptions(column).multiple ? ARRAY_MODE : SCALAR_MODE;
+  const holdsList =
+    inputOptions(column).multiple ||
+    column?.type?.defaultCompareMode === ARRAY_MODE;
+  return holdsList ? ARRAY_MODE : SCALAR_MODE;
 }
 
 /**
- * The values a select or boolean column offers, known from its declaration;
- * `undefined` for a column whose values must be fetched (a relation).
+ * The values a select, boolean or tags column offers (a select's items, a
+ * tags column's `suggestions`), known from its declaration; `undefined` for a
+ * column that declares none (a relation's are fetched).
  */
 export function staticQuickFilterItems(
   column: TableViewColumn | undefined,
   translate: (key: string) => string,
 ): QuickFilterItem[] | undefined {
-  if (!column) return [];
+  if (!column) return undefined;
   const typeId = column.type?.id;
   if (typeId === "boolean" || typeId === "status") {
     return [
@@ -74,41 +77,45 @@ export function staticQuickFilterItems(
       },
     ];
   }
-  const items = inputOptions(column).items;
+  const { items, suggestions } = inputOptions(column);
   if (items) {
     return items.map((item) => ({
       value: String(item.value),
       label: translate(item.label),
     }));
   }
-  return relationQuickFilterSource(column) ? undefined : [];
+  if (suggestions) {
+    return suggestions.map((tag) => ({ value: tag, label: tag }));
+  }
+  return undefined;
 }
 
-/** The `select` endpoint a relation column picks its rows from. */
+/**
+ * Where a relation column's values are read: the `select` route its data
+ * type's {@link DataType.selectSource} names, as for its picker and its
+ * filter chips.
+ */
 export function relationQuickFilterSource(
   column: TableViewColumn | undefined,
-): QuickFilterRelationSource | undefined {
-  const options = inputOptions(column);
-  if (!options.searchUrl) return undefined;
-  return {
-    url: options.searchUrl,
-    labelKey: options.keyMapping?.label ?? DEFAULT_LABEL_KEY,
-    valueKey: options.keyMapping?.value ?? DEFAULT_VALUE_KEY,
-  };
+  getDataType: (id: string) => DataType | undefined,
+): DataTypeSelectSource | undefined {
+  const typeId = column?.type?.id;
+  if (!typeId) return undefined;
+  return getDataType(typeId)?.selectSource?.(inputOptions(column));
 }
 
-/** Rows of a relation's `select` endpoint as quick filter values. */
+/** Rows of a relation's `select` route as quick filter values. */
 export function relationQuickFilterItems(
   rows: Array<Record<string, unknown>>,
-  source: QuickFilterRelationSource,
+  source: DataTypeSelectSource,
 ): QuickFilterItem[] {
   return rows.flatMap((row) => {
-    const value = row[source.valueKey];
+    const value = relationRowValue(source, row);
     if (value === undefined || value === null) return [];
     return [
       {
         value: String(value),
-        label: String(row[source.labelKey] ?? value),
+        label: String(relationRowLabel(source, row) ?? value),
       },
     ];
   });
@@ -118,7 +125,8 @@ export function relationQuickFilterItems(
 const isQuickFilterOf =
   (quickFilter: Pick<ResolvedQuickFilter, "field" | "mode">) =>
   (filter: TableFilter): boolean =>
-    filter.accessorKey === quickFilter.field && filter.mode === quickFilter.mode;
+    filter.accessorKey === quickFilter.field &&
+    filter.mode === quickFilter.mode;
 
 /**
  * The value a quick filter shows as picked: the one its column's filter holds

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

@@ -39,12 +39,28 @@ export function writeRecordId(
 
 /**
  * Whether an action keeps the row it opens in the URL: a side panel does
- * unless its target or the action sets `deepLink: false`, a drawer or a modal
- * only with the action's `deepLink: true`.
+ * unless its target or the action sets `deepLink: false`, a drawer only with
+ * its target's or the action's `deepLink: true`, a modal only with the
+ * action's.
  */
 export function isDeepLinkAction(action: CustomRowAction): boolean {
-  if (action.target.type !== "sidePanel") return !!action.deepLink;
-  return (action.deepLink ?? action.target.deepLink) !== false;
+  const { target } = action;
+  if (target.type === "sidePanel") {
+    return (action.deepLink ?? target.deepLink) !== false;
+  }
+  if (target.type === "drawer") return !!(action.deepLink ?? target.deepLink);
+  return !!action.deepLink;
+}
+
+/**
+ * Whether the action's container draws its own "no longer available" state
+ * on a row that is gone: a side panel always, a drawer once its target words
+ * it (`notFound`).
+ */
+export function hasMissingRowState(action: CustomRowAction): boolean {
+  const { target } = action;
+  if (target.type === "sidePanel") return true;
+  return target.type === "drawer" && !!target.notFound;
 }
 
 /** The row a table wrote in the URL, and the page it wrote it on. */
@@ -114,8 +130,9 @@ export async function resolveDeepLinkedRow<T>(
 
 /**
  * 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
+ * panel (or a drawer wording it) show its own "no longer available" state,
+ * tell the user the link led nowhere (any other container 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.
  */
@@ -131,7 +148,6 @@ export function deepLinkOutcome(
 ): DeepLinkOutcome {
   if (found.row) return "open";
   if (found.isFailed) return "notifyFailed";
-  if (found.isMissing && action.target.type === "sidePanel")
-    return "missingPanel";
+  if (found.isMissing && hasMissingRowState(action)) return "missingPanel";
   return "notify";
 }

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

@@ -0,0 +1,113 @@
+import type { TableFilter } from "../../../components/table/Table.vue";
+import type { TableCountRequest } from "../useTableListData";
+import { buildTableQuery, isFilterEffective } from "./tableQuery";
+
+/** A view's counter shares the tab counters' request, under its own id. */
+export const VIEW_COUNT_ID_PREFIX = "view:";
+/**
+ * So does the navigation badge of a tab while anything narrows its counter:
+ * the badge stands for the whole page, the counter for what the table shows.
+ */
+export const NAV_BADGE_COUNT_ID_PREFIX = "nav:";
+
+/** A tab that filters the table (a link tab counts its own list). */
+export interface CountedTab {
+  id: string;
+  filters: TableFilter[];
+  hasNavBadge: boolean;
+}
+
+/** A view with a counter, as opening it sets the table. */
+export interface CountedView {
+  id: string;
+  filters: TableFilter[];
+  search?: string;
+}
+
+/** What the table lists, besides its tab. */
+export interface TableCountState {
+  /** The filters the page sets: its URL query and route parameters. */
+  scopeFilters: TableFilter[];
+  /** The open tab's filter. */
+  tabFilters: TableFilter[];
+  /** The filters on screen: the open view's, as the user edited them. */
+  columnFilters: TableFilter[];
+  search?: string;
+}
+
+export interface TableCountQueriesInput extends TableCountState {
+  tabs: CountedTab[];
+  views: CountedView[];
+  activeViewId?: string;
+}
+
+const countQuery = (
+  columnFilters: TableFilter[],
+  hiddenFilters: TableFilter[],
+  search?: string,
+) =>
+  buildTableQuery({
+    pagination: { pageIndex: 0, pageSize: 0 },
+    sorting: [],
+    columnFilters,
+    hiddenFilters,
+    globalFilter: search,
+  });
+
+/** Whether a tab's counter counts fewer rows than its whole page holds. */
+export const isCountNarrowed = (state: TableCountState): boolean =>
+  !!state.search ||
+  state.scopeFilters.some(isFilterEffective) ||
+  state.columnFilters.some(isFilterEffective);
+
+/**
+ * The counters of a table's tabs and views, in one request: each counts what
+ * a click on it would list, the rest of the table's state kept. A tab counts
+ * under the filters and search on screen; a view under the tab open, with its
+ * own filters and search, which opening it applies; the open view counts the
+ * rows listed. The page's URL filters apply to all. A `navBadge` tab also gets
+ * a count of its filter alone, for the menu, while anything narrows its own.
+ */
+export function buildTableCountQueries(
+  input: TableCountQueriesInput,
+): TableCountRequest[] {
+  const { scopeFilters, tabFilters, columnFilters, search } = input;
+  const viewScope = [...scopeFilters, ...tabFilters];
+  const isNarrowed = isCountNarrowed(input);
+  return [
+    ...input.tabs.map((tab) => ({
+      id: tab.id,
+      query: countQuery(
+        columnFilters,
+        [...scopeFilters, ...tab.filters],
+        search,
+      ),
+    })),
+    ...(isNarrowed ? input.tabs : [])
+      .filter((tab) => tab.hasNavBadge)
+      .map((tab) => ({
+        id: `${NAV_BADGE_COUNT_ID_PREFIX}${tab.id}`,
+        query: countQuery([], tab.filters),
+      })),
+    ...input.views.map((view) => ({
+      id: `${VIEW_COUNT_ID_PREFIX}${view.id}`,
+      query:
+        view.id === input.activeViewId
+          ? countQuery(columnFilters, viewScope, search)
+          : countQuery(view.filters, viewScope, view.search),
+    })),
+  ];
+}
+
+/**
+ * The menu badge of a `navBadge` tab, from the counts answered: its global
+ * count once asked for, its own counter while nothing narrows it, else none
+ * until the global count arrives.
+ */
+export const navBadgeCount = (
+  counts: Record<string, number> | null | undefined,
+  tabId: string,
+  isNarrowed: boolean,
+): number | undefined =>
+  counts?.[`${NAV_BADGE_COUNT_ID_PREFIX}${tabId}`] ??
+  (isNarrowed ? undefined : counts?.[tabId]);

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

@@ -47,16 +47,39 @@ const buildFiltersQuery = (filters: TableFilter[]): Record<string, string> => {
   );
 };
 
+/**
+ * The column filters (the filters row, a saved view) laid over the hidden
+ * ones (a tab, a route or query parameter). On a column both filter, both
+ * are sent: the list route keeps the rows passing every filter of a column
+ * (AND), so a tab never lists rows it excludes, and two filters no row can
+ * pass list nothing.
+ */
+const combineFilters = (
+  hidden: Record<string, string>,
+  column: Record<string, string>,
+): Record<string, string | string[]> => {
+  const combined: Record<string, string | string[]> = { ...hidden };
+  for (const [key, value] of Object.entries(column)) {
+    const hiddenValue = hidden[key];
+    combined[key] =
+      hiddenValue === undefined || hiddenValue === value
+        ? value
+        : [hiddenValue, value];
+  }
+  return combined;
+};
+
 export const buildTableQuery = (config: QueryConfig): TableQueryParams => {
   const pageSize = config.pagination.pageSize;
   const activeSort = config.sorting[0];
 
-  const columnFilters = buildFiltersQuery(config.columnFilters);
-  const hiddenFilters = buildFiltersQuery(config.hiddenFilters || []);
+  const filters = combineFilters(
+    buildFiltersQuery(config.hiddenFilters || []),
+    buildFiltersQuery(config.columnFilters),
+  );
 
   return {
-    ...hiddenFilters,
-    ...columnFilters,
+    ...filters,
     search: config.globalFilter ?? undefined,
     offset: config.pagination.pageIndex * pageSize,
     limit: pageSize,

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

@@ -53,7 +53,11 @@ export const newUserViewId = (): string =>
     .toString(ID_RADIX)
     .slice(ID_RANDOM_START)}`;
 
-function viewFilters(
+/**
+ * The filters opening `view` sets: the table's pinned filters, at the view's
+ * value for those it names, then the view's other filters.
+ */
+export function viewFilters(
   view: TableViewViewStateConfig,
   pinned: TableFilter[],
 ): TableFilter[] {
@@ -179,6 +183,8 @@ export interface TableUrlScope {
 /** What reading a key off the URL found. */
 export interface UrlKeyReading {
   value?: string;
+  /** The key is there, empty (`?view=`): it names nothing, explicitly. */
+  isCleared?: boolean;
   /** A short key named something the table may not claim. */
   ignoredShortKey?: boolean;
 }
@@ -208,14 +214,24 @@ export function writeTableUrlKey(
   const scopedKey = tableUrlKey(scope, key);
   if (value) url.searchParams.set(scopedKey, value);
   else url.searchParams.delete(scopedKey);
+  // The only table reads its prefixed key first (`readTableUrlKey`): a link
+  // naming it (`content.tab=`) would otherwise outlive the short key written
+  // over it, and win again on reload.
+  if (scope.tableId && scopedKey === key) {
+    url.searchParams.delete(`${scope.tableId}.${key}`);
+  }
   window.history.replaceState(window.history.state, "", url);
   return url;
 }
 
+const readUrlValue = (value: string): UrlKeyReading =>
+  value ? { value } : { isCleared: true };
+
 /**
  * The value the URL gives `key` (`view`, `tab`) for this table: under its
  * prefixed key (`content.view`) or, when it is its page's only table, the
- * short one. A short key on a page with several tables is ignored.
+ * short one. A short key on a page with several tables is ignored. A key
+ * left empty reads as cleared, not as absent.
  */
 export function readTableUrlKey(
   query: Record<string, unknown>,
@@ -223,9 +239,9 @@ export function readTableUrlKey(
   key: string,
 ): UrlKeyReading {
   const prefixed = scope.tableId ? query[`${scope.tableId}.${key}`] : undefined;
-  if (typeof prefixed === "string" && prefixed) return { value: prefixed };
+  if (typeof prefixed === "string") return readUrlValue(prefixed);
   const short = query[key];
-  if (typeof short !== "string" || !short) return {};
-  if (scope.isSoleTableView) return { value: short };
-  return { ignoredShortKey: true };
+  if (typeof short !== "string") return {};
+  if (scope.isSoleTableView) return readUrlValue(short);
+  return short ? { ignoredShortKey: true } : {};
 }

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

@@ -0,0 +1,49 @@
+// The geocoder answers the whole world in its own order, and the same place
+// several times (one entry per OSM object: a square, its bus stop, its
+// parking). The list a user picks from holds each place once, the ones in
+// the address's country first.
+
+/** How many results are asked for per suggestion shown, to rank from. */
+export const SUGGESTION_POOL_FACTOR = 4;
+/** The most results asked for at once. */
+export const SUGGESTION_POOL_MAX = 20;
+
+/** A suggestion as the address field lists it. */
+export interface RankableSuggestion {
+  label: string;
+  /** ISO 3166-1 alpha-2 code of the suggestion's country, upper case. */
+  countryCode?: string;
+}
+
+/** How many results to ask the geocoder for, to show `limit`. */
+export function suggestionPoolSize(limit: number): number {
+  return Math.min(SUGGESTION_POOL_MAX, limit * SUGGESTION_POOL_FACTOR);
+}
+
+/**
+ * The suggestions to list: each label once, those in `country` (when given)
+ * first and in the geocoder's order otherwise, at most `limit`.
+ *
+ * @internal
+ */
+export function rankAddressSuggestions<T extends RankableSuggestion>(
+  suggestions: readonly T[],
+  country: string | undefined,
+  limit: number,
+): T[] {
+  const seen = new Set<string>();
+  const unique = suggestions.filter((suggestion) => {
+    const key = suggestion.label.trim().toLowerCase();
+    if (seen.has(key)) return false;
+    seen.add(key);
+    return true;
+  });
+  const preferred = country?.toUpperCase();
+  if (!preferred) return unique.slice(0, limit);
+  const isPreferred = (suggestion: T) =>
+    suggestion.countryCode?.toUpperCase() === preferred;
+  return [
+    ...unique.filter(isPreferred),
+    ...unique.filter((suggestion) => !isPreferred(suggestion)),
+  ].slice(0, limit);
+}

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

@@ -5,3 +5,15 @@
  */
 export const EYEBROW_CLASS =
   "font-mono text-[10.5px] font-semibold tracking-[0.12em] uppercase";
+
+/** U+2060: no line break on either side, and no glyph to draw. */
+const WORD_JOINER = "⁠";
+const INNER_HYPHEN = /(?<=\p{L})-(?=\p{L})/gu;
+
+/**
+ * `label` with each hyphenated word kept on one line: a short label that wraps
+ * on a phone breaks between words, never as "MOIS-" over "CI".
+ */
+export function keepHyphenatedWords(label: string): string {
+  return label.replace(INNER_HYPHEN, `-${WORD_JOINER}`);
+}