@olenbetong/appframe-ds 1.10.0 → 1.12.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @olenbetong/appframe-ds
 
+## 1.12.0
+
+### Minor Changes
+
+- 407ab94: AfGrid offers the site assistant tools to read and change its layout, sort, filter and grouping and to read its rows, on pages where the assistant is switched on. New props `assistantLabel` and `disableAssistant`.
+
+## 1.11.0
+
+### Minor Changes
+
+- aeeb072: The grid's new item row is pinned at the top by default, instead of following the data object's `newRecordPosition`. At the bottom it sat at the foot of the viewport, far below the data on a short grid. Pass `newItemRow="bottom"` to keep it there.
+
+### Patch Changes
+
+- 4c6a4e7: `endEdit` takes `{ newRecordPosition }` to place a record created from the new record first or last for that save only, overriding the data object's option. The grid uses it so a record saved from the new item row at the top is inserted first, where it was entered, instead of jumping to the end of the data.
+- f4a37c0: The grid's column menu opens the grid's own panels instead of MUI's: Filter opens the filter builder with a new criterion for the column, its value focused (MUI's filter panel edited a filter the grid ignores), and Manage columns opens the grid's columns panel. `FilterBuilder` takes `autoFocusPath` to focus the value of a criterion when it opens.
+- Updated dependencies [c7750da]
+- Updated dependencies [4c6a4e7]
+  - @olenbetong/appframe-data@1.10.0
+
 ## 1.10.0
 
 ### Minor Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@olenbetong/appframe-ds",
-  "version": "1.10.0",
+  "version": "1.12.0",
   "description": "Components that bind Designsystemet components to Appframe data objects",
   "type": "module",
   "types": "./es/index.d.ts",
@@ -64,16 +64,16 @@
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "3.0.0",
     "@base-ui/react": "1.9.0",
     "@olenbetong/appframe-core": "^2.16.0",
-    "@olenbetong/appframe-data": "^1.9.0",
+    "@olenbetong/appframe-data": "^1.10.3",
     "@olenbetong/appframe-react": "^2.2.8",
     "clsx": "^2.1.1",
-    "dockview-react": "8.6.1",
+    "dockview-react": "8.8.3",
     "localforage": "^1.10.0",
     "mitt": "^3.0.1",
     "react": "19.3.1",
     "react-dom": "19.3.1",
-    "react-window": "2.5.0",
-    "temporal-polyfill": "1.0.6"
+    "react-window": "2.5.3",
+    "temporal-polyfill": "1.0.8"
   },
   "devDependencies": {
     "@digdir/designsystemet-react": "1.23.0",
@@ -82,7 +82,7 @@
     "@mui/material": "9.5.0",
     "@mui/x-data-grid-premium": "8.29.5",
     "@mui/x-license": "8.29.3",
-    "@navikt/aksel-icons": "8.20.0",
+    "@navikt/aksel-icons": "8.22.1",
     "@testing-library/dom": "^10.4.2",
     "@testing-library/jest-dom": "^7.0.1",
     "@testing-library/react": "16.3.3",
@@ -91,9 +91,9 @@
     "@types/react-dom": "19.3.0",
     "happy-dom": "21.0.4",
     "react-error-boundary": "6.1.6",
-    "react-router": "8.5.0",
+    "react-router": "8.5.1",
     "typescript": "7.0.2",
-    "vitest": "5.0.5"
+    "vitest": "5.1.0"
   },
   "scripts": {
     "build": "pnpm run build:tsc && pnpm test && pnpm run build:css",

package/src/filter/FilterBuilder.test.tsx

@@ -122,6 +122,24 @@ describe("FilterBuilder", () => {
 		);
 	});
 
+	it("focuses the value of the criterion at autoFocusPath", () => {
+		renderBuilder({
+			autoFocusPath: [1],
+			defaultValue: {
+				type: "group",
+				mode: "and",
+				items: [
+					{ type: "expression", column: "PersonID", operator: "like", value: "a", valueType: "string" },
+					{ type: "expression", column: "Age", operator: "equals", value: "", valueType: "number" },
+				],
+			},
+		});
+
+		let values = screen.getAllByLabelText("Value");
+
+		expect(document.activeElement).toBe(values[1]);
+	});
+
 	it("reports an empty filter as null", async () => {
 		let onApply = vi.fn();
 		renderBuilder({ onApply });

package/src/filter/FilterBuilder.tsx

@@ -8,6 +8,7 @@ import {
 	canShareSavedFilter,
 	createEmptyFilter,
 	findSavedFilter,
+	type FilterPath,
 	type FilterTree,
 	isEmptyFilter,
 	pruneFilter,
@@ -17,7 +18,7 @@ import { type NamedFilterType, setNamedFilter, useFilterConversion, useSavedFilt
 import type { SaveFilterInput } from "@olenbetong/appframe-react";
 import type { DataObject } from "@olenbetong/appframe-data";
 import clsx from "clsx";
-import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 
 import { FilterEditor } from "./FilterEditor.js";
 import { FilterNameDialog } from "./FilterNameDialog.js";
@@ -109,6 +110,11 @@ export type FilterBuilderProps = {
 	renderMain?: (editor: ReactNode) => ReactNode;
 	/** Hides the saved-filter list, leaving just the criteria editor. */
 	hideSavedFilters?: boolean;
+	/**
+	 * Path of the criterion whose value gets focus when the builder opens, for a caller that has
+	 * just added it.
+	 */
+	autoFocusPath?: FilterPath | null;
 	className?: string;
 	"data-size"?: FilterEditorSize;
 };
@@ -159,9 +165,25 @@ export function FilterBuilder({
 	actions,
 	renderMain,
 	hideSavedFilters,
+	autoFocusPath,
 	className,
 	"data-size": size,
 }: FilterBuilderProps) {
+	let rootRef = useRef<HTMLDivElement>(null);
+	let autoFocusKey = autoFocusPath?.join(".");
+
+	/*
+	 * Runs after the dialog's own effect has opened it, which focuses its first control. The value
+	 * editor depends on the field and operator, so the first input in the row's value cell is used.
+	 */
+	useEffect(() => {
+		if (!open || autoFocusKey === undefined) return;
+
+		let row = rootRef.current?.querySelector(`.ObFilterEditor-row[data-path="${autoFocusKey}"]`);
+		let input = row?.querySelector<HTMLElement>(".ObFilterEditor-valueCell :is(input, select, textarea)");
+
+		input?.focus();
+	}, [open, autoFocusKey]);
 	let resolvedId = dbObjectId ?? viewName;
 	let { mine, shared, filters, loading, save, rename, remove, setCrossDomain } = useSavedFilters({
 		dbObjectId: reportId ? undefined : resolvedId,
@@ -299,6 +321,7 @@ export function FilterBuilder({
 
 	let content = (
 		<div
+			ref={rootRef}
 			className={clsx("ObFilterBuilder-root", hideSavedFilters && "ObFilterBuilder-root--noSavedFilters", className)}
 			data-size={size}
 		>

package/src/filter/FilterGroupEditor.tsx

@@ -111,6 +111,7 @@ export function FilterGroupEditor({
 							// oxlint-disable-next-line no-array-index-key -- see above
 							key={index}
 							expression={item}
+							path={[...path, index]}
 							fields={fields}
 							getFieldOptions={getFieldOptions}
 							readOnly={readOnly}

package/src/filter/FilterRow.tsx

@@ -6,6 +6,7 @@ import {
 	type FieldMetadata,
 	type FilterExpression,
 	type FilterOperator,
+	type FilterPath,
 	getOperatorLabel,
 	getOperatorsForField,
 	isRangeEnd,
@@ -34,6 +35,8 @@ export type FilterRowProps = {
 	fields: FieldMetadata[];
 	onChange: (expression: FilterExpression) => void;
 	onRemove: () => void;
+	/** Where the expression sits in the tree, written to `data-path` so a row can be found to focus it. */
+	path?: FilterPath;
 	getFieldOptions?: GetFieldOptions;
 	readOnly?: boolean;
 	"data-size"?: FilterEditorSize;
@@ -45,6 +48,7 @@ export function FilterRow({
 	fields,
 	onChange,
 	onRemove,
+	path,
 	getFieldOptions,
 	readOnly,
 	"data-size": size,
@@ -76,7 +80,7 @@ export function FilterRow({
 	}
 
 	return (
-		<div className="ObFilterEditor-row">
+		<div className="ObFilterEditor-row" data-path={path?.join(".")}>
 			<Combobox
 				className="ObFilterEditor-field"
 				data-size={size}

package/src/grid/AfColumnMenuColumnsItem.tsx

@@ -0,0 +1,30 @@
+import { type GridColumnMenuItemProps, GridColumnMenuHideItem, useGridRootProps } from "@mui/x-data-grid-premium";
+
+import { useOptionalAfGridContext } from "./AfGridContext.js";
+import { getLocalizedString } from "../i18n.js";
+
+/**
+ * The column menu's Hide and Manage columns items. MUI's Manage columns opens its own columns panel;
+ * this opens the grid's columns panel, the same one as the toolbar's Columns button.
+ */
+export function AfColumnMenuColumnsItem(props: GridColumnMenuItemProps) {
+	let rootProps = useGridRootProps();
+	let context = useOptionalAfGridContext();
+
+	return (
+		<>
+			<GridColumnMenuHideItem {...props} />
+			{context && !rootProps.disableColumnSelector && (
+				<rootProps.slots.baseMenuItem
+					onClick={(event: React.MouseEvent<HTMLElement>) => {
+						props.onClick(event);
+						context.openColumnsPanel();
+					}}
+					iconStart={<rootProps.slots.columnMenuManageColumnsIcon fontSize="small" />}
+				>
+					{getLocalizedString("Manage columns")}
+				</rootProps.slots.baseMenuItem>
+			)}
+		</>
+	);
+}

package/src/grid/AfColumnMenuFilterItem.tsx

@@ -0,0 +1,36 @@
+import { type GridColumnMenuItemProps, useGridRootProps } from "@mui/x-data-grid-premium";
+
+import { useOptionalAfGridContext } from "./AfGridContext.js";
+import { findFilterField } from "./useAfFilter.js";
+import type { AfGridColDef } from "./useAfColumns.js";
+import { getLocalizedString } from "../i18n.js";
+
+/**
+ * The column menu's Filter item. MUI's opens its own filter panel, which edits a filter model the
+ * grid never reads; this opens the filter builder with a new criterion for the column instead.
+ */
+export function AfColumnMenuFilterItem({ colDef, onClick }: GridColumnMenuItemProps) {
+	let rootProps = useGridRootProps();
+	let context = useOptionalAfGridContext();
+	let fieldName = (colDef as AfGridColDef).filterColumn ?? colDef.field;
+
+	if (!context || rootProps.disableColumnFilter || colDef.filterable === false || colDef.type === "actions") {
+		return null;
+	}
+
+	if (!findFilterField(context.filterFields, fieldName)) return null;
+
+	let { openFilterBuilder } = context;
+
+	return (
+		<rootProps.slots.baseMenuItem
+			onClick={(event: React.MouseEvent<HTMLElement>) => {
+				onClick(event);
+				openFilterBuilder(fieldName);
+			}}
+			iconStart={<rootProps.slots.columnMenuFilterIcon fontSize="small" />}
+		>
+			{getLocalizedString("Filter")}
+		</rootProps.slots.baseMenuItem>
+	);
+}

package/src/grid/AfGridContext.tsx

@@ -8,8 +8,11 @@ export type AfGridContextValue = {
 	apiRef: React.RefObject<GridApi | null>;
 	/** Fields the filter builder can filter on, derived from the data object and the columns. */
 	filterFields: FieldMetadata[];
-	/** Opens the filter builder dialog. */
-	openFilterBuilder: () => void;
+	/**
+	 * Opens the filter builder dialog. Given a field, it adds an empty criterion for it first, unless
+	 * the filter already has an unfinished one for that field.
+	 */
+	openFilterBuilder: (field?: string) => void;
 	/**
 	 * The grid's filter tree. The header filters and the filter builder edit the
 	 * same tree, so a criterion added in one shows up in the other.

package/src/grid/Toolbar.tsx

@@ -95,7 +95,7 @@ export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps =
 		return (
 			<BadgePosition placement="top-right" overlap="circle">
 				{filterCount > 0 && <Badge data-color="brand" count={filterCount} aria-hidden="true" />}
-				<Button variant="tertiary" icon aria-label={name} title={name} onClick={openFilterBuilder}>
+				<Button variant="tertiary" icon aria-label={name} title={name} onClick={() => openFilterBuilder()}>
 					<FilterIcon aria-hidden />
 				</Button>
 			</BadgePosition>
@@ -103,7 +103,7 @@ export function GridToolbarFilterButton({ iconOnly }: GridToolbarIconOnlyProps =
 	}
 
 	return (
-		<Button variant="tertiary" onClick={openFilterBuilder}>
+		<Button variant="tertiary" onClick={() => openFilterBuilder()}>
 			<FilterIcon aria-hidden />
 			{label}
 			{filterCount > 0 ? ` (${filterCount})` : ""}

package/src/grid/assistant.test.ts

@@ -0,0 +1,162 @@
+import type { FieldMetadata } from "@olenbetong/appframe-core";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { type AssistantGrid, createGridTools, registerAssistantGrid } from "./assistant.js";
+import { AssistantFilterError, toGridFilter } from "./assistantFilter.js";
+
+const fields: FieldMetadata[] = [
+	{ name: "Customer", type: "string" },
+	{ name: "Amount", type: "number" },
+	{ name: "Delivered", type: "date" },
+	{ name: "Closed", type: "boolean" },
+];
+
+describe("the assistant's grid filter", () => {
+	it("becomes the grid's filter tree, with the field's own name and value types", () => {
+		expect(
+			toGridFilter(
+				{
+					mode: "and",
+					items: [
+						{ column: "customer", operator: "contains", value: "Olen" },
+						{ column: "Amount", operator: "greaterThan", value: "1000" },
+						{ column: "Delivered", operator: "between", value: ["2026-01-01", "2026-06-30"] },
+						{ column: "Closed", operator: "isfalse" },
+					],
+				},
+				fields,
+			),
+		).toEqual({
+			type: "group",
+			mode: "and",
+			items: [
+				{ type: "expression", column: "Customer", operator: "contains", value: "Olen", valueType: "string" },
+				{ type: "expression", column: "Amount", operator: "greaterthan", value: 1000, valueType: "number" },
+				{
+					type: "expression",
+					column: "Delivered",
+					operator: "between",
+					value: ["2026-01-01", "2026-06-30"],
+					valueType: "array",
+				},
+				{ type: "expression", column: "Closed", operator: "isfalse", value: null, valueType: "null" },
+			],
+		});
+	});
+
+	it("turns a relative date into a special value", () => {
+		let tree = toGridFilter({ column: "Delivered", operator: "greaterthanorequal", value: "lastweek" }, fields);
+		expect(tree.items[0]).toMatchObject({ value: "LastWeek", valueType: "special" });
+	});
+
+	it("keeps nested groups", () => {
+		let tree = toGridFilter(
+			{
+				mode: "or",
+				items: [
+					{ column: "Customer", operator: "equals", value: "A" },
+					{ mode: "and", items: [{ column: "Amount", operator: "lessthan", value: 5 }] },
+				],
+			},
+			fields,
+		);
+		expect(tree.mode).toBe("or");
+		expect(tree.items[1]).toMatchObject({ type: "group", mode: "and" });
+	});
+
+	it("refuses unknown fields, wrong operators and missing values with a message to act on", () => {
+		expect(() => toGridFilter({ column: "Secret", operator: "equals", value: 1 }, fields)).toThrow(
+			AssistantFilterError,
+		);
+		expect(() => toGridFilter({ column: "Closed", operator: "contains", value: "x" }, fields)).toThrow(/It can use/);
+		expect(() => toGridFilter({ column: "Amount", operator: "equals" }, fields)).toThrow(/needs a value/);
+		expect(() => toGridFilter({ column: "Amount", operator: "between", value: [1] }, fields)).toThrow(/two values/);
+		expect(() => toGridFilter({ column: "Amount", operator: "equals", value: "many" }, fields)).toThrow(/is a number/);
+	});
+});
+
+describe("the grid tools", () => {
+	afterEach(() => {
+		delete (globalThis as { ob?: unknown }).ob;
+	});
+
+	function fakeGrid(label: string): AssistantGrid {
+		return {
+			label: () => label,
+			getLayout: vi.fn(() => ({ label })),
+			getRows: vi.fn((maxRows: number) => ({ maxRows })),
+			setColumns: vi.fn(),
+			sort: vi.fn(),
+			filter: vi.fn(),
+			group: vi.fn(),
+		};
+	}
+
+	function fakeChrome(enabled = true) {
+		let registered = new Map<string, { parameters?: any; handler: (args: any) => unknown }>();
+		(globalThis as { ob?: unknown }).ob = {
+			chrome: {
+				assistant: {
+					enabled,
+					registerTool: (tool: { name: string; parameters?: any; handler: (args: any) => unknown }) => {
+						registered.set(tool.name, tool);
+						return () => registered.delete(tool.name);
+					},
+				},
+			},
+		};
+		return registered;
+	}
+
+	it("registers one set of tools for all grids, naming them by label, and removes it with the last grid", async () => {
+		let registered = fakeChrome();
+		let offAll = [registerAssistantGrid(fakeGrid("Deliveries")), registerAssistantGrid(fakeGrid("Deliveries"))];
+		await Promise.resolve();
+
+		expect([...registered.keys()]).toEqual([
+			"get_grid_layout",
+			"get_grid_rows",
+			"set_grid_columns",
+			"sort_grid",
+			"filter_grid",
+			"group_grid",
+		]);
+		expect(registered.get("get_grid_layout")?.parameters.properties.grid.enum).toEqual([
+			"Deliveries",
+			"Deliveries (2)",
+		]);
+		expect(registered.get("get_grid_layout")?.handler({ grid: "Deliveries (2)" })).toEqual({ label: "Deliveries" });
+		expect(registered.get("get_grid_layout")?.handler({ grid: "Nope" })).toEqual({
+			error: expect.stringContaining("Deliveries, Deliveries (2)"),
+		});
+
+		for (let off of offAll) off();
+		await Promise.resolve();
+		expect(registered.size).toBe(0);
+	});
+
+	it("needs no grid name when there is one grid, and caps the rows", async () => {
+		let registered = fakeChrome();
+		let off = registerAssistantGrid(fakeGrid("Strings"));
+		await Promise.resolve();
+		expect(registered.get("get_grid_rows")?.handler({ maxRows: 5000 })).toEqual({ maxRows: 50 });
+		off();
+		await Promise.resolve();
+	});
+
+	it("registers nothing when the assistant is off for the page", async () => {
+		let registered = fakeChrome(false);
+		let off = registerAssistantGrid(fakeGrid("Strings"));
+		await Promise.resolve();
+		expect(registered.size).toBe(0);
+		off();
+		await Promise.resolve();
+	});
+
+	it("describes the filter syntax and the grids in the tools", () => {
+		let tools = createGridTools(["A", "B"]);
+		let filter = tools.find((tool) => tool.name === "filter_grid")!;
+		expect((filter.parameters as any).required).toEqual(["grid", "mode"]);
+		expect(tools[0].description).toContain("A, B");
+	});
+});

package/src/grid/assistant.ts

@@ -0,0 +1,248 @@
+import { getLocalizedString } from "../i18n.js";
+import { ASSISTANT_FILTER_SCHEMA, type AssistantFilterNode } from "./assistantFilter.js";
+
+/*
+ * The site assistant's tools for AfGrid: reading and changing the layout, sort, filter and grouping
+ * of the grids on the page, and reading the rows they show. One set of tools is registered while
+ * any grid is mounted, with a `grid` parameter naming the grid by its label, so a page with three
+ * grids does not send three sets with every question.
+ *
+ * The assistant belongs to the site chrome (synergi-chrome), which this package does not depend on:
+ * the tools go through `window.ob.chrome.assistant` when the page has it, and nothing happens
+ * otherwise. The tools change what the grid shows, never data, so they run without asking; the
+ * user can change any of it back in the grid.
+ */
+
+/** What a mounted grid offers the assistant. Every method reads the grid's current state. */
+export type AssistantGrid = {
+	label: () => string;
+	getLayout: () => unknown;
+	getRows: (maxRows: number) => unknown;
+	setColumns: (change: { show?: string[]; hide?: string[]; order?: string[] }) => unknown;
+	sort: (sort: { field: string; direction?: "asc" | "desc" }[]) => unknown;
+	filter: (mode: "replace" | "add" | "clear", filter?: AssistantFilterNode) => unknown;
+	group: (change: { groupBy?: string[]; totals?: Record<string, string> }) => unknown;
+};
+
+type ToolLike = {
+	name: string;
+	description: string;
+	label?: string;
+	parameters?: Record<string, unknown>;
+	handler: (args: any) => unknown;
+};
+
+type AssistantApiLike = { readonly enabled: boolean; registerTool: (tool: ToolLike) => () => void };
+
+/** The most rows `get_grid_rows` returns, so one call cannot fill the conversation. */
+export const MAX_ASSISTANT_ROWS = 50;
+
+function assistantApi(): AssistantApiLike | undefined {
+	return (globalThis as { ob?: { chrome?: { assistant?: AssistantApiLike } } }).ob?.chrome?.assistant;
+}
+
+const grids = new Set<AssistantGrid>();
+let unregister: (() => void)[] = [];
+let scheduled = false;
+let waitingForChrome = false;
+
+/** The grids by the label the assistant uses; a second grid with the same label gets " (2)". */
+function gridsByLabel(): Map<string, AssistantGrid> {
+	let byLabel = new Map<string, AssistantGrid>();
+	for (let grid of grids) {
+		let base = grid.label().trim() || "Grid";
+		let label = base;
+		for (let n = 2; byLabel.has(label); n++) label = `${base} (${n})`;
+		byLabel.set(label, grid);
+	}
+	return byLabel;
+}
+
+function schedule() {
+	if (scheduled) return;
+	scheduled = true;
+	// Grids mounting in the same render are registered together.
+	queueMicrotask(() => {
+		scheduled = false;
+		refresh();
+	});
+}
+
+function refresh() {
+	for (let remove of unregister) remove();
+	unregister = [];
+	if (grids.size === 0) return;
+
+	let api = assistantApi();
+	if (!api) {
+		// The chrome mounts after the app on some pages; register once it is there.
+		if (!waitingForChrome && typeof window !== "undefined") {
+			waitingForChrome = true;
+			window.addEventListener(
+				"ob:chrome-ready",
+				() => {
+					waitingForChrome = false;
+					schedule();
+				},
+				{ once: true },
+			);
+		}
+		return;
+	}
+	if (!api.enabled) return;
+
+	let labels = [...gridsByLabel().keys()];
+	unregister = createGridTools(labels).map((tool) => api.registerTool(tool));
+}
+
+/** Adds a grid to the assistant's tools; returns a function that removes it. */
+export function registerAssistantGrid(grid: AssistantGrid): () => void {
+	grids.add(grid);
+	schedule();
+	return () => {
+		grids.delete(grid);
+		schedule();
+	};
+}
+
+/** Re-reads the labels, after a grid's label changed. */
+export function refreshAssistantGrids() {
+	if (grids.size > 0) schedule();
+}
+
+function resolveGrid(name: unknown): AssistantGrid {
+	let byLabel = gridsByLabel();
+	if (byLabel.size === 1 && (name === undefined || name === null || name === "")) return [...byLabel.values()][0];
+	let grid = byLabel.get(String(name ?? ""));
+	if (!grid)
+		throw new Error(`No grid named "${String(name ?? "")}". The grids are: ${[...byLabel.keys()].join(", ")}.`);
+	return grid;
+}
+
+function withGrid<TArgs extends { grid?: string }>(run: (grid: AssistantGrid, args: TArgs) => unknown) {
+	return (args: TArgs) => {
+		try {
+			return run(resolveGrid(args?.grid), args ?? ({} as TArgs));
+		} catch (error) {
+			return { error: error instanceof Error ? error.message : String(error) };
+		}
+	};
+}
+
+/** The tools for the grids with these labels. Exported for tests. */
+export function createGridTools(labels: string[]): ToolLike[] {
+	let gridParameter = {
+		grid: {
+			type: "string",
+			enum: labels,
+			description:
+				labels.length === 1 ? "The grid. Can be left out: there is one." : "Which grid on the page, by its label.",
+		},
+	};
+	let required = labels.length === 1 ? [] : ["grid"];
+	let fieldList = { type: "array", items: { type: "string" } };
+
+	return [
+		{
+			name: "get_grid_layout",
+			label: getLocalizedString("Read the grid's layout"),
+			description: `The layout of a grid on the page (${labels.join(", ")}): its columns (field, header, whether shown), the fields it can be filtered on, the sort, the filter, the grouping and totals, and how many rows it has. Read it before changing the grid.`,
+			parameters: { type: "object", properties: gridParameter, required },
+			handler: withGrid((grid) => grid.getLayout()),
+		},
+		{
+			name: "get_grid_rows",
+			label: getLocalizedString("Read the rows in the grid"),
+			description: `The rows a grid shows, in its order and with its shown columns: the rows it has loaded (the current page when it pages), at most ${MAX_ASSISTANT_ROWS}. To look at other rows, filter or sort the grid first.`,
+			parameters: {
+				type: "object",
+				properties: {
+					...gridParameter,
+					maxRows: { type: "number", description: `At most this many rows (default and limit ${MAX_ASSISTANT_ROWS}).` },
+				},
+				required,
+			},
+			handler: withGrid((grid, { maxRows }: { grid?: string; maxRows?: number }) =>
+				grid.getRows(Math.max(1, Math.min(MAX_ASSISTANT_ROWS, Number(maxRows) || MAX_ASSISTANT_ROWS))),
+			),
+		},
+		{
+			name: "set_grid_columns",
+			label: getLocalizedString("Change the grid's columns"),
+			description:
+				"Shows or hides a grid's columns, and moves them. `order` lists fields in the order they should come first; the rest keep their order after them. Use the fields from get_grid_layout.",
+			parameters: {
+				type: "object",
+				properties: { ...gridParameter, show: fieldList, hide: fieldList, order: fieldList },
+				required,
+			},
+			handler: withGrid((grid, args: { grid?: string; show?: string[]; hide?: string[]; order?: string[] }) =>
+				grid.setColumns(args),
+			),
+		},
+		{
+			name: "sort_grid",
+			label: getLocalizedString("Sort the grid"),
+			description: "Sorts a grid by one or more columns, first one first. An empty list removes the sort.",
+			parameters: {
+				type: "object",
+				properties: {
+					...gridParameter,
+					sort: {
+						type: "array",
+						items: {
+							type: "object",
+							properties: { field: { type: "string" }, direction: { type: "string", enum: ["asc", "desc"] } },
+							required: ["field"],
+						},
+					},
+				},
+				required: [...required, "sort"],
+			},
+			handler: withGrid((grid, { sort }: { grid?: string; sort?: { field: string; direction?: "asc" | "desc" }[] }) =>
+				grid.sort(Array.isArray(sort) ? sort : []),
+			),
+		},
+		{
+			name: "filter_grid",
+			label: getLocalizedString("Filter the grid"),
+			description:
+				"Filters a grid on the server, like the grid's filter builder (which then shows it). `replace` swaps the filter for this one, `add` keeps the current filter and adds this one with AND, `clear` removes the filter. Columns are the filter fields from get_grid_layout, which may include fields that are not shown.",
+			parameters: {
+				type: "object",
+				properties: {
+					...gridParameter,
+					mode: { type: "string", enum: ["replace", "add", "clear"] },
+					filter: ASSISTANT_FILTER_SCHEMA,
+				},
+				required: [...required, "mode"],
+			},
+			handler: withGrid(
+				(grid, { mode, filter }: { grid?: string; mode?: "replace" | "add" | "clear"; filter?: AssistantFilterNode }) =>
+					grid.filter(mode ?? "replace", filter),
+			),
+		},
+		{
+			name: "group_grid",
+			label: getLocalizedString("Group the grid"),
+			description:
+				"Groups a grid's rows by columns (an empty list removes the grouping) and sets totals per column: sum, avg, min, max or size (count). Grouping and totals cover the rows the grid has loaded. Leave out what should stay as it is.",
+			parameters: {
+				type: "object",
+				properties: {
+					...gridParameter,
+					groupBy: fieldList,
+					totals: {
+						type: "object",
+						description: 'Field to total function, e.g. { "Amount": "sum" }. An empty object removes the totals.',
+						additionalProperties: { type: "string", enum: ["sum", "avg", "min", "max", "size"] },
+					},
+				},
+				required,
+			},
+			handler: withGrid((grid, args: { grid?: string; groupBy?: string[]; totals?: Record<string, string> }) =>
+				grid.group(args),
+			),
+		},
+	];
+}

package/src/grid/assistantFilter.ts

@@ -0,0 +1,97 @@
+import {
+	type FieldMetadata,
+	type FilterExpression,
+	type FilterGroup,
+	getDynamicValuesForField,
+	getOperatorArity,
+	getOperatorsForField,
+	getValueType,
+	normalizeOperator,
+} from "@olenbetong/appframe-core";
+
+import { findFilterField } from "./useAfFilter.js";
+
+/**
+ * A filter as the assistant writes it: groups of `column operator value`, without the type and
+ * value type fields the grid's filter tree carries. Converted with {@link toGridFilter}.
+ */
+export type AssistantFilterNode =
+	| { mode?: "and" | "or"; items: AssistantFilterNode[] }
+	| { column: string; operator: string; value?: unknown };
+
+/** The JSON Schema the assistant is given for {@link AssistantFilterNode}. */
+export const ASSISTANT_FILTER_SCHEMA = {
+	type: "object",
+	description:
+		"A group: { mode: 'and' | 'or', items: [...] }, where each item is another group or a criterion { column, operator, value }. Operators: equals, notequals, greaterthan, greaterthanorequal, lessthan, lessthanorequal, contains, notcontains, beginswith, endswith, isnull, isnotnull, isblank, isnotblank, istrue, isfalse, inlist and notinlist (value is an array), between and notbetween (value is [from, to]). Dates use the same comparisons with 'YYYY-MM-DD' values, or a relative value such as Today, Yesterday, ThisWeek, LastWeek, ThisMonth, LastMonth, ThisYear or LastYear; whole periods also have operators without a value: istoday, isyesterday, islastweek, isearlierthisweek, isearlierthismonth, isearlierthisyear, ispriorthisyear, istomorrow, isnextweek. A text field can compare with CurrentUser. Only the operators a field allows are accepted; an error lists them.",
+} as const;
+
+/** What went wrong in a filter, for the assistant to correct. */
+export class AssistantFilterError extends Error {}
+
+function isGroupNode(node: AssistantFilterNode): node is { mode?: "and" | "or"; items: AssistantFilterNode[] } {
+	return Array.isArray((node as { items?: unknown }).items);
+}
+
+function convertValue(
+	field: FieldMetadata,
+	operator: string,
+	value: unknown,
+): Pick<FilterExpression, "value" | "valueType"> {
+	let arity = getOperatorArity(operator as never);
+	if (arity === "none") return { value: null, valueType: "null" };
+
+	let valueType = getValueType(field, operator as never);
+	if (arity === "list" || arity === "pair") {
+		if (!Array.isArray(value) || value.length === 0) {
+			throw new AssistantFilterError(`The operator ${operator} on ${field.name} needs a list of values.`);
+		}
+		if (arity === "pair" && value.length !== 2) {
+			throw new AssistantFilterError(`The operator ${operator} on ${field.name} needs two values: [from, to].`);
+		}
+		return { value: value.map((item) => (item === null ? null : String(item))) as string[], valueType: "array" };
+	}
+
+	if (value === undefined || value === null || value === "") {
+		throw new AssistantFilterError(`The operator ${operator} on ${field.name} needs a value.`);
+	}
+	let text = String(value);
+	let special = getDynamicValuesForField(field).find((name) => name.toLowerCase() === text.toLowerCase());
+	if (special) return { value: special, valueType: "special" };
+	if (valueType === "number") {
+		let number = Number(value);
+		if (Number.isNaN(number)) throw new AssistantFilterError(`${field.name} is a number; "${text}" is not.`);
+		return { value: number, valueType };
+	}
+	return { value: text, valueType };
+}
+
+/**
+ * Turns the assistant's filter into the grid's filter tree, checking every column against the
+ * grid's filter fields and every operator against the column's type. Throws an
+ * {@link AssistantFilterError} the assistant can act on.
+ */
+export function toGridFilter(node: AssistantFilterNode, fields: FieldMetadata[]): FilterGroup {
+	if (!isGroupNode(node)) return { type: "group", mode: "and", items: [toItem(node, fields)] };
+	return {
+		type: "group",
+		mode: node.mode === "or" ? "or" : "and",
+		items: node.items.map((item) => (isGroupNode(item) ? toGridFilter(item, fields) : toItem(item, fields))),
+	};
+}
+
+function toItem(
+	node: { column: string; operator: string; value?: unknown },
+	fields: FieldMetadata[],
+): FilterExpression {
+	let field = node.column ? findFilterField(fields, node.column) : undefined;
+	if (!field || field.excludeFromFilter) {
+		throw new AssistantFilterError(`The grid cannot filter on "${node.column}". Use a field from get_grid_layout.`);
+	}
+	let operator = normalizeOperator(String(node.operator ?? ""));
+	let allowed = getOperatorsForField(field);
+	if (!allowed.includes(operator)) {
+		throw new AssistantFilterError(`${field.name} cannot use ${node.operator}. It can use: ${allowed.join(", ")}.`);
+	}
+	return { type: "expression", column: field.name, operator, ...convertValue(field, operator, node.value) };
+}

package/src/grid/index.tsx

@@ -16,12 +16,15 @@ import {
 	type GridRowParams,
 	useGridApiRef,
 } from "@mui/x-data-grid-premium";
+import { createExpression, type FilterPath, isCompleteExpression, isExpression } from "@olenbetong/appframe-core";
 import { type DataObject, uid } from "@olenbetong/appframe-data";
 import { DataObjectProvider, useLoading } from "@olenbetong/appframe-react";
 
 import clsx from "clsx";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { FilterBuilder } from "../filter/index.js";
+import { AfColumnMenuColumnsItem } from "./AfColumnMenuColumnsItem.js";
+import { AfColumnMenuFilterItem } from "./AfColumnMenuFilterItem.js";
 import { AfGridColumnsPanel } from "./AfGridColumnsPanel.js";
 import { AfHeaderFilterCell } from "./AfHeaderFilterCell.js";
 import { type AfGridContextValue, AfGridContextProvider } from "./AfGridContext.js";
@@ -51,8 +54,9 @@ import type { AfGridColumn } from "./useAfColumns.js";
 import { type AfGridColDef, type AfGridRowAction, useAfColumns } from "./useAfColumns.js";
 import { useAfCurrentIndex } from "./useAfCurrentIndex.js";
 import { useAfData } from "./useAfData.js";
+import { useAfAssistant } from "./useAfAssistant.js";
 import { useAfFilterFields } from "./useAfFilterFields.js";
-import { useAfFilter } from "./useAfFilter.js";
+import { findFilterField, useAfFilter } from "./useAfFilter.js";
 import { type AfGridApi, useAfGridApi } from "./useAfGridApi.js";
 import { useAfKeyBindings } from "./useAfKeyBindings.js";
 import { type AfGridNewItemRowPosition, NEW_ITEM_ROW_ID, isNewItemRow, useAfNewItemRow } from "./useAfNewItemRow.js";
@@ -270,7 +274,7 @@ export type AfGridProps = {
 	 * Editing it moves the data object to the new record at index -1, and committing
 	 * it saves the record. Only shown when the data object allows insert and
 	 * `disableInsert` is not set. `none` turns it off, in which case the Add button
-	 * appends an unsaved row to the data instead. Defaults to `bottom`.
+	 * appends an unsaved row to the data instead. Defaults to `top`.
 	 */
 	newItemRow?: AfGridNewItemRowPosition;
 	/**
@@ -308,6 +312,14 @@ export type AfGridProps = {
 	 * button still shows that the grid is loading.
 	 */
 	disableLoadingOverlay?: boolean;
+	/**
+	 * The grid's name for the site assistant ("Deliveries"), which can then read and change its
+	 * layout, sort, filter and grouping and read its rows (see `assistant.ts`). Defaults to the id.
+	 * The assistant only reaches the grid on pages where it is switched on.
+	 */
+	assistantLabel?: string;
+	/** Keeps the grid away from the site assistant. */
+	disableAssistant?: boolean;
 } & Omit<
 	DataGridProps,
 	| "apiRef"
@@ -371,15 +383,16 @@ function AfGrid_(props: AfGridProps) {
 		getData,
 		idField = "PrimKey",
 		id,
-		// Follows the data object's `newRecordPosition` when it has one (older data
-		// packages have none and append), so the row sits where the record will land
-		newItemRow: newItemRowPosition = dataObject.options?.newRecordPosition === "start" ? "top" : "bottom",
+		// At the bottom the row is pinned to the foot of the viewport, far below the data on a short grid
+		newItemRow: newItemRowPosition = "top",
 		persistenceModel,
 		initialState,
 		pinnedRows,
 		getRowClassName,
 		serverAggregation = dataObject.options?.dynamicLoading === true,
 		disableLoadingOverlay = false,
+		assistantLabel,
+		disableAssistant = false,
 		...other
 	} = props;
 	let apiRefPriv = useGridApiRef();
@@ -420,6 +433,8 @@ function AfGrid_(props: AfGridProps) {
 	let gridFilter = useAfFilter({ autoLoad, dataObject, id });
 	let [snackbar, setSnackbar] = useState<string | null>(null);
 	let [isFilterBuilderOpen, setFilterBuilderOpen] = useState(false);
+	// The criterion added from a column menu, so its value has focus when the builder opens.
+	let [filterBuilderFocus, setFilterBuilderFocus] = useState<FilterPath | null>(null);
 	let [isColumnsPanelOpen, setColumnsPanelOpen] = useState(false);
 	let editProps = useAfRowEditModel({ dataObject, disableEdit, idField, apiRef, newItemRow });
 	useAfKeepFocusAfterEdit(apiRef);
@@ -441,6 +456,16 @@ function AfGrid_(props: AfGridProps) {
 		getRowActions,
 	});
 	let filterFields = useAfFilterFields(dataObject, columnsProp);
+	useAfAssistant({
+		id,
+		label: assistantLabel,
+		disabled: disableAssistant,
+		apiRef,
+		dataObject,
+		gridFilter,
+		filterFields,
+		grouping: grouping.gridProps,
+	});
 
 	let keyEvents = useAfKeyBindings({ apiRef, dataObject });
 	let rootRef = useRef<HTMLDivElement>(null);
@@ -493,7 +518,21 @@ function AfGrid_(props: AfGridProps) {
 			apiRef,
 			filterFields,
 			...gridFilter,
-			openFilterBuilder: () => setFilterBuilderOpen(true),
+			openFilterBuilder: (fieldName?: string) => {
+				let field = fieldName ? findFilterField(filterFields, fieldName) : undefined;
+				let { filter, setFilter } = gridFilter;
+				let draftIndex = filter.items.findIndex(
+					(item) => isExpression(item) && item.column === field?.name && !isCompleteExpression(item),
+				);
+
+				if (field && draftIndex === -1) {
+					draftIndex = filter.items.length;
+					setFilter({ ...filter, items: [...filter.items, createExpression(field)] });
+				}
+
+				setFilterBuilderFocus(field ? [draftIndex] : null);
+				setFilterBuilderOpen(true);
+			},
 			openColumnsPanel: () => setColumnsPanelOpen(true),
 		}),
 		[id, apiRef, filterFields, gridFilter],
@@ -555,6 +594,14 @@ function AfGrid_(props: AfGridProps) {
 						initialState={initialState_}
 						slotProps={{
 							...other.slotProps,
+							columnMenu: {
+								...other.slotProps?.columnMenu,
+								slots: {
+									columnMenuColumnsItem: AfColumnMenuColumnsItem,
+									columnMenuFilterItem: AfColumnMenuFilterItem,
+									...other.slotProps?.columnMenu?.slots,
+								},
+							},
 							headerFilterCell: {
 								...other.slotProps?.headerFilterCell,
 								headerClassName: clsx(other.slotProps?.headerFilterCell?.headerClassName, "AfGrid-headerCell"),
@@ -573,6 +620,7 @@ function AfGrid_(props: AfGridProps) {
 				<FilterBuilder
 					variant="dialog"
 					open={isFilterBuilderOpen}
+					autoFocusPath={filterBuilderFocus}
 					onClose={() => setFilterBuilderOpen(false)}
 					fields={filterFields}
 					viewName={filterViewName}

package/src/grid/useAfAssistant.ts

@@ -0,0 +1,195 @@
+import type { GridApi, GridColDef, GridSortModel } from "@mui/x-data-grid-premium";
+import { describeFilter, type FieldMetadata, pruneFilter } from "@olenbetong/appframe-core";
+import type { DataObject } from "@olenbetong/appframe-data";
+import { type RefObject, useEffect, useLayoutEffect, useRef } from "react";
+
+import { type AssistantGrid, refreshAssistantGrids, registerAssistantGrid } from "./assistant.js";
+import { type AssistantFilterNode, toGridFilter } from "./assistantFilter.js";
+import type { AfFilterApi } from "./useAfFilter.js";
+import type { AfGridGroupingProps } from "./useAfRowGrouping.js";
+
+type Options = {
+	id: string;
+	/** The grid's name for the assistant. Defaults to the grid id. */
+	label?: string;
+	disabled?: boolean;
+	apiRef: RefObject<GridApi | null>;
+	dataObject: DataObject<any>;
+	gridFilter: AfFilterApi;
+	filterFields: FieldMetadata[];
+	grouping: AfGridGroupingProps;
+};
+
+const TOTALS = new Set(["sum", "avg", "min", "max", "size"]);
+
+/** The grid's own columns: not the checkbox, row actions or the grouping column. */
+function dataColumns(api: GridApi): GridColDef[] {
+	return api.getAllColumns().filter((column) => !column.field.startsWith("__") && column.type !== "actions");
+}
+
+function json(value: unknown) {
+	if (value instanceof Date) return value.toISOString();
+	return value;
+}
+
+/**
+ * Offers the grid to the site assistant (see assistant.ts). The methods read the grid when called,
+ * through a ref updated after every render, so the tools always act on what the user sees.
+ */
+export function useAfAssistant(options: Options) {
+	let latest = useRef(options);
+	useLayoutEffect(() => {
+		latest.current = options;
+	});
+
+	let grid = useRef<AssistantGrid | null>(null);
+	grid.current ??= createAssistantGrid(() => latest.current);
+
+	let { disabled, label, id } = options;
+	useEffect(() => {
+		if (disabled) return;
+		return registerAssistantGrid(grid.current!);
+	}, [disabled]);
+
+	useEffect(() => {
+		refreshAssistantGrids();
+	}, [label, id]);
+}
+
+function createAssistantGrid(get: () => Options): AssistantGrid {
+	function api(): GridApi {
+		let current = get().apiRef.current;
+		if (!current) throw new Error("The grid is not ready yet.");
+		return current;
+	}
+
+	function columnByField(field: string) {
+		let lower = String(field ?? "").toLowerCase();
+		let column = dataColumns(api()).find((item) => item.field.toLowerCase() === lower);
+		if (!column) throw new Error(`The grid has no column "${field}". Use a field from get_grid_layout.`);
+		return column;
+	}
+
+	function visibility(): Record<string, boolean> {
+		return { ...api().state.columns.columnVisibilityModel };
+	}
+
+	function describe() {
+		let { gridFilter, filterFields } = get();
+		let pruned = pruneFilter(gridFilter.filter);
+		return pruned ? describeFilter(pruned, { fields: filterFields }) : null;
+	}
+
+	return {
+		label: () => get().label || get().id,
+
+		getLayout() {
+			let { dataObject, filterFields, grouping } = get();
+			let shown = visibility();
+			let columns = dataColumns(api()).map((column) => ({
+				field: column.field,
+				header: column.headerName ?? column.field,
+				shown: shown[column.field] !== false,
+			}));
+			let columnFields = new Set(columns.map((column) => column.field.toLowerCase()));
+			return {
+				columns,
+				// Filtering reaches the view, so a field that is not a column can be filtered on too.
+				otherFilterFields: filterFields
+					.filter((field) => !field.excludeFromFilter && !columnFields.has(field.name.toLowerCase()))
+					.map((field) => ({ field: field.name, type: field.type })),
+				sort: api().getSortModel(),
+				filter: describe(),
+				groupBy: grouping.rowGroupingModel,
+				totals: grouping.aggregationModel,
+				rows: { loaded: dataObject.getData().length, total: dataObject.getDataLength() },
+			};
+		},
+
+		getRows(maxRows) {
+			let grid = api();
+			let shown = visibility();
+			let columns = dataColumns(grid).filter((column) => shown[column.field] !== false);
+			let rows = grid
+				.getSortedRowIds()
+				.filter((rowId) => grid.getRowNode(rowId)?.type === "leaf")
+				.slice(0, maxRows)
+				.map((rowId) => {
+					let row = grid.getRow(rowId);
+					return Object.fromEntries(columns.map((column) => [column.field, json(grid.getRowValue(row, column))]));
+				});
+			return {
+				columns: columns.map((column) => ({ field: column.field, header: column.headerName ?? column.field })),
+				rows,
+				loaded: get().dataObject.getData().length,
+				total: get().dataObject.getDataLength(),
+			};
+		},
+
+		setColumns({ show = [], hide = [], order = [] }) {
+			let grid = api();
+			let model = visibility();
+			for (let field of show) model[columnByField(field).field] = true;
+			for (let field of hide) model[columnByField(field).field] = false;
+			grid.setColumnVisibilityModel(model);
+
+			if (order.length > 0) {
+				// After the checkbox and other built-in columns, which stay first.
+				let first = grid.getAllColumns().findIndex((column) => dataColumns(grid).includes(column));
+				order.forEach((field, index) => grid.setColumnIndex(columnByField(field).field, Math.max(0, first) + index));
+			}
+			return { columns: (this.getLayout() as { columns: unknown }).columns };
+		},
+
+		sort(sort) {
+			let model: GridSortModel = sort.map((item) => {
+				let column = columnByField(item.field);
+				if (column.sortable === false) throw new Error(`The grid cannot sort on ${column.field}.`);
+				return { field: column.field, sort: item.direction === "desc" ? "desc" : "asc" };
+			});
+			api().setSortModel(model);
+			return { sort: model };
+		},
+
+		filter(mode, filter) {
+			let { gridFilter, filterFields, id } = get();
+			if (mode === "clear") {
+				gridFilter.setFilter({ type: "group", name: id, mode: "and", items: [] });
+				return { filter: null };
+			}
+			if (!filter) throw new Error("Give a filter, or use mode 'clear'.");
+			let next = toGridFilter(filter as AssistantFilterNode, filterFields);
+			let current = pruneFilter(gridFilter.filter);
+			let tree =
+				mode === "add" && current
+					? { type: "group" as const, name: id, mode: "and" as const, items: [current, next] }
+					: { ...next, name: id };
+			gridFilter.setFilter(tree);
+			return {
+				filter: describeFilter(tree, { fields: filterFields }),
+				note: "The grid reloads with the new filter in a moment.",
+			};
+		},
+
+		group({ groupBy, totals }) {
+			let { grouping } = get();
+			if (groupBy) {
+				let fields = groupBy.map((field) => {
+					let column = columnByField(field);
+					if (column.groupable === false) throw new Error(`The grid cannot group by ${column.field}.`);
+					return column.field;
+				});
+				grouping.onRowGroupingModelChange(fields);
+			}
+			if (totals) {
+				let model: Record<string, string> = {};
+				for (let [field, total] of Object.entries(totals)) {
+					if (!TOTALS.has(total)) throw new Error(`Unknown total "${total}". Use sum, avg, min, max or size.`);
+					model[columnByField(field).field] = total;
+				}
+				grouping.onAggregationModelChange(model);
+			}
+			return { groupBy: groupBy ?? grouping.rowGroupingModel, totals: totals ?? grouping.aggregationModel };
+		},
+	};
+}

package/src/grid/useAfNewItemRow.ts

@@ -152,7 +152,9 @@ export function useAfNewItemRow({
 			let focusBefore = gridFocusCellSelector(apiRef);
 
 			try {
-				await dataObject.endEdit();
+				// A record saved from a row above the data is inserted first, so it stays where it was
+				// entered; at the bottom the data object's own `newRecordPosition` decides.
+				await dataObject.endEdit(position === "top" ? { newRecordPosition: "start" } : undefined);
 			} catch (error) {
 				// The framework keeps a failed new record in storage as an unsaved row.
 				// The grid keeps the draft in the new item row instead, so the unsaved
@@ -185,7 +187,7 @@ export function useAfNewItemRow({
 
 			return blankRow;
 		},
-		[apiRef, dataObject, beginNewRecord, cancelNewRecord],
+		[apiRef, dataObject, position, beginNewRecord, cancelNewRecord],
 	);
 
 	useEffect(() => {