@antelopejs/dms 0.4.3 → 0.4.5

package/frontend-vue/layers/dms-core/app/composables/useApiError.ts

@@ -6,12 +6,16 @@ interface Options {
 
 interface ApiError {
   statusCode?: number;
+  status?: number;
   message?: string;
   data?: unknown;
 }
 
-const DEFAULT_TITLE_KEY = "error.500.title";
+const SERVER_ERROR_TITLE_KEY = "error.500.title";
+const CLIENT_ERROR_TITLE_KEY = "error.request_refused.title";
 const FALLBACK_ERROR_KEY = "error.500.description";
+const CLIENT_ERROR_STATUS_MIN = 400;
+const CLIENT_ERROR_STATUS_MAX = 499;
 
 function isApiError(error: unknown): error is ApiError {
   return typeof error === "object" && error !== null;
@@ -32,6 +36,27 @@ function resolveDescription(error: ApiError): string {
   return FALLBACK_ERROR_KEY;
 }
 
+function isClientErrorStatus(status: number | undefined): boolean {
+  return (
+    status !== undefined &&
+    status >= CLIENT_ERROR_STATUS_MIN &&
+    status <= CLIENT_ERROR_STATUS_MAX
+  );
+}
+
+/**
+ * The i18n title key matching a fetch error's HTTP status: a 4xx is a request
+ * the backend refused, anything else (5xx, network failure) a server error.
+ */
+export function resolveApiErrorTitle(error: unknown): string {
+  const status = isApiError(error)
+    ? (error.statusCode ?? error.status)
+    : undefined;
+  return isClientErrorStatus(status)
+    ? CLIENT_ERROR_TITLE_KEY
+    : SERVER_ERROR_TITLE_KEY;
+}
+
 /**
  * Extract the backend's error body from a fetch error — an i18n message key
  * per the API error contract — falling back to the generic 500 key.
@@ -46,7 +71,7 @@ export function useApiError(error: unknown, options?: Options) {
   const { t } = dmsApp.$i18n;
   const translate = (message: string) => resolveApiMessage(t, message);
 
-  const title = options?.title || DEFAULT_TITLE_KEY;
+  const title = options?.title || resolveApiErrorTitle(error);
   const description = options?.description || resolveApiErrorMessage(error);
 
   toast.add({

package/frontend-vue/layers/dms-core/app/utils/menu.ts

@@ -1,4 +1,5 @@
 import type { NavigationMenuItem } from "@nuxt/ui";
+import { parseLinkQuery, stripQueryAndHash } from "./routePath";
 
 // Menu items carry the registered page/category's dot-separated `fullId`
 // (e.g. `pages.erp.orders`) plus the DMS semantic fields; Nuxt UI's
@@ -88,7 +89,9 @@ const matchesRoutePrefix = (currentPath: string, to: string): boolean => {
 const resolveItemTarget = (
   to: NavigationMenuItem["to"],
 ): MenuItemTarget | null => {
-  if (typeof to === "string") return { path: to };
+  if (typeof to === "string") {
+    return { path: stripQueryAndHash(to), query: parseLinkQuery(to) };
+  }
   const target = to as MenuItemTarget | undefined;
   if (target && typeof target.path === "string") {
     return { path: target.path, query: target.query };
@@ -96,9 +99,11 @@ const resolveItemTarget = (
   return null;
 };
 
-// Subset match, mirroring the `exactQuery: "partial"` the entries are built
-// with: the entry's own parameters must be the current ones, while unrelated
-// parameters the page adds (tabs, filters) are ignored.
+const hasQuery = (target: MenuItemTarget | null): boolean =>
+  Object.keys(target?.query ?? {}).length > 0;
+
+// Subset match: the entry's own parameters must be the current ones, while
+// unrelated parameters the page adds (tabs, filters) are ignored.
 const queryMatches = (
   declared: MenuItemTarget["query"],
   currentQuery: Record<string, unknown>,
@@ -133,18 +138,29 @@ export const isMenuItemActive = (
   return matchedFullId !== null && fullId === matchedFullId;
 };
 
-// Only the boolean `true` is set: Nuxt UI forwards an explicit `active` to the
-// underlying link, and a `false` there would suppress the built-in route match.
-// Leaving it undefined preserves that native highlighting for every other item.
+// Only the boolean `true` is set on plain entries: Nuxt UI forwards an explicit
+// `active` to the underlying link, and a `false` there would suppress the
+// built-in route match. Entries carrying a query always get an explicit value,
+// because that built-in match is a URL prefix test that would light up
+// `?project=a` on `?project=ab`.
+const resolveActiveState = (
+  item: NavigationMenuItem,
+  matchedFullId: string | null,
+  currentRoute: MenuRouteState,
+): Partial<Pick<NavigationMenuItem, "active">> => {
+  if (isMenuItemActive(item, matchedFullId, currentRoute)) {
+    return { active: true };
+  }
+  return hasQuery(resolveItemTarget(item.to)) ? { active: false } : {};
+};
+
 export const addActiveStateToMenuItem = (
   item: NavigationMenuItem,
   matchedFullId: string | null,
   currentRoute: MenuRouteState,
 ): NavigationMenuItem => ({
   ...item,
-  ...(isMenuItemActive(item, matchedFullId, currentRoute)
-    ? { active: true }
-    : {}),
+  ...resolveActiveState(item, matchedFullId, currentRoute),
   children: item.children?.map((child) =>
     addActiveStateToMenuItem(child, matchedFullId, currentRoute),
   ),

package/frontend-vue/layers/dms-core/app/utils/routePath.ts

@@ -9,3 +9,26 @@ export function stripQueryAndHash(link: string): string {
   const [path] = link.split(QUERY_OR_HASH);
   return path ?? link;
 }
+
+/**
+ * A link to `path` narrowed by `query`, as the single string every link
+ * renderer accepts: the Inertia-backed `ULink` only takes a string `to`, and
+ * stringifies an object into `[object Object]`.
+ */
+export function buildLinkWithQuery(
+  path: string,
+  query: Record<string, string> | undefined,
+): string {
+  const search = new URLSearchParams(query ?? {}).toString();
+  return search === "" ? path : `${path}?${search}`;
+}
+
+/** The query parameters a link carries, the inverse of `buildLinkWithQuery`. */
+export function parseLinkQuery(link: string): Record<string, string> {
+  const [withoutHash = ""] = link.split("#");
+  const queryStart = withoutHash.indexOf("?");
+  if (queryStart === -1) return {};
+  return Object.fromEntries(
+    new URLSearchParams(withoutHash.slice(queryStart + 1)),
+  );
+}

package/frontend-vue/layers/dms-core/i18n/locales/core-en-GB.json

@@ -37,6 +37,9 @@
       "title": "Server error",
       "description": "An unexpected error occurred. Please try again later."
     },
+    "request_refused": {
+      "title": "Request refused"
+    },
     "recovering": {
       "title": "Restoring your session...",
       "description": "Your session has expired. Refreshing your access and reloading the page."

package/frontend-vue/layers/dms-core/i18n/locales/core-fr-FR.json

@@ -37,6 +37,9 @@
       "title": "Erreur serveur",
       "description": "Une erreur inattendue s'est produite. Veuillez réessayer plus tard."
     },
+    "request_refused": {
+      "title": "Requête refusée"
+    },
     "recovering": {
       "title": "Restauration de votre session...",
       "description": "Votre session a expiré. Renouvellement de l'accès et rechargement de la page."

package/frontend-vue/layers/dms-core/shared/types/runtime-config.d.ts

@@ -43,7 +43,10 @@ interface DmsPrivateConfig {
     relaySecret: string;
     /**
      * Whether a trusted reverse proxy sits immediately in front and appends
-     * to `x-forwarded-for`; drives the OAuth rate-limit client key.
+     * to `x-forwarded-for`.
+     *
+     * @deprecated Mirrors the deprecated `auth.oauth.trustProxy`. The frontend
+     * server keys its OAuth rate limit on its own `DMS_TRUSTED_PROXY_HOPS`.
      */
     trustProxy?: boolean;
   };

package/frontend-vue/layers/dms-layout/app/app.config.ts

@@ -134,7 +134,15 @@ export default {
     button: {
       slots: {
         // Tactile press + full transition (design .btn active:scale(.97)).
-        base: "transition active:scale-[0.98]",
+        // Nuxt UI only fades a disabled button to 75%, which still reads as
+        // enabled on a filled primary: fade it further and drop the press and
+        // the inset highlight so every variant looks inert.
+        base: [
+          "transition active:scale-[0.98]",
+          "disabled:opacity-50 aria-disabled:opacity-50",
+          "disabled:active:scale-100 aria-disabled:active:scale-100",
+          "disabled:shadow-none aria-disabled:shadow-none",
+        ].join(" "),
       },
       compoundVariants: [
         // Inset top highlight on the solid primary fill (design .btn-primary).

package/frontend-vue/layers/dms-layout/app/components/navigation/CollapsedMenuItem.vue

@@ -82,11 +82,6 @@ function onLinkHover(): void {
   const { to } = props.item;
   if (typeof to === "string") {
     prefetchPageLayout(stripQueryAndHash(to));
-    return;
-  }
-  const path = (to as MenuItemTarget | undefined)?.path;
-  if (path) {
-    prefetchPageLayout(path);
   }
 }
 </script>

package/frontend-vue/layers/dms-layout/app/components/profile/ProfileLanguage.vue

@@ -1,8 +1,7 @@
 <script setup lang="ts">
-const { locale, setLocale } = useI18n();
+const { locale } = useI18n();
 const { uniqueLocales } = useUniqueLocales();
-const { $authFetch } = useAuthFetch();
-const { user, fetch: refreshUser } = useUserSession();
+const { changeLanguage } = useUserLanguage();
 
 const languageOptions = computed(() =>
   uniqueLocales.value.map((lang) => ({
@@ -10,25 +9,6 @@ const languageOptions = computed(() =>
     value: lang.code,
   })),
 );
-
-const handleLanguageChange = async (newLanguage: "en" | "fr") => {
-  setLocale(newLanguage);
-
-  try {
-    await $authFetch("/settings/user/profile", {
-      method: "POST",
-      body: {
-        name: user.value?.name,
-        email: user.value?.email,
-        language: newLanguage,
-      },
-    });
-
-    await refreshUser();
-  } catch {
-    /* ignore — silently skip the update on network / backend errors */
-  }
-};
 </script>
 
 <template>
@@ -62,7 +42,7 @@ const handleLanguageChange = async (newLanguage: "en" | "fr") => {
             class="w-full"
             :items="languageOptions"
             :model-value="locale"
-            @update:model-value="handleLanguageChange"
+            @update:model-value="changeLanguage"
           />
         </div>
       </section>

package/frontend-vue/layers/dms-layout/app/composables/profile/useUserLanguage.ts

@@ -0,0 +1,33 @@
+const PROFILE_ENDPOINT = "/settings/user/profile";
+
+/**
+ * Switches the interface language and stores it on the user's profile, so the
+ * `language-sync` plugin re-applies it on the next load instead of reverting
+ * to the previously stored language. Every language switcher goes through it.
+ */
+export function useUserLanguage() {
+  const dmsApp = useDmsApp();
+  const { $authFetch } = useAuthFetch();
+  const { user, fetch: refreshUser } = useUserSession();
+
+  async function changeLanguage(language: string): Promise<void> {
+    await dmsApp.$i18n.setLocale(language);
+
+    try {
+      await $authFetch(PROFILE_ENDPOINT, {
+        method: "POST",
+        body: {
+          name: user.value?.name,
+          email: user.value?.email,
+          language,
+        },
+      });
+
+      await refreshUser();
+    } catch {
+      /* ignore — silently skip the update on network / backend errors */
+    }
+  }
+
+  return { changeLanguage };
+}

package/frontend-vue/layers/dms-layout/app/plugins/command-palette-session.client.ts

@@ -34,6 +34,7 @@ export default defineDmsPlugin(() => {
   const { i18n, translate } = getPluginI18n();
   const toast = useToast();
   const { logout } = useLogout();
+  const { changeLanguage } = useUserLanguage();
   const { copy } = useClipboard({ legacy: true });
 
   const localeItems = (): CommandPaletteItem[] =>
@@ -41,7 +42,7 @@ export default defineDmsPlugin(() => {
       label: locale.name ?? locale.code,
       active: i18n.locale.value === locale.code,
       onSelect: () => {
-        void i18n.setLocale(locale.code);
+        void changeLanguage(locale.code);
       },
     }));
 

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

@@ -1,8 +1,10 @@
 import { defineAsyncComponent, type VNode } from "vue";
 import type { DataType } from "#dms-core/app/composables/data-types/useDataType";
 import UAvatar from "@nuxt/ui/components/Avatar.vue";
+import UBadge from "@nuxt/ui/components/Badge.vue";
 import UIcon from "@nuxt/ui/runtime/vue/components/Icon.vue";
 import ULink from "@nuxt/ui/components/Link.vue";
+import { buildRelationBadges } from "./relationBadges";
 
 const FilePreview = defineAsyncComponent(
   () => import("../../../components/table-view/FilePreview.vue"),
@@ -37,6 +39,9 @@ const LINK_CLASS =
 const LINK_ICON_CLASS = "size-3 text-primary/70 flex-shrink-0";
 const LINK_ICON_NAME = "i-ph-arrow-up-right-light";
 const DEFAULT_RELATION_VALUE_KEY = "_id";
+const DEFAULT_RELATION_LABEL_KEY = "name";
+const RELATION_BADGES_CLASS = "inline-flex flex-wrap items-center gap-1";
+const RELATION_BADGE_CLASS = "max-w-40";
 const PERMISSION_SEPARATOR = ".";
 
 interface LinkRendererOptions {
@@ -263,18 +268,41 @@ function countLeafPermissions(value: string[]): number {
   return value.filter((id) => !parentIds.has(id)).length;
 }
 
+function renderRelationBadge(label: string, title?: string) {
+  return h(UBadge, {
+    label,
+    title: title ?? label,
+    color: "neutral",
+    variant: "subtle",
+    size: Size.small,
+    class: RELATION_BADGE_CLASS,
+  });
+}
+
+function renderRelationBadges(values: unknown[], labelKey: string) {
+  const { processI18n } = useTranslation();
+  const { visible, hidden } = buildRelationBadges(values, labelKey);
+  const badges = visible.map((label) =>
+    renderRelationBadge(processI18n(label)),
+  );
+  if (hidden.length > 0) {
+    const hiddenLabels = hidden.map((label) => processI18n(label)).join(", ");
+    badges.push(renderRelationBadge(`+${hidden.length}`, hiddenLabels));
+  }
+  return h("span", { class: RELATION_BADGES_CLASS }, badges);
+}
+
 function renderRelation(value: unknown, options: unknown) {
-  const { t } = useI18n();
   const opts = options as RelationOptions | undefined;
+  const labelKey = opts?.keyMapping?.label || DEFAULT_RELATION_LABEL_KEY;
 
   if (opts?.multiple && Array.isArray(value)) {
-    return t("dms.form.relation.selected_count", { count: value.length });
+    return renderRelationBadges(value, labelKey);
   }
 
   if (!value || !isObject(value)) return value;
 
   const valueObject = value as Record<string, string>;
-  const labelKey = opts?.keyMapping?.label || "name";
   const avatarKey = opts?.keyMapping?.avatar;
   const label = valueObject[labelKey] || String(value);
 

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

@@ -0,0 +1,36 @@
+/** How many labels a multi-value relation cell shows before collapsing. */
+export const MAX_RELATION_BADGES = 3;
+
+/** The labels a multi-value cell shows, and how many it folds into `+N`. */
+export interface RelationBadges {
+  visible: string[];
+  hidden: string[];
+}
+
+function readRelationLabel(item: unknown, labelKey: string): string {
+  if (typeof item === "object" && item !== null) {
+    const label = (item as Record<string, unknown>)[labelKey];
+    return label === undefined || label === null ? "" : String(label);
+  }
+  return item === undefined || item === null ? "" : String(item);
+}
+
+/**
+ * Split a multi-value relation into the labels rendered as badges and the ones
+ * folded into a trailing `+N`. List rows carry the related rows resolved by the
+ * relation join, so each item is read through the `label` key mapping; a raw id
+ * (join skipped) is shown as is rather than dropped.
+ */
+export function buildRelationBadges(
+  values: unknown[],
+  labelKey: string,
+  maxVisible = MAX_RELATION_BADGES,
+): RelationBadges {
+  const labels = values
+    .map((item) => readRelationLabel(item, labelKey))
+    .filter((label) => label !== "");
+  return {
+    visible: labels.slice(0, maxVisible),
+    hidden: labels.slice(maxVisible),
+  };
+}

package/frontend-vue/layers/dms-ui/app/build/types/tree.ts

@@ -1,4 +1,5 @@
 import type { LinkProps, NavigationMenuItem } from "@nuxt/ui";
+import { buildLinkWithQuery } from "#dms-core/app/utils/routePath";
 
 export interface TreeItem extends LinkProps {
   id: string;
@@ -29,18 +30,13 @@ function isExcludedFromRoot(item: SiteLayoutTree): boolean {
 
 // A registered entry links to its own slug, narrowed by the query parameters it
 // declares so a single page (with `validation.requiredQueryParams`) can back
-// several entries. `exactQuery: "partial"` keeps sibling entries of that page
-// from all highlighting at once while tolerating unrelated query parameters.
-export function buildMenuItemTarget(
-  item: SiteLayoutTree,
-): MenuItemTarget | string | undefined {
+// several entries. The sidebar tells those sibling entries apart itself (see
+// `isMenuItemActive`), so the link stays a plain string.
+export function buildMenuItemTarget(item: SiteLayoutTree): string | undefined {
   if (!item.layoutUrl) {
     return undefined;
   }
-  if (!item.query || Object.keys(item.query).length === 0) {
-    return item.fullSlug;
-  }
-  return { path: item.fullSlug, query: item.query };
+  return buildLinkWithQuery(item.fullSlug, item.query);
 }
 
 function buildNavigationItem(
@@ -54,7 +50,6 @@ function buildNavigationItem(
     label: item.displayName,
     icon: item.icon,
     to,
-    ...(typeof to === "object" ? { exactQuery: "partial" } : {}),
     variant: item.variant,
     status: item.status,
     children: children.length > 0 ? children : undefined,

package/frontend-vue/layers/dms-ui/app/components/Placeholder.vue

@@ -5,19 +5,31 @@ interface PlaceholderProps {
   width?: string;
 }
 
+/** What a box nobody sized is worth showing at, when nothing stretches it. */
+const MIN_HEIGHT = "120px";
+
 const props = withDefaults(defineProps<PlaceholderProps>(), {
   label: undefined,
-  height: "120px",
+  height: undefined,
   width: undefined,
 });
+
+/**
+ * A placeholder stands in for content still to come, so it takes the room it is
+ * given: a height of its own would keep it short in a row sized by its tallest
+ * cell, and a layout laid out with these could not be read for what it will be.
+ * A given height still wins, and a floor keeps a lone one visible.
+ */
+const box = computed(() => ({
+  height: props.height,
+  minHeight: props.height ? undefined : MIN_HEIGHT,
+  width: props.width,
+}));
 </script>
 
 <template>
   <div
-    :style="{
-      height: props.height,
-      width: props.width,
-    }"
+    :style="box"
     class="border-accented relative flex items-center justify-center overflow-hidden rounded-md border border-dashed px-4 opacity-75"
   >
     <svg

package/frontend-vue/layers/dms-ui/app/components/chart/ChartCard.vue

@@ -1,7 +1,10 @@
 <script setup lang="ts">
 import { computed, provide, reactive, watchEffect } from "vue";
 import { useChartFetch } from "../../composables/chart/useChartFetch";
-import { formatValue } from "../../composables/chart/formatValue";
+import {
+  ABSENT_VALUE_TEXT,
+  formatValue,
+} from "../../composables/chart/formatValue";
 import { resolveChartColor } from "../../composables/chart/useChartTheme";
 import { useThemeRevision } from "../../composables/chart/useThemeRevision";
 import {
@@ -64,7 +67,7 @@ const { data, isLoading } = useChartFetch<ChartCardResponse>({
   watchSource: () => watchKey.value,
 });
 
-const value = computed(() => data.value?.value ?? 0);
+const value = computed(() => data.value?.value);
 const previousValue = computed(() => data.value?.previousValue);
 const delta = computed(() => data.value?.delta ?? null);
 
@@ -87,13 +90,15 @@ const cardComparisonSeries = computed<ChartSeries[]>(() =>
 );
 
 const formatted = computed(() =>
-  formatValue(
-    value.value,
-    props.valueFormat,
-    locale.value,
-    props.currencyCode,
-    props.valuePrecision,
-  ),
+  value.value === undefined
+    ? ABSENT_VALUE_TEXT
+    : formatValue(
+        value.value,
+        props.valueFormat,
+        locale.value,
+        props.currencyCode,
+        props.valuePrecision,
+      ),
 );
 
 const previousFormatted = computed(() =>

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

@@ -3,6 +3,7 @@ import type { FormProps } from "../../composables/form/types";
 import type { FormFieldValue } from "../../composables/form/types/value";
 import {
   cloneFormValue,
+  formShowsActions,
   isFieldMarkedRequired,
 } from "../../composables/form/useForm";
 import {
@@ -20,7 +21,12 @@ const REALTIME_ROW_TOPIC_PREFIX = "tableview:row:";
 const REALTIME_GET_SEGMENT = "/get";
 const REALTIME_EVENT_UPDATED = "updated";
 
-const props = defineProps<FormProps>();
+// `showActions` left out has to read as left out: Vue casts an absent boolean
+// prop to `false`, which would hide the buttons of every form not asking for
+// them.
+const props = withDefaults(defineProps<FormProps>(), {
+  showActions: undefined,
+});
 const form = useTemplateRef("form");
 
 // Inside a DynamicModal/DynamicDrawer the container already provides the
@@ -47,10 +53,7 @@ const {
   resolvedFetchUrl,
 } = useForm(props);
 
-const showActions = computed(
-  () =>
-    !!props.submitUrl && !toValue(allFields).every((field) => field.disabled),
-);
+const showActions = computed(() => formShowsActions(props, toValue(allFields)));
 
 const { addGuard } = useLeaveGuard();
 const { confirm } = useConfirm();

package/frontend-vue/layers/dms-ui/app/components/grid/Grid.vue

@@ -13,19 +13,29 @@ const props = withDefaults(defineProps<GridProps>(), {
   minColumnWidth: GRID_DEFAULT_MIN_COLUMN_WIDTH,
 });
 
-const rowColumnCounts = ref<number[]>([]);
+/**
+ * Keyed by row rather than appended to: a list that only grows keeps counting
+ * rows that have gone and widths that were never asked for, so the grid ends up
+ * reserving columns nothing fills.
+ */
+const rowColumnCounts = ref(new Map<symbol, number>());
 
 const maxColumns = computed(() => {
-  if (rowColumnCounts.value.length === 0) return 1;
-  return Math.max(...rowColumnCounts.value);
+  const counts = [...rowColumnCounts.value.values()].filter(
+    (count) => count > 0,
+  );
+  return counts.length === 0 ? 1 : Math.max(...counts);
 });
 
 const gapRef = computed(() => props.gap);
 const minColumnWidthRef = computed(() => props.minColumnWidth);
 
 provide<GridContext>(GRID_CONTEXT, {
-  registerRowColumnCount: (columnCount: number) => {
-    rowColumnCounts.value.push(columnCount);
+  setRowColumnCount: (row: symbol, columnCount: number) => {
+    rowColumnCounts.value.set(row, columnCount);
+  },
+  dropRow: (row: symbol) => {
+    rowColumnCounts.value.delete(row);
   },
   maxColumns,
   gap: gapRef,

package/frontend-vue/layers/dms-ui/app/components/grid/GridRow.vue

@@ -11,10 +11,13 @@ const props = defineProps<GridRowProps>();
 
 const gridContext = inject<GridContext>(GRID_CONTEXT);
 
-const columnCount = props.childCount || 0;
-if (gridContext) {
-  gridContext.registerRowColumnCount(columnCount);
-}
+/** The identity this row counts under, so its width dies with it. */
+const rowId = Symbol("grid-row");
+
+const columnCount = computed(() => props.childCount || 0);
+
+watchEffect(() => gridContext?.setRowColumnCount(rowId, columnCount.value));
+onUnmounted(() => gridContext?.dropRow(rowId));
 
 const rowStyle = computed(() => {
   const gap = gridContext?.gap.value ?? DEFAULT_GAP;

package/frontend-vue/layers/dms-ui/app/components/grid/constants.ts

@@ -1,7 +1,14 @@
 export const GRID_CONTEXT = Symbol("grid-context");
 
 export interface GridContext {
-  registerRowColumnCount: (count: number) => void;
+  /**
+   * A row states how many columns it holds, and says so again whenever that
+   * changes: a row built by hand never moves, but one an editor fills gains and
+   * loses children while the page is open.
+   */
+  setRowColumnCount: (row: symbol, count: number) => void;
+  /** A row that unmounts stops counting, so a stale width cannot outlive it. */
+  dropRow: (row: symbol) => void;
   maxColumns: ComputedRef<number>;
   gap: ComputedRef<string>;
   minColumnWidth: ComputedRef<string>;