@antelopejs/dms 0.9.8 → 0.11.0

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/composables/table-view/utils/writeError.ts

@@ -0,0 +1,21 @@
+import type { I18nTranslate } from "#dms-core/app/composables/translation/useTranslation";
+import type { TableViewColumn } from "../../../../composables/table-view/types/column";
+import { resolveActionError } from "../../confirm/actionError";
+
+/**
+ * Why a table view's write failed (a card moved on the board, a row moved
+ * by hand, a row action), for its toast: the server's reason, a field the
+ * data API refused named by its column's label ("Loss reason is
+ * required."). Never the raw ofetch error line.
+ */
+export function describeTableWriteError(
+  error: unknown,
+  translate: I18nTranslate,
+  columns: ReadonlyArray<Pick<TableViewColumn, "accessorKey" | "header">>,
+  processI18n: (text: string) => string,
+): string {
+  return resolveActionError(error, translate, (field) => {
+    const column = columns.find((entry) => entry.accessorKey === field);
+    return column ? processI18n(column.header) : undefined;
+  });
+}

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/codeHighlight.ts

@@ -1,19 +1,17 @@
-// 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";
+// Read-only highlighting: the code parsed by the grammars the editor's
+// CodeMirror languages are built on, and cut into styled tokens, without
+// mounting an editor. Each language's grammar loads on demand and alone: a
+// snippet needs neither the editor's view nor its state, which would triple
+// what a page showing a JSON payload downloads. SQL is the exception: its
+// grammar only ships inside `@codemirror/lang-sql`.
 import type { Parser } from "@lezer/common";
-import { highlightTree, tagHighlighter } from "@lezer/highlight";
+import {
+  type Highlighter,
+  highlightTree,
+  tagHighlighter,
+} from "@lezer/highlight";
 import { CODE_PALETTE, type CodeTokenStyle } from "./codePalette";
-import { shellParser } from "./shellParser";
+import type { HighlightedRange } from "./streamHighlight";
 
 /** A run of code drawn in one style; unstyled text has no `style`. */
 export interface CodeToken {
@@ -21,13 +19,42 @@ export interface CodeToken {
   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,
+/** Cuts code of the language it was loaded for into tokens. */
+export type CodeHighlighter = (code: string) => CodeToken[];
+
+/** Calls `put` for each styled range of `code`, in order. */
+type RangeReader = (
+  code: string,
+  highlighter: Highlighter,
+  put: HighlightedRange,
+) => void;
+
+const readWith =
+  (parser: Parser): RangeReader =>
+  (code, highlighter, put) =>
+    highlightTree(parser.parse(code), highlighter, put);
+
+// One dynamic import per language, so a page loads the grammar it shows.
+const READERS: Record<string, () => Promise<RangeReader>> = {
+  json: async () => readWith((await import("@lezer/json")).parser),
+  javascript: async () => readWith((await import("@lezer/javascript")).parser),
+  typescript: async () =>
+    readWith(
+      (await import("@lezer/javascript")).parser.configure({ dialect: "ts" }),
+    ),
+  html: async () => readWith((await import("./htmlGrammar")).htmlParser),
+  sql: async () =>
+    readWith(
+      (await import("@codemirror/lang-sql")).StandardSQL.language.parser,
+    ),
+  shell: async () => {
+    const [{ highlightStream }, { shellParser }] = await Promise.all([
+      import("./streamHighlight"),
+      import("./shellParser"),
+    ]);
+    return (code, highlighter, put) =>
+      highlightStream(shellParser, code, highlighter, put);
+  },
 };
 
 // Each palette entry's position is its class, read back into its style.
@@ -40,16 +67,11 @@ function styleOf(classes: string): CodeTokenStyle {
   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 }];
+function tokensOf(code: string, read: RangeReader): CodeToken[] {
+  if (!code) return [{ text: code }];
   const tokens: CodeToken[] = [];
   let cursor = 0;
-  highlightTree(parser.parse(code), HIGHLIGHTER, (from, to, classes) => {
+  read(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;
@@ -57,3 +79,19 @@ export function highlightCode(code: string, language: string): CodeToken[] {
   if (cursor < code.length) tokens.push({ text: code.slice(cursor) });
   return tokens;
 }
+
+const plain: CodeHighlighter = (code) => [{ text: code }];
+
+/**
+ * Loads the grammar of `language` (a resolved name, see
+ * `resolveCodeLanguage`) and resolves to what cuts its code into styled
+ * tokens; a language without a grammar shows each code as one plain token.
+ */
+export async function loadCodeHighlighter(
+  language: string,
+): Promise<CodeHighlighter> {
+  const load = READERS[language];
+  if (!load) return plain;
+  const read = await load();
+  return (code) => tokensOf(code, read);
+}

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

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

@@ -1,6 +1,11 @@
+/** An input component, with the options its field declares. */
+interface ComponentWithOptions {
+  options?: object;
+}
+
 /** A field whose input component carries options. */
 interface FieldWithOptions {
-  component: { options?: object };
+  component: ComponentWithOptions;
 }
 
 type Translate = (key: string) => string;
@@ -23,6 +28,9 @@ const ENTRY_TEXTS = ["label", "description"] as const;
 
 const isText = (value: unknown): value is string => typeof value === "string";
 
+const isOptions = (value: unknown): value is Options =>
+  typeof value === "object" && value !== null && !Array.isArray(value);
+
 function translateTexts(
   source: Options,
   keys: readonly string[],
@@ -36,25 +44,57 @@ function translateTexts(
 }
 
 /**
- * A field with the texts of its input component's options translated
- * (`$`-prefixed i18n keys): placeholder, labels, descriptions, and those of
- * its options and columns, the way forms show them.
+ * An entry holding a field of its own (a repeater's column, a key-value
+ * editor's value) has the options of that field's component translated too,
+ * so a select inside a repeater shows its options in the reader's language.
  */
-export function processFieldI18n<F extends FieldWithOptions>(
-  field: F,
+function translateNestedField(entry: Options, processI18n: Translate): Options {
+  if (!isOptions(entry.component)) return entry;
+  return {
+    ...entry,
+    component: translateComponent(entry.component, processI18n),
+  };
+}
+
+function translateComponent<C extends ComponentWithOptions>(
+  component: C,
   processI18n: Translate,
-): F {
-  const opts = field.component.options as Options | undefined;
-  if (!opts) return field;
+): C {
+  const opts = component.options as Options | undefined;
+  if (!opts) return component;
 
   const options = translateTexts(opts, TEXT_OPTIONS, processI18n);
   for (const key of LIST_OPTIONS) {
     const list = opts[key];
     if (!Array.isArray(list)) continue;
     options[key] = list.map((entry: Options) =>
-      translateTexts(entry, ENTRY_TEXTS, processI18n),
+      translateNestedField(
+        translateTexts(entry, ENTRY_TEXTS, processI18n),
+        processI18n,
+      ),
     );
   }
+  if (isOptions(opts.value)) {
+    options.value = translateNestedField(opts.value, processI18n);
+  }
 
-  return { ...field, component: { ...field.component, options } };
+  return { ...component, options };
+}
+
+/**
+ * A field with the texts of its input component's options translated
+ * (`$`-prefixed i18n keys): placeholder, labels, descriptions, and those of
+ * its options and columns, the way forms show them. The fields nested in it
+ * (a repeater's columns, a key-value editor's value) are translated the same
+ * way, at any depth.
+ */
+export function processFieldI18n<F extends FieldWithOptions>(
+  field: F,
+  processI18n: Translate,
+): F {
+  if (!field.component.options) return field;
+  return {
+    ...field,
+    component: translateComponent(field.component, processI18n),
+  };
 }

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

@@ -0,0 +1,79 @@
+// HTML as the editor's language reads it (`@codemirror/lang-html`): scripts,
+// styles, `style` attributes and event handlers parsed in their own
+// languages, from the lezer grammars alone. The nesting mirrors lang-html's
+// defaults, so a snippet colours HTML exactly like the editor. A module of its
+// own because HTML is the one grammar composed of others.
+import { parser as cssParser } from "@lezer/css";
+import { configureNesting, parser } from "@lezer/html";
+import { parser as javascriptParser } from "@lezer/javascript";
+
+// What lezer read of a tag's attributes; an absent one is undefined.
+type Attributes = Readonly<Record<string, string | undefined>>;
+
+const typescriptParser = javascriptParser.configure({ dialect: "ts" });
+// A JSON script holds one value, read as JavaScript reads it.
+const jsonScriptParser = javascriptParser.configure({
+  top: "SingleExpression",
+});
+
+const JSON_SCRIPT_TYPE =
+  /^(importmap|speculationrules|application\/(.+\+)?json)$/i;
+const JAVASCRIPT_TYPE =
+  /^(?:text|application)\/(?:x-)?(?:java|ecma)script$|^module$|^$/i;
+const CSS_TYPE = /^(text\/)?(x-)?(stylesheet|css)$/i;
+
+const NESTED_TAGS = [
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      attrs.type === "text/typescript" || attrs.lang === "ts",
+    parser: typescriptParser,
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      attrs.type === "text/babel" || attrs.type === "text/jsx",
+    parser: javascriptParser.configure({ dialect: "jsx" }),
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) => attrs.type === "text/typescript-jsx",
+    parser: javascriptParser.configure({ dialect: "jsx ts" }),
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) => JSON_SCRIPT_TYPE.test(attrs.type ?? ""),
+    parser: jsonScriptParser,
+  },
+  {
+    tag: "script",
+    attrs: (attrs: Attributes) =>
+      !attrs.type || JAVASCRIPT_TYPE.test(attrs.type),
+    parser: javascriptParser,
+  },
+  {
+    tag: "style",
+    attrs: (attrs: Attributes) =>
+      (!attrs.lang || attrs.lang === "css") &&
+      (!attrs.type || CSS_TYPE.test(attrs.type)),
+    parser: cssParser,
+  },
+];
+
+const EVENT_ATTRIBUTES = (
+  "beforeunload copy cut dragstart dragover dragleave dragenter dragend " +
+  "drag paste focus blur change click load mousedown mouseenter mouseleave " +
+  "mouseup keydown keyup resize scroll unload"
+)
+  .split(" ")
+  .map((name) => `on${name}`);
+
+const NESTED_ATTRIBUTES = [
+  { name: "style", parser: cssParser.configure({ top: "Styles" }) },
+  ...EVENT_ATTRIBUTES.map((name) => ({ name, parser: javascriptParser })),
+];
+
+/** The HTML grammar, with its embedded languages. */
+export const htmlParser = parser.configure({
+  wrap: configureNesting(NESTED_TAGS, NESTED_ATTRIBUTES),
+});

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

@@ -0,0 +1,53 @@
+/**
+ * How wide a single-line input sits in its row: `"compact"` for a short
+ * value, `"full"` to fill the row. Left out, the input's bounds decide.
+ */
+export type InputWidth = "compact" | "full";
+
+/** The widest number, in digits, a number input sizes compact by itself. */
+const COMPACT_NUMBER_DIGITS = 6;
+/** The longest `maxLength` a text input sizes compact by itself. */
+const COMPACT_TEXT_LENGTH = 16;
+
+interface NumberWidthOptions {
+  width?: InputWidth;
+  min?: number;
+  max?: number;
+}
+
+interface TextWidthOptions {
+  width?: InputWidth;
+  maxLength?: number;
+}
+
+function integerDigits(value: number): number {
+  return String(Math.trunc(Math.abs(value))).length;
+}
+
+/**
+ * Whether a number input takes a compact width: asked for, or left out with
+ * a `max` (and `min`) that keep the value within a few digits. Without a
+ * `max` nothing bounds the value, so it fills the row.
+ */
+export function isCompactNumberInput({
+  width,
+  min,
+  max,
+}: NumberWidthOptions): boolean {
+  if (width) return width === "compact";
+  if (max === undefined || !Number.isFinite(max)) return false;
+  const bounds = min === undefined ? [max] : [min, max];
+  return Math.max(...bounds.map(integerDigits)) <= COMPACT_NUMBER_DIGITS;
+}
+
+/**
+ * Whether a text input takes a compact width: asked for, or left out with a
+ * `maxLength` short enough for a code or an abbreviation.
+ */
+export function isCompactTextInput({
+  width,
+  maxLength,
+}: TextWidthOptions): boolean {
+  if (width) return width === "compact";
+  return maxLength !== undefined && maxLength <= COMPACT_TEXT_LENGTH;
+}

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

@@ -1,3 +1,4 @@
+import { readableNumberFormat } from "#dms-core/app/utils/formatter";
 import type {
   InputNumberAdjustment,
   InputNumberAdjustmentReason,
@@ -15,7 +16,7 @@ const WHITESPACE = /\s/g;
 const NOT_NUMERIC = /[^\d.+-]/g;
 
 function separatorsOf(locale: string): { group?: string; decimal: string } {
-  const parts = new Intl.NumberFormat(locale).formatToParts(SEPARATOR_SAMPLE);
+  const parts = readableNumberFormat(locale).formatToParts(SEPARATOR_SAMPLE);
   return {
     group: parts.find((part) => part.type === "group")?.value,
     decimal: parts.find((part) => part.type === "decimal")?.value ?? ".",
@@ -23,8 +24,10 @@ function separatorsOf(locale: string): { group?: string; decimal: string } {
 }
 
 /**
- * A number as typed in a field written in `locale` ("1,020", "1 020,5"):
- * `null` when nothing is typed or it does not read as a number.
+ * A number as typed in a field written in `locale` ("1,020", "1 020,5"),
+ * its digits grouped by any space (the narrow one the field draws in French,
+ * the no-break one the cells write, a typed one): `null` when nothing is
+ * typed or it does not read as a number.
  */
 export function parseTypedNumber(text: string, locale: string): number | null {
   const { group, decimal } = separatorsOf(locale);