@antelopejs/dms 0.3.6 → 0.3.8

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

@@ -1,4 +1,8 @@
-import type { FormContainer } from "./useTableViewConfig";
+import {
+  fillFormPageUrl,
+  type FormContainer,
+  type FormPageUrls,
+} from "./useTableViewConfig";
 import type { FormProps } from "../../../composables/form/types";
 import type { QueryParamFilters } from "../../../composables/table-view/types";
 import type {
@@ -38,6 +42,8 @@ interface TableRowActionsConfig {
     view?: ComponentInfo<FormProps>;
   };
   formContainer?: FormContainer;
+  formPages?: FormPageUrls;
+  routeParams?: Record<string, string>;
   componentId: string;
   pageId: string;
   queryParamFilters?: QueryParamFilters;
@@ -83,20 +89,6 @@ export const useTableRowActions = <T extends Data>(
     return Object.keys(forwarded).length > 0 ? forwarded : undefined;
   };
 
-  const resolveFormPageUrl = (urlSlug: string): string => {
-    if (urlSlug.startsWith("/")) return urlSlug;
-    const baseSegments = route.path.replace(/\/$/, "").split("/");
-    const parts = urlSlug.split("/");
-    let popCount = 0;
-    let partStart = 0;
-    while (partStart < parts.length && parts[partStart] === "..") {
-      popCount++;
-      partStart++;
-    }
-    const base = baseSegments.slice(0, baseSegments.length - popCount);
-    return [...base, ...parts.slice(partStart)].join("/");
-  };
-
   const handleApiError = (error: unknown, defaultMessage: string) => {
     const err = error as Record<string, unknown>;
     const errData = err?.data as Record<string, unknown> | string | undefined;
@@ -335,10 +327,9 @@ export const useTableRowActions = <T extends Data>(
   };
 
   const openRowByIdImpl = (itemId: string, item?: T) => {
-    if (getContainerType() === FormContainerType.page) {
-      const viewSlug = config.formContainer?.pages?.view?.urlSlug || ":id/view";
-      const viewUrl = resolveFormPageUrl(viewSlug).replace(":id", itemId);
-      navigateDms(viewUrl);
+    const viewPageUrl = config.formPages?.view;
+    if (getContainerType() === FormContainerType.page && viewPageUrl) {
+      navigateDms(fillFormPageUrl(viewPageUrl, config.routeParams, itemId));
       return;
     }
 
@@ -355,12 +346,15 @@ export const useTableRowActions = <T extends Data>(
   const editRowImpl = (item: T, submitDefaults?: Record<string, unknown>) => {
     const itemId = getItemId(item, config.rowIdKey ?? DEFAULT_ROW_ID_KEY);
 
-    if (getContainerType() === FormContainerType.page && itemId) {
-      const editSlug = config.formContainer?.pages?.edit?.urlSlug || ":id/edit";
-      const editUrl = resolveFormPageUrl(editSlug).replace(":id", itemId);
+    const editPageUrl = config.formPages?.edit;
+    if (
+      getContainerType() === FormContainerType.page &&
+      itemId &&
+      editPageUrl
+    ) {
       const forwardedQuery = buildForwardedQuery();
       navigateDms({
-        path: editUrl,
+        path: fillFormPageUrl(editPageUrl, config.routeParams, itemId),
         ...(forwardedQuery ? { query: forwardedQuery } : {}),
       });
       return;
@@ -377,11 +371,11 @@ export const useTableRowActions = <T extends Data>(
   };
 
   const newRowImpl = (submitDefaults?: Record<string, unknown>) => {
-    if (getContainerType() === FormContainerType.page) {
-      const newSlug = config.formContainer?.pages?.new?.urlSlug || "new";
+    const newPageUrl = config.formPages?.new;
+    if (getContainerType() === FormContainerType.page && newPageUrl) {
       const forwardedQuery = buildForwardedQuery();
       navigateDms({
-        path: resolveFormPageUrl(newSlug),
+        path: fillFormPageUrl(newPageUrl, config.routeParams),
         ...(forwardedQuery ? { query: forwardedQuery } : {}),
       });
       return;
@@ -396,10 +390,10 @@ export const useTableRowActions = <T extends Data>(
   };
 
   const duplicateRowImpl = (itemId: string) => {
-    if (getContainerType() === FormContainerType.page) {
-      const newSlug = config.formContainer?.pages?.new?.urlSlug || "new";
+    const newPageUrl = config.formPages?.new;
+    if (getContainerType() === FormContainerType.page && newPageUrl) {
       navigateDms({
-        path: resolveFormPageUrl(newSlug),
+        path: fillFormPageUrl(newPageUrl, config.routeParams),
         query: { duplicate: itemId },
       });
       return;

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

@@ -1,13 +1,16 @@
 <script setup lang="ts">
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import { GRID_CONTEXT, type GridContext } from "./constants";
+import { GRID_DEFAULT_MIN_COLUMN_WIDTH, gridColumnsTemplate } from "./columns";
 
 interface GridProps extends DefaultComponentProps {
   gap?: string;
+  minColumnWidth?: string;
 }
 
 const props = withDefaults(defineProps<GridProps>(), {
   gap: "1rem",
+  minColumnWidth: GRID_DEFAULT_MIN_COLUMN_WIDTH,
 });
 
 const rowColumnCounts = ref<number[]>([]);
@@ -18,6 +21,7 @@ const maxColumns = computed(() => {
 });
 
 const gapRef = computed(() => props.gap);
+const minColumnWidthRef = computed(() => props.minColumnWidth);
 
 provide<GridContext>(GRID_CONTEXT, {
   registerRowColumnCount: (columnCount: number) => {
@@ -25,11 +29,16 @@ provide<GridContext>(GRID_CONTEXT, {
   },
   maxColumns,
   gap: gapRef,
+  minColumnWidth: minColumnWidthRef,
 });
 
 const gridStyle = computed(() => ({
   display: "grid",
-  gridTemplateColumns: `repeat(${maxColumns.value}, 1fr)`,
+  gridTemplateColumns: gridColumnsTemplate(
+    maxColumns.value,
+    props.gap,
+    props.minColumnWidth,
+  ),
   gap: props.gap,
   width: "100%",
 }));

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

@@ -1,9 +1,12 @@
 <script setup lang="ts">
 import type { DefaultComponentProps } from "../../../../dms-core/app/types/component";
 import { GRID_CONTEXT, type GridContext } from "./constants";
+import { GRID_DEFAULT_MIN_COLUMN_WIDTH, gridColumnsTemplate } from "./columns";
 
 interface GridRowProps extends DefaultComponentProps {}
 
+const DEFAULT_GAP = "1rem";
+
 const props = defineProps<GridRowProps>();
 
 const gridContext = inject<GridContext>(GRID_CONTEXT);
@@ -13,12 +16,19 @@ if (gridContext) {
   gridContext.registerRowColumnCount(columnCount);
 }
 
-const rowStyle = computed(() => ({
-  gridColumn: "1 / -1",
-  display: "grid",
-  gridTemplateColumns: `repeat(${gridContext?.maxColumns.value || 1}, 1fr)`,
-  gap: gridContext?.gap.value ?? "1rem",
-}));
+const rowStyle = computed(() => {
+  const gap = gridContext?.gap.value ?? DEFAULT_GAP;
+  return {
+    gridColumn: "1 / -1",
+    display: "grid",
+    gridTemplateColumns: gridColumnsTemplate(
+      gridContext?.maxColumns.value || 1,
+      gap,
+      gridContext?.minColumnWidth.value ?? GRID_DEFAULT_MIN_COLUMN_WIDTH,
+    ),
+    gap,
+  };
+});
 </script>
 
 <template>

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

@@ -0,0 +1,29 @@
+const SINGLE_COLUMN = 1;
+
+/** Track floor below which a column stops being usable, as a CSS length. */
+export const GRID_DEFAULT_MIN_COLUMN_WIDTH = "240px";
+
+/**
+ * The column track template a `Grid` and every `GridRow` inside it share.
+ *
+ * `auto-fill` drops tracks as the container narrows, which is what makes the
+ * grid responsive without a breakpoint list. The track floor is the larger of
+ * `minColumnWidth` and the width one column would have at `maxColumns`: once
+ * the container is wide enough, that share exceeds `minColumnWidth` and leaves
+ * no room for an extra track, so `auto-fill` settles on exactly `maxColumns`
+ * and the wide layout stays what it was. The outer `min(100%, ...)` keeps a
+ * container narrower than `minColumnWidth` from overflowing it.
+ *
+ * Rows resolve this same template against the same width, so they keep lining
+ * up on one another — what `maxColumns` was introduced for — at every width
+ * rather than only at the widest.
+ */
+export function gridColumnsTemplate(
+  maxColumns: number,
+  gap: string,
+  minColumnWidth: string,
+): string {
+  const columns = Math.max(maxColumns, SINGLE_COLUMN);
+  const columnShare = `(100% - ${columns - SINGLE_COLUMN} * ${gap}) / ${columns}`;
+  return `repeat(auto-fill, minmax(min(100%, max(${minColumnWidth}, ${columnShare})), 1fr))`;
+}

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

@@ -4,4 +4,5 @@ export interface GridContext {
   registerRowColumnCount: (count: number) => void;
   maxColumns: ComputedRef<number>;
   gap: ComputedRef<string>;
+  minColumnWidth: ComputedRef<string>;
 }

package/frontend-vue/layers/dms-ui/app/components/table-view/TableView.vue

@@ -88,6 +88,7 @@ const {
   customButtons,
   formComponents,
   formContainer,
+  formPages,
   componentId,
   pageId,
   defaultSort,
@@ -599,6 +600,8 @@ const {
   refreshCallback: refreshAll,
   formComponents,
   formContainer,
+  formPages,
+  routeParams,
   componentId: componentId!,
   pageId: pageId!,
   queryParamFilters,

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

@@ -96,18 +96,24 @@ function processFieldI18n(
   };
 }
 
-interface ReplaceUrlVariablesContext {
+// `{{params.id}}` takes the bare name, which on a route repeating a placeholder
+// is its last occurrence — the row id of a form page. The `:<n>` suffix reaches
+// a specific occurrence, `{{params.id:1}}` being the id of the page carrying the
+// table view (see extractRouteParams).
+const PARAM_TOKEN = /\{\{params\.(\w+(?::\d+)?)\}\}/g;
+
+export interface ReplaceUrlVariablesContext {
   routeParams?: Record<string, string>;
   routeQuery: Record<string, unknown>;
   response?: Record<string, unknown>;
 }
 
-function replaceUrlVariables(
+export function replaceUrlVariables(
   url: string,
   context: ReplaceUrlVariablesContext,
 ): string {
   let processedUrl = url.replace(
-    /\{\{params\.(\w+)\}\}/g,
+    PARAM_TOKEN,
     (match, key) => context.routeParams?.[key] || match,
   );
 
@@ -177,6 +183,30 @@ function collectSubmitData(
   };
 }
 
+// `submitDefaults` string values may contain `{{query.X}}` / `{{params.X}}`
+// tokens (e.g. a "new" form generated from `queryParamFilters`). Resolve them
+// against the current route at submit time; drop entries whose tokens cannot
+// be resolved so an unfiltered form doesn't submit a literal `{{...}}`.
+export function resolveSubmitDefaults(
+  submitDefaults: Record<string, unknown> | undefined,
+  context: ReplaceUrlVariablesContext,
+): Record<string, unknown> | undefined {
+  if (!submitDefaults) return undefined;
+
+  const resolved: Record<string, unknown> = {};
+  for (const [key, value] of Object.entries(submitDefaults)) {
+    if (typeof value === "string" && value.includes("{{")) {
+      const replaced = replaceUrlVariables(value, context);
+      if (replaced.includes("{{")) continue;
+      resolved[key] = replaced;
+    } else {
+      resolved[key] = value;
+    }
+  }
+
+  return Object.keys(resolved).length > 0 ? resolved : undefined;
+}
+
 export function makeFieldSchemaRequired(schema: z.ZodTypeAny): z.ZodTypeAny {
   if (schema instanceof z.ZodOptional || schema instanceof z.ZodNullable) {
     return makeFieldSchemaRequired(schema.unwrap());
@@ -346,28 +376,8 @@ export const useForm = (props: FormProps) => {
     response,
   });
 
-  // `submitDefaults` string values may contain `{{query.X}}` / `{{params.X}}`
-  // tokens (e.g. a "new" form generated from `queryParamFilters`). Resolve them
-  // against the current route at submit time; drop entries whose tokens cannot
-  // be resolved so an unfiltered form doesn't submit a literal `{{...}}`.
-  const effectiveSubmitDefaults = computed<Record<string, unknown> | undefined>(
-    () => {
-      if (!props.submitDefaults) return undefined;
-
-      const context = buildUrlContext();
-      const resolved: Record<string, unknown> = {};
-      for (const [key, value] of Object.entries(props.submitDefaults)) {
-        if (typeof value === "string" && value.includes("{{")) {
-          const replaced = replaceUrlVariables(value, context);
-          if (replaced.includes("{{")) continue;
-          resolved[key] = replaced;
-        } else {
-          resolved[key] = value;
-        }
-      }
-
-      return Object.keys(resolved).length > 0 ? resolved : undefined;
-    },
+  const effectiveSubmitDefaults = computed(() =>
+    resolveSubmitDefaults(props.submitDefaults, buildUrlContext()),
   );
 
   const resolvedFetchUrl = computed(() => {

package/frontend-vue/layers/dms-ui/app/composables/table-view/types/config.ts

@@ -1,4 +1,7 @@
-import type { FormContainer } from "../../../build/composables/table-view/useTableViewConfig";
+import type {
+  FormContainer,
+  FormPageUrls,
+} from "../../../build/composables/table-view/useTableViewConfig";
 import type { TableViewColumn } from "./column";
 import type { TableViewDisplayCapabilities } from "./display";
 import type { CustomButton } from "./custom-button";
@@ -80,6 +83,7 @@ export interface TableViewConfig<T extends Data>
     view?: ComponentInfo<FormProps>;
   };
   formContainer?: FormContainer;
+  formPages?: FormPageUrls;
   componentId?: string;
   pageId?: string;
   defaultSort?: { field: string; desc?: boolean };

package/frontend-vue/pnpm-lock.yaml

@@ -210,8 +210,8 @@ packages:
       '@antelopejs/core':
         optional: true
 
-  '@antelopejs/interface-core@0.0.13':
-    resolution: {integrity: sha512-zMVhW5OefmVNRLHvd3rPQTaShy+k9w6+cOhqOryyfxgVyRZ18nBlV8VSq9TuPkFIo5OGNAXFybOf54DRSnPVsw==}
+  '@antelopejs/interface-core@0.1.0':
+    resolution: {integrity: sha512-49mmTXREMNNEigWpmubwQD7fSrIIvmcTb9L8L79zQcDWTToud/GIap40vaKWmkbN1oGbjOB4ael/agqZ/ejYSg==}
 
   '@antfu/install-pkg@1.1.0':
     resolution: {integrity: sha512-MGQsmw10ZyI+EJo45CdSER4zEb+p31LpDAFp2Z3gkSd1yqVZGi0Ebx++YTEMonJy4oChEMLsxZ64j8FH6sSqtQ==}
@@ -4327,7 +4327,7 @@ snapshots:
 
   '@antelopejs/core@1.8.0(@types/node@24.8.1)':
     dependencies:
-      '@antelopejs/interface-core': 0.0.13
+      '@antelopejs/interface-core': 0.1.0
       '@types/proper-lockfile': 4.1.4
       boxen: 8.0.1
       chalk: 4.1.2
@@ -4362,7 +4362,7 @@ snapshots:
       '@oxc-parser/binding-linux-x64-gnu': 0.95.0
       '@oxc-parser/binding-win32-x64-msvc': 0.95.0
 
-  '@antelopejs/interface-core@0.0.13':
+  '@antelopejs/interface-core@0.1.0':
     dependencies:
       reflect-metadata: 0.2.2
 

package/frontend-vue/tests/form-page-url-fill.test.ts

@@ -0,0 +1,63 @@
+import { describe, expect, it } from "vitest";
+import { fillFormPageUrl } from "../layers/dms-ui/app/build/composables/table-view/useTableViewConfig";
+
+const ROW = "row-1";
+
+describe("filling a serialized form page URL", () => {
+  it("substitutes the row id of a default slug", () => {
+    expect(
+      fillFormPageUrl("/settings/users/roles/table/:id/edit", {}, ROW),
+    ).toBe("/settings/users/roles/table/row-1/edit");
+  });
+
+  it("leaves a URL without placeholder alone", () => {
+    expect(fillFormPageUrl("/settings/users/roles/table/new", {})).toBe(
+      "/settings/users/roles/table/new",
+    );
+  });
+
+  it("substitutes the row id inside the query string of an absolute slug", () => {
+    expect(
+      fillFormPageUrl("/modules/automation/builder?selected=:id", {}, ROW),
+    ).toBe("/modules/automation/builder?selected=row-1");
+  });
+
+  // The page slug contributes its own `:id`, and the form slug appends another:
+  // the row takes the last, the route params fill the first.
+  it("tells the row id apart from the id of the carrying page", () => {
+    expect(
+      fillFormPageUrl("/modules/workspaces/:id/:id/view", { id: "ws-1" }, ROW),
+    ).toBe("/modules/workspaces/ws-1/row-1/view");
+  });
+
+  // What a table view nested under a `:id` detail page now resolves to: the
+  // key segment sits between the two placeholders and changes nothing.
+  it("tells the ids apart across the key segment of the table view", () => {
+    expect(
+      fillFormPageUrl(
+        "/modules/workspaces/:id/invoiceTable/:id/view",
+        { id: "ws-1" },
+        ROW,
+      ),
+    ).toBe("/modules/workspaces/ws-1/invoiceTable/row-1/view");
+  });
+
+  it("fills the params of the carrying page when the form takes no row id", () => {
+    expect(fillFormPageUrl("/modules/workspaces/:id/new", { id: "ws-1" })).toBe(
+      "/modules/workspaces/ws-1/new",
+    );
+  });
+
+  it("matches a route param on its whole name", () => {
+    expect(
+      fillFormPageUrl(
+        "/projects/:project/:projectRole/:id/view",
+        {
+          project: "p-1",
+          projectRole: "owner",
+        },
+        ROW,
+      ),
+    ).toBe("/projects/p-1/owner/row-1/view");
+  });
+});

package/frontend-vue/tests/form-redirect-placeholders.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+import { extractRouteParams } from "../layers/dms-layout/app/composables/page/useSiteLayout";
+import { resolveFormSuccessTarget } from "../layers/dms-ui/app/build/composables/table-view/registerDefaultFunctions";
+
+// The redirect a page-mode form of a table view registered below
+// `/workspaces/:id` sends on submit, as the TableView factory generates it for
+// each form page route.
+const EDIT_PATTERN = "/workspaces/:id/invoiceTable/:id/edit";
+const NEW_PATTERN = "/workspaces/:id/invoiceTable/new";
+const EDIT_REDIRECT = { url: "/workspaces/{{params.id:1}}" };
+const NEW_REDIRECT = { url: "/workspaces/{{params.id}}" };
+
+const routeOf = (
+  pattern: string,
+  path: string,
+  query: Record<string, string> = {},
+) => ({ params: extractRouteParams(pattern, path)!, query });
+
+describe("page-mode form redirect", () => {
+  it("sends the edit form back to the page, not to the row", () => {
+    expect(
+      resolveFormSuccessTarget(
+        EDIT_REDIRECT,
+        routeOf(EDIT_PATTERN, "/workspaces/ws-42/invoiceTable/inv-7/edit"),
+      ),
+    ).toEqual({ path: "/workspaces/ws-42" });
+  });
+
+  it("sends the new form back to the page", () => {
+    expect(
+      resolveFormSuccessTarget(
+        NEW_REDIRECT,
+        routeOf(NEW_PATTERN, "/workspaces/ws-42/invoiceTable/new"),
+      ),
+    ).toEqual({ path: "/workspaces/ws-42" });
+  });
+
+  it("carries back the declared query params only", () => {
+    expect(
+      resolveFormSuccessTarget(
+        { ...EDIT_REDIRECT, preserveQuery: ["status", "missing"] },
+        routeOf(EDIT_PATTERN, "/workspaces/ws-42/invoiceTable/inv-7/edit", {
+          status: "paid",
+          other: "x",
+        }),
+      ),
+    ).toEqual({ path: "/workspaces/ws-42", query: { status: "paid" } });
+  });
+
+  it("leaves the slug of a page without route parameter as is", () => {
+    const route = routeOf(
+      "/invoices/invoiceTable/:id/edit",
+      "/invoices/invoiceTable/inv-7/edit",
+      {
+        status: "paid",
+      },
+    );
+
+    expect(resolveFormSuccessTarget({ url: "/invoices" }, route)).toEqual({
+      path: "/invoices",
+    });
+    expect(
+      resolveFormSuccessTarget(
+        { url: "/invoices", preserveQuery: ["status"] },
+        route,
+      ),
+    ).toEqual({ path: "/invoices", query: { status: "paid" } });
+  });
+});

package/frontend-vue/tests/grid-responsive-columns.test.ts

@@ -0,0 +1,105 @@
+import { readFileSync } from "node:fs";
+import { describe, expect, it } from "vitest";
+import { gridColumnsTemplate } from "../layers/dms-ui/app/components/grid/columns";
+
+const GAP = "1rem";
+const MIN = "240px";
+
+const sourceOf = (file: string) =>
+  readFileSync(
+    new URL(`../layers/dms-ui/app/components/grid/${file}`, import.meta.url),
+    "utf8",
+  );
+
+// Guards the exact-fit case: at the width where the track floor is precisely
+// one Nth of the container, binary floats land a hair under the integer.
+const FIT_EPSILON = 1e-6;
+
+/**
+ * Resolves the template the way a browser would, in pixels, and reports how
+ * many tracks `auto-fill` ends up with for a given container width.
+ */
+function resolveColumnCount(
+  template: string,
+  containerWidth: number,
+  gapPx: number,
+): number {
+  const match = template.match(
+    /repeat\(auto-fill, minmax\(min\(100%, max\((\d+)px, \(100% - (\d+) \* [^)]+\) \/ (\d+)\)\), 1fr\)\)/,
+  );
+  if (!match) throw new Error(`unexpected template: ${template}`);
+  const [, min, gapCount, maxColumns] = match;
+  const share =
+    (containerWidth - Number(gapCount) * gapPx) / Number(maxColumns);
+  const floor = Math.min(containerWidth, Math.max(Number(min), share));
+  if (floor <= 0) return Number(maxColumns);
+  return Math.max(
+    1,
+    Math.floor((containerWidth + gapPx) / (floor + gapPx) + FIT_EPSILON),
+  );
+}
+
+describe("grid column template", () => {
+  it("keeps every column at the widest row's count once the container is wide", () => {
+    const template = gridColumnsTemplate(6, GAP, MIN);
+    expect(resolveColumnCount(template, 1600, 16)).toBe(6);
+    expect(resolveColumnCount(template, 2400, 16)).toBe(6);
+  });
+
+  it("drops columns rather than shrinking them below the minimum", () => {
+    const template = gridColumnsTemplate(6, GAP, MIN);
+    expect(resolveColumnCount(template, 976, 16)).toBe(3);
+    expect(resolveColumnCount(template, 657, 16)).toBe(2);
+    expect(resolveColumnCount(template, 328, 16)).toBe(1);
+  });
+
+  it("never asks for a track wider than the container", () => {
+    const template = gridColumnsTemplate(4, GAP, MIN);
+    expect(template).toContain("min(100%,");
+    expect(resolveColumnCount(template, 200, 16)).toBe(1);
+  });
+
+  it("gives rows of the same grid one shared template, so they stay aligned", () => {
+    expect(gridColumnsTemplate(4, GAP, MIN)).toBe(
+      gridColumnsTemplate(4, GAP, MIN),
+    );
+    expect(gridColumnsTemplate(4, GAP, MIN)).not.toBe(
+      gridColumnsTemplate(3, GAP, MIN),
+    );
+  });
+
+  it("treats a row-less grid as a single column", () => {
+    expect(gridColumnsTemplate(0, GAP, MIN)).toBe(
+      gridColumnsTemplate(1, GAP, MIN),
+    );
+    expect(resolveColumnCount(gridColumnsTemplate(1, GAP, MIN), 976, 16)).toBe(
+      1,
+    );
+  });
+
+  it("subtracts the gaps the row actually renders", () => {
+    expect(gridColumnsTemplate(3, "2rem", MIN)).toContain("(100% - 2 * 2rem)");
+    expect(gridColumnsTemplate(1, GAP, MIN)).toContain("(100% - 0 * 1rem)");
+  });
+
+  it("honours a caller-supplied minimum", () => {
+    expect(gridColumnsTemplate(4, GAP, "120px")).toContain("120px");
+    expect(
+      resolveColumnCount(gridColumnsTemplate(4, GAP, "120px"), 657, 16),
+    ).toBe(4);
+  });
+});
+
+describe("grid components", () => {
+  it("drive both the container and its rows from the shared template", () => {
+    for (const file of ["Grid.vue", "GridRow.vue"]) {
+      const source = sourceOf(file);
+      expect(source).toContain("gridColumnsTemplate(");
+      expect(source).not.toMatch(/repeat\(\$\{/);
+    }
+  });
+
+  it("keeps rows spanning the full grid width", () => {
+    expect(sourceOf("GridRow.vue")).toContain('gridColumn: "1 / -1"');
+  });
+});

package/frontend-vue/tests/route-param-filter-defaults.test.ts

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import { extractRouteParams } from "../layers/dms-layout/app/composables/page/useSiteLayout";
+import {
+  replaceUrlVariables,
+  resolveSubmitDefaults,
+} from "../layers/dms-ui/app/composables/form/useForm";
+
+// The forms of a table view filtered by `routeParamFilters: { id: { field:
+// "_instance" } }`, registered below a page whose own slug is `:id`. The tokens
+// are what the TableView factory generates for each form page route.
+const EDIT_PATTERN = "/workspaces/:id/invoiceTable/:id/edit";
+const NEW_PATTERN = "/workspaces/:id/invoiceTable/new";
+const EDIT_DEFAULTS = { _instance: "{{params.id:1}}" };
+const NEW_DEFAULTS = { _instance: "{{params.id}}" };
+const EDIT_SUBMIT_URL = "/api/invoices/edit?id={{params.id}}";
+
+const contextOf = (pattern: string, path: string) => ({
+  routeParams: extractRouteParams(pattern, path)!,
+  routeQuery: {},
+});
+
+describe("route param filter defaults on a nested form page", () => {
+  it("submits the page id in the filtered field, the row id in the URL", () => {
+    const context = contextOf(
+      EDIT_PATTERN,
+      "/workspaces/ws-42/invoiceTable/inv-7/edit",
+    );
+
+    expect(resolveSubmitDefaults(EDIT_DEFAULTS, context)).toEqual({
+      _instance: "ws-42",
+    });
+    expect(replaceUrlVariables(EDIT_SUBMIT_URL, context)).toBe(
+      "/api/invoices/edit?id=inv-7",
+    );
+  });
+
+  it("submits the page id from the new form, whose route has one :id", () => {
+    expect(
+      resolveSubmitDefaults(
+        NEW_DEFAULTS,
+        contextOf(NEW_PATTERN, "/workspaces/ws-42/invoiceTable/new"),
+      ),
+    ).toEqual({ _instance: "ws-42" });
+  });
+
+  // A form reached at an absolute URL does not carry the page's parameters:
+  // the default is dropped rather than submitted as a literal token.
+  it("drops a default no parameter of the route answers", () => {
+    const context = contextOf(
+      "/modules/automation/builder/:id",
+      "/modules/automation/builder/p-1",
+    );
+
+    expect(resolveSubmitDefaults(EDIT_DEFAULTS, context)).toBe(undefined);
+    expect(
+      resolveSubmitDefaults({ ...EDIT_DEFAULTS, status: "draft" }, context),
+    ).toEqual({ status: "draft" });
+  });
+});