@getaster/elements 0.3.0 → 0.4.0

package/dist/grid/grid.js

@@ -1,5 +1,5 @@
 import { computed, effect, signal, untracked } from "@preact/signals-core";
-import { isRelative, progressPolicy, FilterDraft, describeCriteria, exportCsv, selectionPublication, EditModel, editPublication, keyText, Tree, } from "@getaster/data";
+import { isRelative, progressPolicy, FilterDraft, filterOperators as metadataOperators, describeCriteria, exportCsv, selectionPublication, EditModel, editPublication, keyText, Tree, } from "@getaster/data";
 import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { styleMap } from "lit-html/directives/style-map.js";
@@ -20,15 +20,19 @@ import "../filter/filter-builder.js";
 import "../dialog/dialog.js";
 import { containsText, parseRange, rangeText, withDate } from "./filters.js";
 import { RowHeights } from "./rows.js";
-import { defaultView, groupFields, freezeThrough, isNumeric, loadViews, moveColumn, naturalWidth, nudgeColumn, reconcile, removeSort, setFilter, setGroup, setHidden, setWidth, sortBy, sortDirection, storeViews, track, viewQuery, } from "./view.js";
+import { defaultView, effectiveColumns, effectiveFrozen, effectiveGroups, groupFields, freezeThrough, isNumeric, loadViews, moveColumn, naturalWidth, nudgeColumn, reconcile, removeSort, setFilter, setGroup, setHidden, setWidth, sortBy, sortDirection, storeViews, track, viewQuery, viewRefusals, criteriaFields, } from "./view.js";
+import { policyPermits } from "./policy.js";
+import { cellText, labelText, mappedValue, styleCell, styleRow, validateGridLabels, validateGridPresentation, } from "./appearance.js";
+import { filterOperatorLabel } from "../rule/operators.js";
+import { editMode as featureEditMode, multiSort as featureMultiSort, paged as featurePaged, selectionAppearance as featureSelectionAppearance, selectionColumn as featureSelectionColumn, validateFeatures, withFeature, withoutFeature, } from "./features.js";
 const OVERSCAN = 400;
+/** The leading selection column's track, kept in step with the stylesheet. */
+const SELECT_WIDTH = 44;
 /** A count that isn't exact: an estimate, or an uncounted collection's, which includes a page that may not exist. */
 const atLeast = (c) => c.count.value === undefined || c.counted.value ? {}
     : c.estimated.value ? { estimate: true }
         : { atLeast: Math.max(0, c.count.value - c.pageSize) };
 const FILTER_DELAY = 300;
-/** A value the server hides from this person on this record: said, not left blank. */
-const hiddenValue = html `<span class="aster-hidden" title="You can't see this value">Hidden</span>`;
 /** An estimate to two significant figures: its last digits aren't known. */
 function roughly(n) {
     if (n < 100)
@@ -79,7 +83,11 @@ export class Grid extends AsterElement {
     #set = this.prop("");
     #binding = this.prop(undefined);
     #selection = this.prop(undefined);
-    #selectable = this.prop(true);
+    #policy = this.prop({});
+    #features = this.prop([]);
+    /** Bumped on a policy change, so effects that rebuild the query follow it. */
+    #capabilitiesVersion = signal(0);
+    #driftDismissed = signal("");
     #ownsCollection = false;
     #bound;
     #boundQuery;
@@ -90,17 +98,37 @@ export class Grid extends AsterElement {
     #activeKey = signal(undefined);
     #groupFocus = signal(undefined);
     #focusRequest = 0;
+    #scrollRequest = 0;
     #viewRequest = 0;
     #pendingFocus = signal(undefined);
     #focusBefore = null;
     #groupToolFocus;
     #base = this.prop(undefined);
     #view = this.prop(undefined);
+    /** Entries the current view keeps but the derived query leaves out. */
+    #drift = computed(() => {
+        const view = this.#view.value;
+        if (!view)
+            return [];
+        const seen = new Set();
+        const out = [];
+        for (const entry of viewRefusals(view, this.#capabilities())) {
+            const id = `${entry.kind}:${entry.field}`;
+            if (seen.has(id))
+                continue;
+            seen.add(id);
+            const reason = this.#refusalReason(entry);
+            out.push({ ...entry, reason: reason ?? labelText(this.#labels.value, "driftFallbackReason", { field: this.#title(entry.field) }) });
+        }
+        return out;
+    });
     #label = this.prop("");
     #publish = this.prop("");
     #persist = this.prop("");
     #renderers = this.prop({});
     #formatters = this.prop({});
+    #presentation = this.prop({});
+    #labels = this.prop({});
     #lookups = this.prop({});
     #summaries = this.prop([]);
     #progressPolicy = this.prop({});
@@ -109,7 +137,19 @@ export class Grid extends AsterElement {
     #summaryCollection;
     #summaryContext;
     #empty = this.prop(nothing);
-    #editable = this.prop(false);
+    #loading = this.prop(nothing);
+    #loadingMessage = this.prop("Loading…");
+    #errorView = this.prop(undefined);
+    #autoFetch = this.prop(true);
+    #pageSize = this.prop(100);
+    #keepPages = this.prop(undefined);
+    #exactCount = this.prop(false);
+    /** The page shown in paged mode, zero-based. */
+    #page = signal(0);
+    /** Set by refresh() or the first interaction; autoFetch false waits for it. */
+    #demand = signal(false);
+    #chrome = this.prop({});
+    #toolbarOptions = this.prop({});
     #treeOptions = this.prop(undefined);
     #rowControls = this.prop(undefined);
     #expansion = this.prop(undefined);
@@ -123,6 +163,8 @@ export class Grid extends AsterElement {
     #filterCalendar = new CalendarState();
     #filterCalendarField = this.prop(undefined);
     #rowMenu = this.prop(() => []);
+    #columnMenu = this.prop(() => []);
+    #filterOperators = this.prop({});
     #rules = this.prop({});
     #editing = signal(undefined);
     #id = uid("aster-grid");
@@ -217,6 +259,27 @@ export class Grid extends AsterElement {
     /** Text-only display formatting by field; never changes server sorting or filtering. */
     get formatters() { return this.#formatters.value; }
     set formatters(value) { this.#formatters.value = value; }
+    /**
+     * Declarative presentation: per-column titles, alignment, value maps and
+     * formats, row and cell classes, and hilites. Default `{}`, which keeps
+     * today's rendering. Renderers and formatters (JavaScript) outrank these
+     * plain-data display overrides for cell content.
+     */
+    get presentation() { return this.#presentation.value; }
+    set presentation(value) {
+        validateGridPresentation(value, true);
+        this.#presentation.value = { ...value };
+    }
+    /**
+     * The grid's overridable strings. Every entry is optional; a missing entry
+     * keeps today's text, and `{name}` placeholders are filled by the grid.
+     * A stopgap before full i18n, not an i18n engine.
+     */
+    get labels() { return this.#labels.value; }
+    set labels(value) {
+        validateGridLabels(value);
+        this.#labels.value = { ...value };
+    }
     /** Exact overall totals and, when grouped, totals on each group header. */
     get summaries() { return this.#summaries.value; }
     set summaries(value) {
@@ -241,7 +304,7 @@ export class Grid extends AsterElement {
         const selection = this.#selection.peek();
         if (scope === "selection" && !selection)
             throw new Error("Selection export requires a shared Selection");
-        const columns = view.columns.filter((c) => !c.hidden).map((c) => ({ field: c.field }));
+        const columns = this.#visibleColumns(view).map((c) => ({ field: c.field }));
         return exportCsv(ctx, collection.query, columns, { ...csv, ...(scope === "selection" ? { keys: selection.keys.peek() } : {}) });
     }
     /** Foreign keys shown by a related record's field, by column. */
@@ -258,6 +321,33 @@ export class Grid extends AsterElement {
     set rowMenu(v) {
         this.#rowMenu.value = v;
     }
+    /**
+     * The page's actions for a column, shown first in its menu. Read each time
+     * a menu opens. Default: no items.
+     */
+    get columnMenu() {
+        return this.#columnMenu.value;
+    }
+    set columnMenu(v) {
+        this.#columnMenu.value = v;
+    }
+    /**
+     * Per-field operator allowlists for filtering, by column field. Each entry
+     * narrows the operators the metadata offers; it can never add one. Default
+     * `{}`: the metadata's operators.
+     */
+    get filterOperators() {
+        return this.#filterOperators.value;
+    }
+    set filterOperators(v) {
+        if (!v || typeof v !== "object" || Array.isArray(v))
+            throw new TypeError("filterOperators must be a record of operator lists");
+        for (const [field, list] of Object.entries(v)) {
+            if (!Array.isArray(list) || list.some((op) => typeof op !== "string" || !op))
+                throw new TypeError(`filterOperators.${field} must be a list of operators`);
+        }
+        this.#filterOperators.value = Object.fromEntries(Object.entries(v).map(([field, list]) => [field, [...list]]));
+    }
     /**
      * A tree grid: the first column shows each record's level with an opener;
      * levels load as they open; a filter keeps the path to each match. Set it
@@ -267,7 +357,7 @@ export class Grid extends AsterElement {
         return this.#treeOptions.value;
     }
     set tree(v) {
-        if (v && this.#external())
+        if (v && this.#binding.peek())
             throw new Error("A shared collection grid supports flat rows");
         if (v && this.#summaries.peek().length)
             throw new Error("Tree summaries require an explicit query through the data summary API");
@@ -323,8 +413,9 @@ export class Grid extends AsterElement {
         }
         else if (expansion.limit !== undefined && open.length >= expansion.limit) {
             const noun = expansion.noun ?? "row";
-            announce(`Only ${expansion.limit} ${expansion.limit === 1 ? noun : `${noun}s`} can be open at once. Close one first.`);
-            this.#refused.value = `Only ${expansion.limit} ${expansion.limit === 1 ? noun : `${noun}s`} can be open at once. Close one first.`;
+            const text = this.#text("expansionLimit", { limit: expansion.limit, noun: expansion.limit === 1 ? noun : `${noun}s` });
+            announce(text);
+            this.#refused.value = text;
             return false;
         }
         this.#refused.value = undefined;
@@ -397,7 +488,269 @@ export class Grid extends AsterElement {
         return set ? this.#ctx.peek()?.store.get(set, key)?.entity : undefined;
     }
     #rowState(key, entity, expanded) {
-        return { key, entity, expanded, editable: this.#editable.value };
+        return { key, entity, expanded, editable: this.#editEnabled() };
+    }
+    #selectionAllowed() {
+        return this.#policy.value.selectable ?? true;
+    }
+    /** Whether selection gets a leading checkbox column. */
+    #selectionColumnOn() {
+        return featureSelectionColumn(this.#features.value) && this.#selectionAllowed();
+    }
+    /** How selected records are highlighted. */
+    #selectionAppearance() {
+        return featureSelectionAppearance(this.#features.value);
+    }
+    #restoreSelectionFocus() {
+        if (!(document.activeElement instanceof Element) || !this.contains(document.activeElement) || !document.activeElement.closest(".aster-grid-selection, .aster-grid-select"))
+            return;
+        this.#selectionInside.value = undefined;
+        queueMicrotask(() => this.focus({ preventScroll: true }));
+    }
+    #title(field) {
+        return this.#presentation.value.columns?.[field]?.title ?? this.#collection?.type.field(field)?.title ?? field;
+    }
+    /** One label text, overridden or the shipped default, with placeholders filled. */
+    #text(key, values) {
+        return labelText(this.#labels.value, key, values);
+    }
+    /** A value the server hides from this person on this record: said, not left blank. */
+    #hiddenValue() {
+        return html `<span class="aster-hidden" title=${this.#text("hiddenTitle")}>${this.#text("hiddenValue")}</span>`;
+    }
+    /** Whether the page lets this field use a capability, before schema and structure. */
+    #policyAllows(capability, field, fallback) {
+        return policyPermits(this.#policy.value, capability, field, fallback);
+    }
+    /** Whether the column's own values sort; a lookup column needs its related display path. */
+    #structurallySortable(field) {
+        return !this.#lookups.value[field] || this.#sortPaths.value[field] !== undefined;
+    }
+    /** Why sorting this field is refused, in precedence order: schema, structure, policy. */
+    #sortRefusal(field) {
+        const title = this.#title(field);
+        const schema = this.#ctx.value?.schema.sets.get(this.set);
+        const navigation = this.#sortPaths.value[field]?.split("/")[0];
+        if (schema?.nonSortable.has(field) || (navigation !== undefined && schema?.nonSortable.has(navigation)))
+            return this.#text("sortServiceRefused", { field: title });
+        if (!this.#structurallySortable(field))
+            return this.#text("sortNavigationRefused", { field: title });
+        if (!this.#policyAllows("sortable", field, true))
+            return this.#text("sortPolicyRefused", { field: title });
+        return undefined;
+    }
+    /** Why filtering this field is refused, in precedence order: schema, policy. */
+    #filterRefusal(field) {
+        const title = this.#title(field);
+        if (this.#ctx.value?.schema.sets.get(this.set)?.nonFilterable.has(field))
+            return this.#text("filterServiceRefused", { field: title });
+        if (!this.#policyAllows("filterable", field, true))
+            return this.#text("filterPolicyRefused", { field: title });
+        return undefined;
+    }
+    /** The operators a field may use: the metadata's, narrowed by the page's allowlist. */
+    #operators(field) {
+        const offered = metadataOperators(this.#collection?.type.field(field));
+        const allowed = this.#filterOperators.value[field];
+        return allowed === undefined ? offered : offered.filter((op) => allowed.includes(op));
+    }
+    /** Why one filter operator is refused for a field. */
+    #filterOperatorRefusal(field, op) {
+        if (this.#operators(field).includes(op))
+            return undefined;
+        return this.#text("filterOperatorRefused", { field: this.#title(field), operator: filterOperatorLabel(op) });
+    }
+    /** Whether a parsed filter row criteria uses only operators the page allows. */
+    #criteriaOperatorRefusal(field, criteria) {
+        const map = (node) => {
+            if (!node || typeof node !== "object")
+                return undefined;
+            const value = node;
+            switch (value.op) {
+                case "and":
+                case "or":
+                    return value.args?.map(map).find((reason) => reason !== undefined);
+                case "not":
+                    return value.arg ? map(value.arg) : undefined;
+                default:
+                    return value.op === undefined ? undefined : this.#filterOperatorRefusal(field, value.op);
+            }
+        };
+        return map(criteria);
+    }
+    /** Why a draft condition uses an operator the page refuses; related-record fields are metadata-only. */
+    #draftOperatorRefusal(model) {
+        const own = this.#collection?.type;
+        const walk = (node) => {
+            if (node.kind !== "condition") {
+                for (const child of node.children) {
+                    const reason = walk(child);
+                    if (reason)
+                        return reason;
+                }
+                return undefined;
+            }
+            if (!node.field || model.typeFor(node.id) !== own)
+                return undefined;
+            return this.#filterOperatorRefusal(node.field, node.op);
+        };
+        return walk(model.root.peek());
+    }
+    /** Why grouping by this field is refused, in precedence order: structure, policy. */
+    #groupRefusal(field) {
+        const title = this.#title(field);
+        if (this.#tree || this.#external())
+            return this.#text("groupSharedRefused", { field: title });
+        const type = this.#collection?.type;
+        const entry = type?.field(field);
+        if (!entry)
+            return this.#text("groupUnknownRefused", { field: title });
+        if (entry.type === "Edm.String" && !entry.allowedValues && (entry.maxLength ?? 0) > 500)
+            return this.#text("groupLongRefused", { field: title });
+        if (!this.#policyAllows("groupable", field, true))
+            return this.#text("groupPolicyRefused", { field: title });
+        return undefined;
+    }
+    /** Whether grouping this field is permitted and possible. */
+    #groupable(field) {
+        return this.#groupRefusal(field) === undefined;
+    }
+    /** Why resizing this column is refused. */
+    #resizeRefusal(field) {
+        return this.#policyAllows("resizable", field, true) ? undefined : this.#text("resizePolicyRefused", { field: this.#title(field) });
+    }
+    /** Why moving this column is refused. */
+    #moveRefusal(field) {
+        return this.#policyAllows("movable", field, true) ? undefined : this.#text("movePolicyRefused", { field: this.#title(field) });
+    }
+    /** Why hiding this column is refused, in precedence order: the last visible column, policy. */
+    #hideRefusal(field) {
+        const view = this.#view.value;
+        if (!view)
+            return undefined;
+        const visible = this.#visibleColumns(view);
+        if (visible.length <= 1 && visible.some((column) => column.field === field))
+            return this.#text("hideLastRefused");
+        if (!this.#policyAllows("hideable", field, true))
+            return this.#text("hidePolicyRefused", { field: this.#title(field) });
+        return undefined;
+    }
+    /** Why freezing this column is refused. */
+    #freezeRefusal(field) {
+        return this.#policyAllows("freezable", field, true) ? undefined : this.#text("freezePolicyRefused", { field: this.#title(field) });
+    }
+    /** Why freezing through this column is refused: every frozen column must be freezable and one must stay unfrozen. */
+    #freezeThroughRefusal(field) {
+        const view = this.#view.value;
+        if (!view)
+            return undefined;
+        const visible = this.#visibleColumns(view);
+        const at = visible.findIndex((column) => column.field === field);
+        if (at < 0)
+            return this.#text("freezeUnknownRefused", { field: this.#title(field) });
+        if (at === visible.length - 1)
+            return this.#text("freezeLastRefused");
+        for (let i = 0; i <= at; i++) {
+            const reason = this.#freezeRefusal(visible[i].field);
+            if (reason)
+                return reason;
+        }
+        return undefined;
+    }
+    /** The columns shown, honoring a page that forbids hiding. */
+    #visibleColumns(view) {
+        return effectiveColumns(view, (field) => this.#policyAllows("hideable", field, true));
+    }
+    /** The frozen run in force, honoring a page that forbids freezing. */
+    #frozenCount(view, visible = this.#visibleColumns(view)) {
+        return effectiveFrozen(view, visible, (field) => this.#policyAllows("freezable", field, true));
+    }
+    /** The grouping levels in force, honoring structure and policy. */
+    #groupedFields(view = this.#view.value) {
+        return effectiveGroups(view, (field) => this.#groupable(field));
+    }
+    /** Whether the person may add another sort key. */
+    #multiSort() {
+        return featureMultiSort(this.#features.value);
+    }
+    /** Whether the grid loads a page at a time. */
+    #paged() {
+        return featurePaged(this.#features.value);
+    }
+    /** Paged mode applies to flat rows; grouped and tree grids keep loading by viewport. */
+    #pagedMode() {
+        return this.#paged() && !this.#tree && this.#groupedFields().length === 0;
+    }
+    /** The data-core options for an owned collection. Defaults keep the collection's own. */
+    #collectionOptions() {
+        return {
+            pageSize: this.#pageSize.value,
+            ...(this.#keepPages.value === undefined ? {} : { keepPages: this.#keepPages.value }),
+            ...(this.#exactCount.value ? { exactCount: true } : {}),
+        };
+    }
+    /** Whether the page lets this field be edited; schema and page rules still refuse on their own. */
+    #fieldEditable(field) {
+        return this.#policyAllows("editable", field, false);
+    }
+    #capabilities() {
+        return {
+            sortable: (field) => this.#sortRefusal(field) === undefined,
+            filterable: (field) => this.#filterRefusal(field) === undefined,
+            groupable: (field) => this.#groupRefusal(field) === undefined,
+            hideable: (field) => this.#hideRefusal(field) === undefined,
+            freezable: (field) => this.#freezeRefusal(field) === undefined,
+        };
+    }
+    /** The refusal for one drift entry, with the same precedence its affordance uses. */
+    #refusalReason(entry) {
+        switch (entry.kind) {
+            case "sort":
+                return this.#sortRefusal(entry.field);
+            case "filter":
+            case "criteria":
+                return this.#filterRefusal(entry.field);
+            case "group":
+                return this.#groupRefusal(entry.field);
+            case "hidden":
+                return this.#hideRefusal(entry.field);
+            case "frozen":
+                return this.#freezeRefusal(entry.field);
+        }
+    }
+    #driftKey(entries) {
+        return entries.map((entry) => `${entry.kind}:${entry.field}`).sort().join("|");
+    }
+    #driftText(entries) {
+        const parts = entries.map((entry) => {
+            const title = this.#title(entry.field);
+            const what = (() => {
+                switch (entry.kind) {
+                    case "sort":
+                        return this.#text("driftSort", { field: title });
+                    case "filter":
+                        return this.#text("driftFilter", { field: title });
+                    case "criteria":
+                        return this.#text("driftCriteria", { field: title });
+                    case "group":
+                        return this.#text("driftGroup", { field: title });
+                    case "hidden":
+                        return this.#text("driftHidden", { field: title });
+                    case "frozen":
+                        return this.#text("driftFrozen", { field: title });
+                }
+            })();
+            return this.#text("driftEntry", { what, reason: entry.reason });
+        });
+        return this.#text("driftNote", { entries: parts.join(" ") });
+    }
+    /** Whether any visible column can be edited in place. */
+    #editEnabled() {
+        const view = this.#view.value;
+        const type = this.#collection?.type;
+        if (!view || !type)
+            return false;
+        return this.#visibleColumns(view).some((column) => !type.field(column.field)?.computed && this.#fieldEditable(column.field));
     }
     /** The row's floating controls, in a cell of their own past the last column. */
     #controls(key, entity, expanded, activeRow, columns) {
@@ -487,12 +840,152 @@ export class Grid extends AsterElement {
             scroll.scrollTop = this.#heights.offset(index);
         return true;
     }
-    /** Rows can be edited in place: Enter, F2 or a double-click start, Enter saves, Escape cancels. */
+    /**
+     * What the page allows, by capability and field. Policy can only restrict:
+     * schema and structure refuse first, and a page rule's read-only reason
+     * outranks a policy reason. It is host configuration, never part of the
+     * saved [[object:GridView]].
+     */
+    get policy() {
+        return this.#policy.value;
+    }
+    set policy(value) {
+        const before = this.#selectionAllowed();
+        this.#policy.value = value;
+        this.#capabilitiesVersion.value++;
+        if (before && !this.#selectionAllowed())
+            this.#restoreSelectionFocus();
+    }
+    /** Sugar for `policy.sortable`: no sorting, an allowlist, or a predicate. */
+    get sortable() {
+        const value = this.#policy.value.sortable;
+        return typeof value === "function" ? true : value;
+    }
+    set sortable(value) {
+        const { sortable: _, ...rest } = this.#policy.peek();
+        this.policy = value === undefined ? rest : { ...rest, sortable: value };
+    }
+    /** Sugar for `policy.filterable`: no filtering, an allowlist, or a predicate. */
+    get filterable() {
+        const value = this.#policy.value.filterable;
+        return typeof value === "function" ? true : value;
+    }
+    set filterable(value) {
+        const { filterable: _, ...rest } = this.#policy.peek();
+        this.policy = value === undefined ? rest : { ...rest, filterable: value };
+    }
+    /** Sugar for `policy.groupable`: no grouping, an allowlist, or a predicate. */
+    get groupable() {
+        return this.#capabilityValue("groupable");
+    }
+    set groupable(value) {
+        this.#setCapability("groupable", value);
+    }
+    /** Sugar for `policy.resizable`: no column resizing, an allowlist, or a predicate. */
+    get resizable() {
+        return this.#capabilityValue("resizable");
+    }
+    set resizable(value) {
+        this.#setCapability("resizable", value);
+    }
+    /** Sugar for `policy.movable`: no column moving, an allowlist, or a predicate. */
+    get movable() {
+        return this.#capabilityValue("movable");
+    }
+    set movable(value) {
+        this.#setCapability("movable", value);
+    }
+    /** Sugar for `policy.hideable`: no column hiding, an allowlist, or a predicate. */
+    get hideable() {
+        return this.#capabilityValue("hideable");
+    }
+    set hideable(value) {
+        this.#setCapability("hideable", value);
+    }
+    /** Sugar for `policy.freezable`: no column freezing, an allowlist, or a predicate. */
+    get freezable() {
+        return this.#capabilityValue("freezable");
+    }
+    set freezable(value) {
+        this.#setCapability("freezable", value);
+    }
+    #capabilityValue(capability) {
+        const value = this.#policy.value[capability];
+        return typeof value === "function" ? true : value;
+    }
+    #setCapability(capability, value) {
+        const { [capability]: _, ...rest } = this.#policy.peek();
+        this.policy = value === undefined ? rest : { ...rest, [capability]: value };
+    }
+    /** Sugar for `policy.editable`: no editing, an allowlist, or a predicate. */
     get editable() {
-        return this.#editable.value;
+        const value = this.#policy.value.editable;
+        return typeof value === "function" ? true : value ?? false;
+    }
+    set editable(value) {
+        this.policy = { ...this.#policy.peek(), editable: value };
+    }
+    /**
+     * How permitted capabilities behave, as [[type:GridFeature]] descriptors.
+     * The structured form is the contract; the matching properties are sugar.
+     * Default `[]`, which keeps today's grid.
+     */
+    get features() {
+        return this.#features.value;
+    }
+    set features(value) {
+        validateFeatures(value);
+        this.#features.value = value.map((entry) => ({ ...entry }));
+    }
+    /**
+     * Sugar for a `sort` feature's `multi`: whether Shift adds another sort key.
+     * `false` makes every sort action replace the sort. Default `true`.
+     */
+    get multiSort() {
+        return this.#multiSort();
+    }
+    set multiSort(value) {
+        if (typeof value !== "boolean")
+            throw new TypeError("multiSort must be a boolean");
+        this.#features.value = value ? withoutFeature(this.#features.peek(), "sort") : withFeature(this.#features.peek(), { kind: "sort", multi: false });
+    }
+    /** Sugar for an `edit` feature's `mode`: a whole row (`"row"`, the default) or one cell (`"cell"`). */
+    get editMode() {
+        return featureEditMode(this.#features.value);
+    }
+    set editMode(value) {
+        if (value !== "row" && value !== "cell")
+            throw new TypeError('editMode must be "row" or "cell"');
+        this.#features.value = value === "row" ? withoutFeature(this.#features.peek(), "edit") : withFeature(this.#features.peek(), { kind: "edit", mode: "cell" });
+    }
+    /** Sugar for a `select` feature's `appearance`: how a selected record is highlighted. */
+    get selectionAppearance() {
+        return featureSelectionAppearance(this.#features.value);
+    }
+    set selectionAppearance(value) {
+        if (value !== "row" && value !== "cell")
+            throw new TypeError('selectionAppearance must be "row" or "cell"');
+        const select = this.#selectFeature();
+        if (value === "row" && select.column !== true)
+            this.#features.value = withoutFeature(this.#features.peek(), "select");
+        else
+            this.#features.value = withFeature(this.#features.peek(), { kind: "select", appearance: value, ...(select.column ? { column: true } : {}) });
+    }
+    /** Sugar for a `select` feature's `column`: whether selection gets a checkbox column. */
+    get selectionColumn() {
+        return featureSelectionColumn(this.#features.value);
+    }
+    set selectionColumn(value) {
+        if (typeof value !== "boolean")
+            throw new TypeError("selectionColumn must be a boolean");
+        const select = this.#selectFeature();
+        if (!value && select.appearance === undefined)
+            this.#features.value = withoutFeature(this.#features.peek(), "select");
+        else
+            this.#features.value = withFeature(this.#features.peek(), { kind: "select", ...(select.appearance ? { appearance: select.appearance } : {}), ...(value ? { column: true } : {}) });
     }
-    set editable(v) {
-        this.#editable.value = v;
+    #selectFeature() {
+        return this.#features.value.find((entry) => entry.kind === "select") ?? {};
     }
     /**
      * Page rules for the cells of a row being edited. Each row has a child
@@ -513,6 +1006,268 @@ export class Grid extends AsterElement {
     set empty(v) {
         this.#empty.value = v;
     }
+    /**
+     * Shown in the content area while the first page loads. Default: the
+     * built-in presentation with [[attr:Grid.loadingMessage]].
+     */
+    get loading() {
+        return this.#loading.value;
+    }
+    set loading(v) {
+        this.#loading.value = v;
+    }
+    /** The built-in loading presentation's text. Default `"Loading…"`. */
+    get loadingMessage() {
+        return this.#loadingMessage.value;
+    }
+    set loadingMessage(v) {
+        if (typeof v !== "string")
+            throw new TypeError("loadingMessage must be a string");
+        this.#loadingMessage.value = v;
+    }
+    /**
+     * The root collection failure, as a template: the page says what happened
+     * and offers `retry`, which calls [[method:Grid.refresh]]. Default: a
+     * "Couldn’t load rows." message with a Retry button.
+     */
+    get error() {
+        return this.#errorView.value;
+    }
+    set error(v) {
+        if (v !== undefined && typeof v !== "function")
+            throw new TypeError("error must be a function");
+        this.#errorView.value = v;
+    }
+    /**
+     * Load on connect (the default) or wait for [[method:Grid.refresh]] or the
+     * first interaction with the grid. Default `true`.
+     */
+    get autoFetch() {
+        return this.#autoFetch.value;
+    }
+    set autoFetch(v) {
+        if (typeof v !== "boolean")
+            throw new TypeError("autoFetch must be a boolean");
+        this.#autoFetch.value = v;
+    }
+    /**
+     * Rows per load, in either loading mode. Default `100`. In paged mode it is
+     * also the number of rows shown at once.
+     */
+    get pageSize() {
+        return this.#pageSize.value;
+    }
+    set pageSize(v) {
+        if (!Number.isSafeInteger(v) || v < 1)
+            throw new TypeError("pageSize must be a positive integer");
+        this.#pageSize.value = v;
+    }
+    /** Loaded pages kept while scrolling; the data core's default (20) when unset. */
+    get keepPages() {
+        return this.#keepPages.value;
+    }
+    set keepPages(v) {
+        if (v !== undefined && (!Number.isSafeInteger(v) || v < 1))
+            throw new TypeError("keepPages must be a positive integer");
+        this.#keepPages.value = v;
+    }
+    /** Ask the server for an exact total where it would estimate or omit one. Default `false`. */
+    get exactCount() {
+        return this.#exactCount.value;
+    }
+    set exactCount(v) {
+        if (typeof v !== "boolean")
+            throw new TypeError("exactCount must be a boolean");
+        this.#exactCount.value = v;
+    }
+    /**
+     * Reloads the rows the grid shows, keeping them visible until the answer
+     * arrives. Rejects when the load fails; the error view or `collection.error`
+     * reports it. With `autoFetch` false it also starts the first load.
+     */
+    async refresh() {
+        this.#demand.value = true;
+        const grouping = this.#grouping;
+        if (grouping)
+            return grouping.root.refresh();
+        const collection = this.#collection;
+        if (!collection)
+            return;
+        if (this.#tree) {
+            const top = this.#tree.level(undefined);
+            await top.ensure(0, top.pageSize);
+            return this.#tree.refresh();
+        }
+        return collection.refresh();
+    }
+    /** Whether autoFetch false is still waiting for refresh() or a first interaction. */
+    #deferred() {
+        return !this.#autoFetch.value && !this.#demand.value;
+    }
+    /** The collection whose loading/error state the content area reports. */
+    #rootState() {
+        return this.#grouping?.root ?? this.#collection;
+    }
+    /** Whether the content area is waiting for rows; a deferred grid is idle, not busy. */
+    #busy(count) {
+        const status = this.#rootState()?.status.value;
+        if (status === "loading")
+            return true;
+        if (this.#deferred())
+            return false;
+        return count === undefined && status !== "error";
+    }
+    /** The root collection's failure, if any, as a banner with a retry. */
+    #failureView() {
+        const root = this.#rootState();
+        if (!root || root.status.value !== "error")
+            return nothing;
+        const error = root.error.value;
+        const retry = () => {
+            this.focus({ preventScroll: true });
+            void this.refresh().catch(() => { });
+        };
+        const custom = this.#errorView.value;
+        return html `<div class="aster-grid-failure" role="alert">
+      ${custom
+            ? custom(error, retry)
+            : html `<span>${this.#text("loadFailed")}</span><button type="button" class="aster-grid-tool" @click=${retry}>${this.#text("retry")}</button>`}
+    </div>`;
+    }
+    /** The content-area loading presentation, used only while there is nothing to show. */
+    #loadingView() {
+        // The label bag may reword the built-in text; an explicit loadingMessage wins.
+        const message = this.#loadingMessage.value === "Loading…" ? this.#text("loading") : this.#loadingMessage.value;
+        return this.#loading.value !== nothing
+            ? this.#loading.value
+            : html `<div class="aster-grid-loading" role="status">${message}</div>`;
+    }
+    /** What sits below the rows: loading while empty, the empty template once the query is known to match nothing. */
+    #contentState(layout, count) {
+        if (this.#rootState()?.status.value === "error")
+            return nothing;
+        if (this.#busy(count) && layout.keys.length === 0)
+            return this.#loadingView();
+        if (count !== 0)
+            return nothing;
+        const empty = this.#empty.value !== nothing ? this.#empty.value : this.#text("empty");
+        return html `<div class="aster-grid-empty">${empty || nothing}</div>`;
+    }
+    /** The paging bar, in paged mode when chrome permits it. */
+    #pagingBar(layout) {
+        if (!this.#pagedMode() || this.#chrome.value.pagingBar === false)
+            return nothing;
+        const total = layout.total;
+        const size = Math.max(1, this.#pageSize.value);
+        const pages = total === undefined ? undefined : Math.max(1, Math.ceil(total / size));
+        const page = pages === undefined ? Math.max(0, this.#page.value) : Math.min(Math.max(0, this.#page.value), pages - 1);
+        const loaded = layout.keys.filter((key) => key !== undefined).length;
+        const firstRow = page * size;
+        const lastRow = total === undefined ? firstRow + loaded : Math.min(total, firstRow + size);
+        const canNext = pages === undefined ? loaded >= size : page < pages - 1;
+        const fmt = (n) => new Intl.NumberFormat("en-GB").format(n);
+        const label = pages === undefined
+            ? this.#text("page", { page: fmt(page + 1) })
+            : this.#text("pageOf", { page: fmt(page + 1), pages: fmt(pages) })
+                + (total ? this.#text("pageRows", { first: fmt(firstRow + 1), last: fmt(lastRow), total: fmt(total) }) : "");
+        const button = (name, action, target, disabled, text) => html `<button type="button"
+      class="aster-grid-tool" data-page-action=${action} aria-label=${name} ?disabled=${disabled} @click=${() => this.#goPage(target, action)}>${text}</button>`;
+        return html `<div class="aster-grid-paging" role="group" aria-label=${this.#text("pages")}>
+      ${button(this.#text("firstPage"), "first", 0, page === 0, "«")}
+      ${button(this.#text("previousPage"), "previous", page - 1, page === 0, "‹")}
+      <span class="aster-grid-page" role="status">${label}</span>
+      ${button(this.#text("nextPage"), "next", page + 1, !canNext, "›")}
+      ${button(this.#text("lastPage"), "last", pages === undefined ? page + 1 : pages - 1, pages === undefined ? !canNext : page >= pages - 1, "»")}
+    </div>`;
+    }
+    /** Moves to a page, clamping to the known range; a new page starts at the top. */
+    #goPage(page, action) {
+        if (!this.#pagedMode())
+            return;
+        const total = this.#collection?.count.value;
+        const size = Math.max(1, this.#pageSize.peek());
+        const pages = total === undefined ? undefined : Math.max(1, Math.ceil(total / size));
+        const next = pages === undefined ? Math.max(0, page) : Math.min(Math.max(0, page), pages - 1);
+        if (action)
+            this.#pagingFocus = action;
+        if (next === this.#page.peek())
+            return;
+        this.#page.value = next;
+        const scroll = this.querySelector(".aster-grid-scroll");
+        if (scroll)
+            scroll.scrollTop = 0;
+        this.#top.value = 0;
+        const { row, col } = this.#active.peek();
+        if (row >= 0)
+            this.#active.value = { row: 0, col };
+    }
+    #pagingFocus;
+    /** Which chrome the grid shows. Default `{}`: the full toolbar, header, automatic filter row and paging bar. */
+    get chrome() {
+        return this.#chrome.value;
+    }
+    set chrome(v) {
+        this.#setChrome(v);
+    }
+    /** The toolbar's controls. Default `{}`: every control shown. Object-only; use `showToolbar` to hide the toolbar. */
+    get toolbar() {
+        return this.#toolbarOptions.value;
+    }
+    set toolbar(v) {
+        if (!v || typeof v !== "object" || Array.isArray(v))
+            throw new TypeError("toolbar must be an object; use showToolbar to hide the toolbar");
+        this.#toolbarOptions.value = { ...v };
+    }
+    /** Sugar for `chrome.header`. Default `true`; false hides the header visually but keeps it for assistive technology. */
+    get showHeader() {
+        return this.#chrome.value.header !== false;
+    }
+    set showHeader(v) {
+        this.#setChrome({ ...this.#chrome.peek(), header: v });
+    }
+    /** Sugar for `chrome.toolbar`. Default `true`. */
+    get showToolbar() {
+        return this.#chrome.value.toolbar !== false;
+    }
+    set showToolbar(v) {
+        this.#setChrome({ ...this.#chrome.peek(), toolbar: v });
+    }
+    /** Sugar for `chrome.filterRow`: false removes the row, true forces it open, "auto" (the default) follows the view. */
+    get showFilterRow() {
+        return this.#chrome.value.filterRow !== false;
+    }
+    set showFilterRow(v) {
+        this.#setChrome({ ...this.#chrome.peek(), filterRow: v });
+    }
+    /** Sugar for `chrome.headerMenu`. Default `true`. */
+    get showHeaderMenu() {
+        return this.#chrome.value.headerMenu !== false;
+    }
+    set showHeaderMenu(v) {
+        this.#setChrome({ ...this.#chrome.peek(), headerMenu: v });
+    }
+    /** Sugar for `chrome.pagingBar`. Default `true`. */
+    get showPagingBar() {
+        return this.#chrome.value.pagingBar !== false;
+    }
+    set showPagingBar(v) {
+        this.#setChrome({ ...this.#chrome.peek(), pagingBar: v });
+    }
+    #setChrome(v) {
+        if (!v || typeof v !== "object" || Array.isArray(v))
+            throw new TypeError("chrome must be an object");
+        if (v.filterRow !== undefined && v.filterRow !== "auto" && typeof v.filterRow !== "boolean")
+            throw new TypeError('chrome.filterRow must be true, false or "auto"');
+        this.#chrome.value = { ...v };
+        // The active cell cannot stay on a row that is no longer reachable.
+        const { row, col } = this.#active.peek();
+        const header = this.#chrome.value.header !== false;
+        const filters = this.#filtersShown();
+        if (row === HEADER && !header)
+            this.#active.value = { row: 0, col };
+        else if (row === FILTER_ROW && !filters)
+            this.#active.value = { row: header ? HEADER : 0, col };
+    }
     get collection() {
         return this.#external() ?? this.#collection;
     }
@@ -525,21 +1280,21 @@ export class Grid extends AsterElement {
     }
     /** Shared selection; without collection, its collection supplies the binding. */
     get selection() { return this.#selection.value; }
-    /** Allows this view to change selection; borrowed selection state remains visible. */
-    get selectable() { return this.#selectable.value; }
+    /**
+     * Allows this view to change selection; borrowed selection state remains
+     * visible. Sugar for `policy.selectable`, default on.
+     */
+    get selectable() { return this.#selectionAllowed(); }
     set selectable(value) {
-        const restore = !value && document.activeElement instanceof Element && this.contains(document.activeElement) && !!document.activeElement.closest(".aster-grid-selection");
-        this.#selectable.value = value;
-        if (restore) {
-            this.#selectionInside.value = undefined;
-            queueMicrotask(() => this.focus({ preventScroll: true }));
-        }
+        this.policy = { ...this.#policy.peek(), selectable: value };
     }
     set selection(v) {
-        if (v && (this.#treeOptions.peek() || groupFields(this.#view.peek()).length))
+        if (v && groupFields(this.#view.peek()).length)
             throw new Error("A shared selection grid supports flat rows");
         if (v && this.#binding.peek() && v.collection !== this.#binding.peek())
             throw new Error("collection and selection must refer to the same collection");
+        if (v && this.#treeOptions.peek() && v.collection.query.set !== this.set)
+            throw new Error("A tree grid's selection must be over the same entity set");
         this.#selection.value = v;
         this.#selectionNote.value = "";
         this.#selectionAnchor = undefined;
@@ -557,6 +1312,7 @@ export class Grid extends AsterElement {
         const collection = this.#collection;
         if (!this.isConnected || !collection || this.#tree || groupFields(this.#view.peek()).length || !Number.isSafeInteger(index) || index < 0 || !Number.isSafeInteger(column))
             return false;
+        this.#demand.value = true;
         const request = ++this.#focusRequest;
         const query = collection.query;
         this.#pendingFocus.value = index;
@@ -564,8 +1320,18 @@ export class Grid extends AsterElement {
             await collection.view(index, index + 1, [index, this.#active.peek().row]);
             if (!this.isConnected || request !== this.#focusRequest || this.#collection !== collection || collection.query !== query || collection.keys.peek()[index] === undefined)
                 return false;
-            const columns = this.#view.peek().columns.filter((c) => !c.hidden).length;
-            this.#activate(index, Math.max(0, Math.min(columns - 1, column)));
+            const paged = this.#pagedMode();
+            const size = Math.max(1, this.#pageSize.peek());
+            const page = paged ? Math.floor(index / size) : 0;
+            if (paged) {
+                if (page !== this.#page.peek())
+                    this.#page.value = page;
+                await collection.view(page * size, page * size + size, [index - page * size, 0]);
+                if (!this.isConnected || request !== this.#focusRequest || this.#collection !== collection || collection.query !== query || collection.keys.peek()[index] === undefined)
+                    return false;
+            }
+            const columns = this.#visibleColumns(this.#view.peek()).length;
+            this.#activate(paged ? index - page * size : index, Math.max(0, Math.min(columns - 1, column)));
             const scroll = this.querySelector(".aster-grid-scroll");
             if (scroll)
                 this.#top.value = scroll.scrollTop;
@@ -573,7 +1339,7 @@ export class Grid extends AsterElement {
             return true;
         }
         catch {
-            this.#selectionNote.value = "Could not load that row. Move to another row or retry.";
+            this.#selectionNote.value = this.#text("rowLoadFailed");
             return false;
         }
         finally {
@@ -586,6 +1352,132 @@ export class Grid extends AsterElement {
         const index = this.#collection?.keys.peek().indexOf(key) ?? -1;
         return index < 0 ? false : this.focusIndex(index, column);
     }
+    /**
+     * Scrolls a flat row into view without moving focus or the active cell.
+     * Loads its page if needed. False for grouped/tree grids or a bad position.
+     */
+    async scrollToRow(index, align = "start") {
+        return this.#scrollTo(index, undefined, align);
+    }
+    /**
+     * Scrolls a flat row and visible column into view without moving focus or
+     * the active cell. A frozen column needs no sideways scroll. False like
+     * [[method:Grid.scrollToRow]].
+     */
+    async scrollToCell(index, column, align = "start") {
+        if (!Number.isSafeInteger(column) || column < 0)
+            return false;
+        return this.#scrollTo(index, column, align);
+    }
+    async #scrollTo(index, column, align) {
+        if (align !== "start" && align !== "center" && align !== "end" && align !== "nearest")
+            return false;
+        const collection = this.#collection;
+        if (!this.isConnected || !collection || this.#tree || this.#groupedFields().length || !Number.isSafeInteger(index) || index < 0)
+            return false;
+        const request = ++this.#scrollRequest;
+        const query = collection.query;
+        try {
+            await collection.ensure(index, index + 1);
+            if (!this.isConnected || request !== this.#scrollRequest || this.#collection !== collection || collection.query !== query || collection.keys.peek()[index] === undefined)
+                return false;
+            let local = index;
+            if (this.#pagedMode()) {
+                const size = Math.max(1, this.#pageSize.peek());
+                const page = Math.floor(index / size);
+                if (page !== this.#page.peek())
+                    this.#page.value = page;
+                await collection.view(page * size, page * size + size);
+                if (!this.isConnected || request !== this.#scrollRequest || this.#collection !== collection || collection.query !== query || collection.keys.peek()[index] === undefined)
+                    return false;
+                local = index - page * size;
+            }
+            this.#scrollNow(local, column, align);
+            // A rendered row changes an estimate into a measurement; place it again once that lands.
+            await new Promise(requestAnimationFrame);
+            if (!this.isConnected || request !== this.#scrollRequest || this.#collection !== collection || collection.query !== query)
+                return false;
+            this.#scrollNow(local, column, align);
+            return true;
+        }
+        catch {
+            this.#selectionNote.value = this.#text("rowLoadFailed");
+            return false;
+        }
+    }
+    /** Writes the scroll positions for one row (and optional visible column). */
+    #scrollNow(row, column, align) {
+        const scroll = this.querySelector(".aster-grid-scroll");
+        if (!scroll)
+            return;
+        const layout = untracked(() => this.#layout());
+        this.#heights.setKeys(layout.keys);
+        const height = this.#heights.height(row);
+        const top = this.#heights.offset(row);
+        const inset = this.querySelector(".aster-grid-headgroup")?.offsetHeight ?? 0;
+        let target = scroll.scrollTop;
+        switch (align) {
+            case "start":
+                target = top - inset;
+                break;
+            case "center":
+                target = top - (scroll.clientHeight - height) / 2;
+                break;
+            case "end":
+                target = top - scroll.clientHeight + height;
+                break;
+            case "nearest":
+                if (top < scroll.scrollTop + inset)
+                    target = top - inset;
+                else if (top + height > scroll.scrollTop + scroll.clientHeight)
+                    target = top + height - scroll.clientHeight;
+                break;
+        }
+        scroll.scrollTop = Math.max(0, Math.min(scroll.scrollHeight - scroll.clientHeight, target));
+        if (column === undefined) {
+            this.#top.value = scroll.scrollTop;
+            return;
+        }
+        const view = this.#view.peek();
+        if (!view)
+            return;
+        const columns = this.#visibleColumns(view);
+        const col = Math.max(0, Math.min(columns.length - 1, column));
+        if (col < this.#frozenCount(view, columns)) {
+            this.#top.value = scroll.scrollTop;
+            return;
+        }
+        const header = this.querySelector(`#${CSS.escape(`${this.#id}-h-${col}`)}`);
+        if (!header) {
+            this.#top.value = scroll.scrollTop;
+            return;
+        }
+        const box = scroll.getBoundingClientRect();
+        const rect = header.getBoundingClientRect();
+        const left = rect.left - box.left + scroll.scrollLeft;
+        let sideways = scroll.scrollLeft;
+        switch (align) {
+            case "start":
+                sideways = left;
+                break;
+            case "center":
+                sideways = left - (box.width - rect.width) / 2;
+                break;
+            case "end":
+                sideways = left - box.width + rect.width;
+                break;
+            case "nearest": {
+                const at = left - scroll.scrollLeft;
+                if (at < 0)
+                    sideways = left;
+                else if (at + rect.width > box.width)
+                    sideways = left + rect.width - box.width;
+                break;
+            }
+        }
+        scroll.scrollLeft = Math.max(0, Math.min(scroll.scrollWidth - scroll.clientWidth, sideways));
+        this.#top.value = scroll.scrollTop;
+    }
     connectedCallback() {
         super.connectedCallback();
         // One observer for the scroll box and the rows. A new width can change
@@ -650,6 +1542,9 @@ export class Grid extends AsterElement {
         this.onDisconnect(effect(() => this.#toTop()));
         this.onDisconnect(effect(() => this.#keep()));
         this.onDisconnect(effect(() => this.#announce()));
+        this.onDisconnect(effect(() => this.#driftAnnounce()));
+        this.onDisconnect(effect(() => this.#viewChanged()));
+        this.onDisconnect(effect(() => this.#selectionChanged()));
         this.listen(document, "pointerdown", (e) => {
             if (this.#panel.peek() && !e.target.closest(".aster-grid-panel, .aster-grid-tool"))
                 this.#panel.value = undefined;
@@ -659,6 +1554,13 @@ export class Grid extends AsterElement {
             if (e.target === document.body)
                 this.#panelKey(e);
         });
+        // autoFetch false waits for refresh() or the person's first demand.
+        const demand = () => {
+            this.#demand.value = true;
+        };
+        this.listen(this, "pointerdown", demand);
+        this.listen(this, "keydown", demand);
+        this.listen(this, "scroll", demand, { capture: true });
     }
     focus(options) {
         this.querySelector(".aster-grid-scroll")?.focus(options);
@@ -672,11 +1574,12 @@ export class Grid extends AsterElement {
         if (!ctx || !collection || !view)
             return nothing;
         const type = collection.type;
-        const columns = view.columns.filter((c) => !c.hidden);
+        const columns = this.#visibleColumns(view);
         const lookups = this.#lookups.value;
         const fields = columns.map((c) => type.field(c.field));
         const numeric = columns.map((c, i) => isNumeric(fields[i]) && !lookups[c.field]);
-        const titles = columns.map((c, i) => fields[i]?.title ?? c.field);
+        const presentation = this.#presentation.value;
+        const titles = columns.map((c) => this.#title(c.field));
         const layout = this.#layout();
         const count = layout.keys.length === 0 && layout.total === undefined ? undefined : layout.keys.length;
         this.#heights.setKeys(layout.keys);
@@ -687,29 +1590,46 @@ export class Grid extends AsterElement {
         const selection = this.#selection.value;
         const selectedKeys = selection?.keys.value ?? [];
         const selected = this.#selected.value;
-        const frozenLeft = this.#frozenOffsets(columns, view.frozen);
+        const selectColumn = this.#selectionColumnOn();
+        const selectionAppearance = this.#selectionAppearance();
+        const totalColumns = columns.length + (selectColumn ? 1 : 0);
+        const frozen = this.#frozenCount(view, columns);
+        const frozenLeft = this.#frozenOffsets(columns, frozen, selectColumn ? SELECT_WIDTH : 0);
         const style = styleMap({
-            "--grid-columns": columns.map((c, i) => track(c, lookups[c.field] ? undefined : fields[i])).join(" "),
+            "--grid-columns": [selectColumn ? `${SELECT_WIDTH}px` : undefined, ...columns.map((c, i) => track(c, lookups[c.field] ? undefined : fields[i]))].filter(Boolean).join(" "),
             ...Object.fromEntries(frozenLeft.map((left, i) => [`--frozen-${i}`, `${left}px`])),
         });
         const rows = [];
         for (let i = start; i < end; i++)
             rows.push(i);
         const cellId = (row, col) => `${this.#id}-${row}-${col}`;
-        const filters = this.#showFilters.value || Object.keys(view.filters).length > 0;
-        const activeId = active.row === HEADER ? `${this.#id}-h-${active.col}`
-            : active.row === FILTER_ROW ? `${this.#id}-f-${active.col}`
+        const filters = this.#filtersShown();
+        const chrome = this.#chrome.value;
+        const toolbarOptions = this.#toolbarOptions.value;
+        const headerShown = chrome.header !== false;
+        const toolbarShown = chrome.toolbar !== false;
+        // A hidden header or filter row stays in the DOM but must not own the active cell.
+        const activeCell = active.row === HEADER && !headerShown ? { row: 0, col: active.col }
+            : active.row === FILTER_ROW && !filters ? { row: headerShown ? HEADER : 0, col: active.col }
+                : active;
+        const activeId = activeCell.row === HEADER ? `${this.#id}-h-${activeCell.col}`
+            : activeCell.row === FILTER_ROW ? `${this.#id}-f-${activeCell.col}`
                 : !count ? undefined
-                    : cellId(active.row, active.row < count && layout.at(active.row).kind === "group" ? 0 : active.col);
-        const frozenStyle = (i) => (i < view.frozen ? `left:var(--frozen-${i})` : nothing);
-        return html `${this.#toolbar(view, layout)}
-      <div class="aster-grid-scroll" role=${groupFields(view).length || this.#tree ? "treegrid" : "grid"} tabindex="0" aria-label=${this.#label.value}
-        ?data-fixed-columns=${columns.length > 0 && columns.every((c) => c.width !== undefined)}
-        aria-rowcount=${layout.atLeast !== undefined || layout.estimate ? -1 : (count ?? 0) + (filters ? 2 : 1)} aria-colcount=${columns.length + (this.#rowControls.value ? 1 : 0)}
-        aria-describedby=${layout.atLeast !== undefined || layout.estimate ? `${this.#id}-total` : nothing}
-        aria-multiselectable=${this.#selectable.value && selection?.multiple ? "true" : nothing}
-        aria-activedescendant=${activeId && (active.row < 0 || (active.row >= start && active.row < end)) ? activeId : nothing} aria-busy=${this.#grouping ? this.#grouping.root.status.value === "loading" ? "true" : "false" : collection.status.value === "loading" || count === undefined && collection.status.value !== "error" ? "true" : "false"}
-        ?data-draggable=${!!this.#treeOptions.value?.draggable && this.#editable.value}
+                    : cellId(activeCell.row, activeCell.row < count && layout.at(activeCell.row).kind === "group" ? 0 : activeCell.col);
+        const countId = `${this.#id}-total`;
+        const countAnnounced = !toolbarShown || toolbarOptions.count !== false;
+        const describedBy = countAnnounced && (layout.atLeast !== undefined || layout.estimate || !toolbarShown) ? countId : nothing;
+        const frozenStyle = (i) => (i < frozen ? `left:var(--frozen-${i})` : nothing);
+        return html `<div class="aster-grid-chrome">${toolbarShown ? this.#toolbar(view, layout) : html `<span class="aster-grid-total aster-sr-only" id=${countId} aria-live="polite">${this.#countText(layout)}</span>`}${this.#driftView()}${this.#failureView()}${this.#pagingBar(layout)}</div>
+      <div class="aster-grid-scroll" role=${this.#groupedFields(view).length || this.#tree ? "treegrid" : "grid"} tabindex="0" aria-label=${this.#label.value}
+        ?data-fixed-columns=${columns.length > 0 && columns.every((c) => c.width !== undefined)} ?data-head-hidden=${!headerShown}
+        data-selection-appearance=${selectionAppearance}
+        aria-rowcount=${layout.atLeast !== undefined || layout.estimate ? -1
+            : (layout.first !== undefined && layout.total !== undefined ? layout.total : count ?? 0) + (filters ? 2 : 1)} aria-colcount=${totalColumns + (this.#rowControls.value ? 1 : 0)}
+        aria-describedby=${describedBy}
+        aria-multiselectable=${this.#selectionAllowed() && selection?.multiple ? "true" : nothing}
+        aria-activedescendant=${activeId && (activeCell.row < 0 || (activeCell.row >= start && activeCell.row < end)) ? activeId : nothing} aria-busy=${this.#busy(count) ? "true" : "false"}
+        ?data-draggable=${!!this.#treeOptions.value?.draggable && this.#editEnabled()}
         @scroll=${(e) => this.#scrolled(e.currentTarget)}
         @keydown=${(e) => this.#key(e, columns.length)}
         @click=${(e) => this.#click(e)}
@@ -720,22 +1640,24 @@ export class Grid extends AsterElement {
         @pointerdown=${(e) => this.#dragRow(e)}>
         <div class="aster-grid-table" style=${style}>
           <div class="aster-grid-headgroup">
-            ${this.#treeOptions.value?.draggable && this.#editable.value ? html `<div class="aster-grid-root-drop">Top level</div>` : nothing}
+            ${this.#treeOptions.value?.draggable && this.#editEnabled() ? html `<div class="aster-grid-root-drop">Top level</div>` : nothing}
             <div class="aster-grid-row aster-grid-head" role="row" aria-rowindex="1">
-              ${columns.map((c, i) => this.#header(c, fields[i], i, view, numeric[i], frozenStyle(i), active.row === HEADER && active.col === i))}
+              ${selectColumn ? this.#selectionHead(selection, selectedKeys) : nothing}
+              ${columns.map((c, i) => this.#header(c, fields[i], i, view, numeric[i], frozen, frozenStyle(i), activeCell.row === HEADER && activeCell.col === i, selectColumn ? 2 : 1))}
             </div>
             ${filters
             ? html `<div class="aster-grid-row aster-grid-filters" role="row" aria-rowindex="2" @keydown=${(e) => this.#filterKey(e)}>
-                  ${columns.map((c, i) => html `<div class="aster-grid-cell aster-grid-filter" role="gridcell" aria-colindex=${i + 1}
-                    id=${`${this.#id}-f-${i}`} ?data-active=${active.row === FILTER_ROW && active.col === i}
-                    ?data-frozen=${i < view.frozen} style=${frozenStyle(i)}>${this.#filter(c, fields[i], view)}</div>`)}
+                  ${selectColumn ? html `<div class="aster-grid-cell aster-grid-select" role="gridcell" aria-colindex="1" data-col="-1"></div>` : nothing}
+                  ${columns.map((c, i) => html `<div class="aster-grid-cell aster-grid-filter" role="gridcell" aria-colindex=${i + (selectColumn ? 2 : 1)}
+                    data-col=${i} id=${`${this.#id}-f-${i}`} ?data-active=${activeCell.row === FILTER_ROW && activeCell.col === i}
+                    ?data-frozen=${i < frozen} style=${frozenStyle(i)}>${this.#filter(c, fields[i], view)}</div>`)}
                 </div>`
             : nothing}
           </div>
           <div class="aster-grid-spacer" style=${`height:${top}px`}></div>
           ${each(rows.map((i) => ({ i, item: layout.at(i) })), ({ i, item }) => (item.kind === "group" ? item.id : (item.key ?? `?${i}`)), ({ i, item }) => {
             if (item.kind === "group")
-                return this.#groupRow(item, i, i + (filters ? 3 : 2), columns.length, view, active.row === i);
+                return this.#groupRow(item, i, i + (filters ? 3 : 2), totalColumns, view, activeCell.row === i);
             const key = item.key;
             const stored = key === undefined ? undefined : ctx.store.record(collection.query.set, key).value;
             const entity = stored?.entity;
@@ -744,41 +1666,66 @@ export class Grid extends AsterElement {
             const conflict = edit?.conflict.value;
             const formError = edit?.formError.value;
             // A read-only reason shows once for the row, not under every cell it covers.
+            // Page-rule and schema reasons come first; a policy refusal adds its own.
+            // Cell mode shows only the pressed cell's reasons.
+            const rowMode = this.editMode === "row";
+            const edited = columns.filter((c) => rowMode || c.field === editing?.field);
             const reasons = edit
-                ? [...new Set(columns.flatMap((c) => {
-                        const st = fields.some((f) => f?.name === c.field) ? edit.state(c.field).value : undefined;
-                        return st?.readOnly && st.reasons.readOnly && !fields.find((f) => f?.name === c.field)?.computed ? [st.reasons.readOnly] : [];
-                    }))]
+                ? [...new Set([
+                        ...edited.flatMap((c) => {
+                            const st = fields.some((f) => f?.name === c.field) ? edit.state(c.field).value : undefined;
+                            return st?.readOnly && st.reasons.readOnly && !fields.find((f) => f?.name === c.field)?.computed ? [st.reasons.readOnly] : [];
+                        }),
+                        // Page rules and schema reasons win: a field already read-only keeps its own reason.
+                        ...edited.flatMap((c) => {
+                            if (this.#fieldEditable(c.field) || !this.#collection?.type.field(c.field) || edit.state(c.field).value.readOnly)
+                                return [];
+                            return [`Editing ${this.#title(c.field)} isn’t allowed on this page.`];
+                        }),
+                    ])]
                 : [];
             const shared = new Map(reasons.map((r, n) => [r, `${this.#id}-reason-${n}`]));
-            return html `<div class="aster-grid-row" role="row" aria-rowindex=${i + (filters ? 3 : 2)} data-index=${i}
+            const rowSelected = key !== undefined && (selection ? selectedKeys.includes(key) : key === selected);
+            const selectedColumn = Math.max(0, Math.min(columns.length - 1, active.col));
+            const rowStyle = entity && key !== undefined ? styleRow(presentation, { entity, key, index: i }) : undefined;
+            return html `<div class=${["aster-grid-row", ...(rowStyle?.classes ?? [])].join(" ")} role="row" aria-rowindex=${i + (filters ? 3 : 2) + (layout.first ?? 0)} data-index=${i}
+                data-tone=${rowStyle?.tone ?? nothing}
                 aria-level=${item.node?.level ?? item.level ?? nothing}
                 aria-posinset=${item.node?.position ?? item.position ?? nothing} aria-setsize=${item.node?.siblings ?? item.siblings ?? nothing}
                 style=${item.node || item.level ? `--level:${(item.node?.level ?? item.level ?? 1) - 1}` : nothing}
                 aria-expanded=${item.node && item.node.folder !== false && item.key !== undefined ? (item.node.open ? "true" : "false") : nothing}
-                data-key=${key ?? nothing} aria-selected=${this.#external() && !selection ? nothing : key !== undefined && (selection ? selectedKeys.includes(key) : key === selected) ? "true" : "false"}
+                data-key=${key ?? nothing} aria-selected=${this.#external() && !selection ? nothing : rowSelected ? "true" : "false"}
                 ?data-grouped-row=${item.level !== undefined}
-                ?data-active-row=${active.row === i} ?data-expanded=${key !== undefined && this.#open.value.includes(key)}
+                ?data-active-row=${activeCell.row === i} ?data-expanded=${key !== undefined && this.#open.value.includes(key)}
                 ?data-placeholder=${!entity} ?data-editing=${edit !== undefined} ?data-lifted=${key !== undefined && key === this.#lifted.value}
                 @keydown=${edit ? (e) => this.#editKey(e) : nothing}
                 @mousedown=${edit ? (e) => this.#focusPressed(e) : nothing}
                 @focusout=${edit ? (e) => this.#editBlur(e) : nothing}>
+                ${selectColumn ? this.#selectionCell(key, i, selection, selectedKeys, entity, stored?.hidden) : nothing}
                 ${columns.map((c, col) => {
+                const columnPresentation = presentation.columns?.[c.field];
+                const value = entity?.[c.field];
+                const mapped = mappedValue(columnPresentation, value);
+                const cellStyle = entity && key !== undefined
+                    ? styleCell(presentation, columnPresentation, { entity, key, index: i, field: c.field, value }, mapped)
+                    : undefined;
                 const content = !entity ? html `<span class="aster-grid-skeleton"></span>`
-                    : edit && !fields[col]?.computed
+                    : edit && this.#fieldEditable(c.field) && !fields[col]?.computed && (rowMode || c.field === editing.field)
                         ? controlFor(edit, c.field, { options: lookups[c.field] ? this.#optionsFor(c.field, lookups[c.field]) : undefined, labelled: false, sharedReasons: shared })
-                        : stored?.hidden?.has(c.field) ? hiddenValue : this.#cell(c, fields[col], entity, key, ctx);
-                return html `<div class="aster-grid-cell" role="gridcell" id=${cellId(i, col)}
-                    aria-colindex=${col + 1} ?data-active=${active.row === i && active.col === col}
-                    ?data-numeric=${numeric[col]} ?data-frozen=${col < view.frozen} style=${`grid-column:${col + 1};${col < view.frozen ? `left:var(--frozen-${col})` : ""}`} data-label=${titles[col]}>
+                        : stored?.hidden?.has(c.field) ? this.#hiddenValue() : this.#cell(c, fields[col], entity, key, ctx, mapped);
+                return html `<div class=${["aster-grid-cell", ...(cellStyle?.classes ?? [])].join(" ")} role="gridcell" id=${cellId(i, col)} data-col=${col}
+                    aria-colindex=${col + (selectColumn ? 2 : 1)} ?data-active=${activeCell.row === i && activeCell.col === col}
+                    ?data-selected-cell=${selectionAppearance === "cell" && rowSelected && col === selectedColumn}
+                    data-tone=${cellStyle?.tone ?? nothing} data-align=${columnPresentation?.align ?? nothing}
+                    ?data-numeric=${numeric[col]} ?data-frozen=${col < frozen} style=${`grid-column:${col + (selectColumn ? 2 : 1)};${col < frozen ? `left:var(--frozen-${col})` : ""}`} data-label=${titles[col]}>
                     ${col === 0 && item.node ? this.#treeLead(item.node) : nothing}
-                    ${col === 0 && key !== undefined && selection && this.#selectable.value ? html `<div class="aster-grid-selection-value">
+                    ${col === 0 && key !== undefined && selection && !selectColumn && this.#selectionAllowed() ? html `<div class="aster-grid-selection-value">
                       ${this.#selectionControl(key, entity, selectedKeys, stored?.hidden)}<div class="aster-grid-selection-content">${content}</div>
                     </div>` : content}
                   </div>`;
             })}
-                ${key !== undefined && entity ? this.#controls(key, entity, this.#open.value.includes(key), active.row === i, columns.length) : nothing}
-                ${key !== undefined && this.#open.value.includes(key) ? this.#expansionCell(key, columns.length) : nothing}
+                ${key !== undefined && entity ? this.#controls(key, entity, this.#open.value.includes(key), activeCell.row === i, totalColumns) : nothing}
+                ${key !== undefined && this.#open.value.includes(key) ? this.#expansionCell(key, totalColumns) : nothing}
                 ${conflict
                 ? html `<p class="aster-grid-row-note" role="alert">Someone else changed ${conflict.fields.map((f) => type.field(f)?.title ?? f).join(", ")} while you were editing.
                       <button type="button" @pointerdown=${keepFocus} @click=${() => edit.rebase()}>Keep mine</button>
@@ -791,7 +1738,7 @@ export class Grid extends AsterElement {
         })}
           <div class="aster-grid-spacer" style=${`height:${bottom}px`}></div>
         </div>
-        ${count === 0 ? html `<div class="aster-grid-empty">${this.#empty.value}</div>` : nothing}
+        ${this.#contentState(layout, count)}
       </div>
       ${this.#summaryView()}
       <aster-menu class="aster-grid-menu"></aster-menu>
@@ -856,12 +1803,21 @@ export class Grid extends AsterElement {
             else
                 this.focus({ preventScroll: true });
         }
+        const paging = this.#pagingFocus;
+        if (paging) {
+            this.#pagingFocus = undefined;
+            const bar = this.querySelector(".aster-grid-paging");
+            if (bar && !bar.contains(document.activeElement)) {
+                const target = bar.querySelector(`[data-page-action="${paging}"]:not(:disabled)`) ?? bar.querySelector("button:not(:disabled)");
+                target?.focus({ preventScroll: true });
+            }
+        }
         if (focusBefore && !focusBefore.isConnected && document.activeElement === document.body)
             this.focus({ preventScroll: true });
     }
     // ── toolbar and panels ──
     #filterContext() {
-        return JSON.stringify([this.set, this.#view.value, this.#base.value, this.#external()?.query]);
+        return JSON.stringify([this.set, this.#view.value, this.#base.value, this.#external()?.query, this.#capabilitiesVersion.value]);
     }
     #filterStale() {
         return this.#filterOwner !== this.#ctx.value || this.#filterSnapshot !== this.#filterContext();
@@ -895,6 +1851,7 @@ export class Grid extends AsterElement {
       <p class="aster-hint">This expression combines with column filters and the page’s query constraints.</p>
       ${this.#filterNote.value ? html `<p class="aster-error" role="status">${this.#filterNote.value}</p>` : nothing}
       <aster-filter-builder .model=${model} .readOnlyReason=${reason}
+        .operators=${(field) => (field ? this.#operators(field.name) : [])}
         @apply=${(e) => { e.preventDefault(); void this.#applyAdvanced(model); }}
         @cancel=${() => this.querySelector(".aster-grid-advanced")?.close()}></aster-filter-builder>
       ${stale ? html `<button type="button" class="aster-button" @click=${() => this.#openAdvanced(this.#filterOpener)}>Reload current expression</button>` : nothing}
@@ -913,107 +1870,222 @@ export class Grid extends AsterElement {
             this.#filterNote.value = "The current row could not be saved. Your filter draft is still available.";
             return;
         }
-        if (this.#filterStale() || !model.apply())
+        if (this.#filterStale())
+            return;
+        const refusedOperator = this.#draftOperatorRefusal(model);
+        if (refusedOperator) {
+            this.#filterNote.value = `${refusedOperator} Change that condition to apply the filter.`;
+            return;
+        }
+        if (!model.apply())
             return;
         const view = this.#view.peek();
         if (!view)
             return;
         const { criteria: _, ...rest } = view;
         const criteria = model.applied.peek();
+        const refused = criteria ? [...new Set(criteriaFields(criteria))].map((field) => [field, this.#filterRefusal(field)]).find(([, reason]) => reason !== undefined) : undefined;
+        if (refused) {
+            this.#filterNote.value = `${refused[1]} Remove that condition to apply the filter.`;
+            return;
+        }
         this.#setView({ ...rest, ...(criteria ? { criteria } : {}) });
         this.querySelector(".aster-grid-advanced")?.close();
-        announce(criteria ? "Advanced filter applied" : "Advanced filter cleared");
+        announce(criteria ? this.#text("advancedApplied") : this.#text("advancedCleared"));
     }
     #query(set, view, base, paths = {}) {
         const checked = this.#criteriaCheck.value;
-        return viewQuery(set, checked?.valid === false ? { ...view, criteria: { op: "or", args: [] } } : view, base, paths);
+        return viewQuery(set, checked?.valid === false ? { ...view, criteria: { op: "or", args: [] } } : view, base, paths, this.#capabilities());
+    }
+    /**
+     * A saved sort, filter or expression the page now refuses stays in the
+     * view but not in the query. The note says which field and why; it lives
+     * outside the toolbar so hiding the toolbar cannot silence it.
+     */
+    #driftView() {
+        const entries = this.#drift.value;
+        if (!entries.length)
+            return nothing;
+        const key = this.#driftKey(entries);
+        if (this.#driftDismissed.value === key)
+            return nothing;
+        // No live-region role: #driftAnnounce announces it once per set of entries.
+        return html `<div class="aster-grid-drift">
+      <span>${this.#driftText(entries)}</span>
+      <button type="button" class="aster-grid-tool" @click=${() => {
+            this.#driftDismissed.value = key;
+            this.querySelector(".aster-grid-scroll")?.focus();
+        }}>${this.#text("dismiss")}</button>
+    </div>`;
+    }
+    #countText(layout) {
+        const count = layout.total;
+        const fmt = (n) => new Intl.NumberFormat("en-GB").format(n);
+        if (count === undefined)
+            return this.#deferred() ? this.#text("notLoaded") : this.#text("loading");
+        if (layout.estimate)
+            return this.#text("aboutRows", { count: fmt(roughly(count)) });
+        if (layout.atLeast !== undefined)
+            return this.#text("atLeastRows", { count: fmt(layout.atLeast) });
+        const rows = count === 1 ? this.#text("row") : this.#text("rows", { count: fmt(count) });
+        if (layout.groups === undefined)
+            return rows;
+        const groups = layout.groups === 1 ? this.#text("group") : this.#text("groups", { count: fmt(layout.groups) });
+        return this.#text("groupedRows", { rows, groups });
     }
     #toolbar(view, layout) {
         const panel = this.#panel.value;
+        const options = this.#toolbarOptions.value;
         const filters = Object.keys(view.filters).length;
-        const count = layout.total;
-        const fmt = (n) => new Intl.NumberFormat("en-GB").format(n);
-        const grouped = this.#treeOptions.value ? [] : groupFields(view);
-        const groupTitle = (field) => this.#collection?.type.field(field)?.title ?? field;
-        const chooseSort = (field, descending) => {
-            this.querySelector(".aster-grid-menu")?.close();
-            this.#setView(sortDirection(view, field, descending, false));
-        };
+        const storedGroups = groupFields(view);
+        const grouped = this.#groupedFields(view);
+        const refusedGroups = storedGroups.filter((field) => !grouped.includes(field));
+        const groupTitle = (field) => this.#title(field);
+        const visible = this.#visibleColumns(view);
+        const filterRefusal = visible.map((column) => this.#filterRefusal(column.field)).find((reason) => reason !== undefined);
+        const anyFilterable = visible.some((column) => this.#filterRefusal(column.field) === undefined);
         const tool = (name, label) => html `<button type="button" class="aster-grid-tool"
       style=${anchorStyle(`${this.#id}-tool-${name}`)}
       aria-expanded=${panel === name ? "true" : "false"} aria-controls=${`${this.#id}-${name}`}
       @click=${() => (this.#panel.value = panel === name ? undefined : name)}>${label}</button>`;
-        return html `<div class="aster-grid-toolbar" role="toolbar" aria-label=${`${this.#label.value} view`}
+        return html `<div class="aster-grid-toolbar" role="toolbar" aria-label=${this.#text("toolbarLabel", { label: this.#label.value })}
       @keydown=${(e) => this.#panelKey(e)}>
-      <span class="aster-grid-total" id=${`${this.#id}-total`} aria-live="polite">${count === undefined
-            ? "Loading…"
-            : layout.estimate
-                ? `About ${fmt(roughly(count))} rows`
-                : layout.atLeast !== undefined
-                    ? `${fmt(layout.atLeast)}+ rows`
-                    : `${fmt(count)} ${count === 1 ? "row" : "rows"}${layout.groups === undefined ? "" : ` in ${fmt(layout.groups)} ${layout.groups === 1 ? "group" : "groups"}`}`}</span>
-      <button type="button" class="aster-grid-tool" aria-haspopup="menu" @click=${(event) => {
-            const items = view.columns.filter(column => !column.hidden && this.#sortable(column.field)).map(column => {
-                const sorted = view.sort.find(key => key.field === column.field);
-                return { kind: "group", label: groupTitle(column.field), items: [
-                        { kind: "radio", label: "Ascending", checked: !!sorted && !sorted.descending, run: () => chooseSort(column.field, false) },
-                        { kind: "radio", label: "Descending", checked: !!sorted?.descending, run: () => chooseSort(column.field, true) },
-                    ] };
-            });
-            items.push({ label: "Clear sorting", run: () => this.#setView({ ...view, sort: [] }) });
-            this.querySelector(".aster-grid-menu")?.openFrom(event.currentTarget, items, "Sort rows");
-        }}>Sort</button>
+      ${options.count === false ? nothing : html `<span class="aster-grid-total" id=${`${this.#id}-total`} aria-live="polite">${this.#countText(layout)}</span>`}
+      ${options.expandAll === false || !this.#tree ? nothing : html `<button type="button" class="aster-grid-tool" @click=${() => void this.#expandAll()}>${this.#text("expandAll")}</button>
+        <button type="button" class="aster-grid-tool" @click=${() => this.#collapseAll()}>${this.#text("collapseAll")}</button>`}
+      ${options.sort === false ? nothing : tool("sort", this.#text("sort"))}
       ${this.#selectionNote.value ? html `<span class="aster-grid-note" role="status">${this.#selectionNote.value}</span>` : nothing}
-      ${this.#grouping?.root.error.value !== undefined ? html `<span class="aster-grid-note aster-error" role="status">Couldn’t load groups.</span>
-        <button type="button" class="aster-grid-tool" @click=${() => { this.focus({ preventScroll: true }); void this.#grouping?.retry(); }}>Retry groups</button>` : nothing}
+      ${this.#grouping?.root.error.value !== undefined ? html `<span class="aster-grid-note aster-error" role="status">${this.#text("groupsFailed")}</span>
+        <button type="button" class="aster-grid-tool" @click=${() => { this.focus({ preventScroll: true }); void this.#grouping?.retry(); }}>${this.#text("retryGroups")}</button>` : nothing}
       ${this.#refused.value ? html `<span class="aster-grid-note aster-grid-refused">${this.#refused.value}</span>` : nothing}
       ${this.#tree?.searching.value
-            ? html `<span class="aster-grid-note" role="status">Finding where the matches are…</span>`
+            ? html `<span class="aster-grid-note" role="status">${this.#text("treeSearching")}</span>`
             : this.#tree?.tooBroad.value
-                ? html `<span class="aster-grid-note" role="status">Too many matches to show where they are. Narrow the filter.</span>`
+                ? html `<span class="aster-grid-note" role="status">${this.#text("treeTooBroad")}</span>`
                 : this.#tree?.error.value !== undefined
-                    ? html `<span class="aster-grid-note aster-error" role="status">Couldn’t find where the matches are. Change the filter to try again.</span>`
+                    ? html `<span class="aster-grid-note aster-error" role="status">${this.#text("treeSearchFailed")}</span>`
                     : nothing}
       ${grouped.map((field, i) => html `<span class="aster-grid-group-tools" data-group-field=${field}>
-        <button type="button" class="aster-grid-tool" data-group-action="remove" aria-pressed="true" title=${grouped.length === 1 ? "Stop grouping" : `Remove grouping ${groupTitle(field)}`}
-          @click=${() => this.#setView(setGroup(view, grouped.filter((f) => f !== field)))}>${i ? "Then by" : "Grouped by"} ${groupTitle(field)} ✕</button>
-        ${grouped.length > 1 ? html `<button type="button" class="aster-grid-tool" data-group-action="earlier" aria-label=${`Move ${groupTitle(field)} grouping earlier`} ?disabled=${i === 0}
-          @click=${() => this.#reorderGroup(i, -1)}>↑</button>
-          <button type="button" class="aster-grid-tool" data-group-action="later" aria-label=${`Move ${groupTitle(field)} grouping later`} ?disabled=${i === grouped.length - 1}
-          @click=${() => this.#reorderGroup(i, 1)}>↓</button>` : nothing}
+        <button type="button" class="aster-grid-tool" data-group-action="remove" aria-pressed="true" title=${grouped.length === 1 ? this.#text("stopGrouping") : this.#text("removeGrouping", { field: groupTitle(field) })}
+          @click=${() => this.#setView(setGroup(view, storedGroups.filter((f) => f !== field)))}>${i ? this.#text("thenBy", { field: groupTitle(field) }) : this.#text("groupedBy", { field: groupTitle(field) })} ✕</button>
+        ${grouped.length > 1 ? html `<button type="button" class="aster-grid-tool" data-group-action="earlier" aria-label=${this.#text("moveGroupingEarlier", { field: groupTitle(field) })} ?disabled=${i === 0}
+          @click=${() => this.#reorderGroup(field, -1)}>↑</button>
+          <button type="button" class="aster-grid-tool" data-group-action="later" aria-label=${this.#text("moveGroupingLater", { field: groupTitle(field) })} ?disabled=${i === grouped.length - 1}
+          @click=${() => this.#reorderGroup(field, 1)}>↓</button>` : nothing}
+      </span>`)}
+      ${refusedGroups.map((field) => html `<span class="aster-grid-group-tools" data-group-field=${field} data-refused>
+        <button type="button" class="aster-grid-tool" data-group-action="remove" title=${this.#text("removeRefusedGrouping", { reason: this.#groupRefusal(field) ?? this.#text("groupingRefused") })}
+          @click=${() => this.#setView(setGroup(view, storedGroups.filter((f) => f !== field)))}>${this.#text("groupedBy", { field: groupTitle(field) })} ✕</button>
       </span>`)}
-      <button type="button" class="aster-grid-tool" aria-pressed=${this.#showFilters.value || filters > 0 ? "true" : "false"}
-        @click=${() => this.#toggleFilters(view)}>${filters ? `Filters (${filters})` : "Filters"}</button>
-      <button type="button" class="aster-grid-tool" aria-haspopup="dialog" aria-pressed=${view.criteria ? "true" : "false"}
-        @click=${(e) => this.#openAdvanced(e.currentTarget)}>Advanced filter</button>
+      ${options.filters === false || this.#chrome.value.filterRow === false ? nothing : html `<button type="button" class="aster-grid-tool" aria-pressed=${this.#filtersShown() ? "true" : "false"}
+        ?disabled=${!anyFilterable && filters === 0} title=${!anyFilterable && filters === 0 ? (filterRefusal ?? this.#text("filterRefused")) : nothing}
+        @click=${() => this.#toggleFilters(view)}>${filters ? this.#text("filtersActive", { count: filters }) : this.#text("filters")}</button>`}
+      ${options.advanced === false ? nothing : html `<button type="button" class="aster-grid-tool" aria-haspopup="dialog" aria-pressed=${view.criteria ? "true" : "false"}
+        ?disabled=${!anyFilterable} title=${!anyFilterable ? (filterRefusal ?? this.#text("filterRefused")) : nothing}
+        @click=${(e) => this.#openAdvanced(e.currentTarget)}>${this.#text("advancedFilter")}</button>`}
+      ${!anyFilterable ? html `<span class="aster-sr-only">${filterRefusal ?? this.#text("filterRefused")}</span>` : nothing}
       ${view.criteria ? html `<span class="aster-grid-expression" role="status">${this.#criteriaCheck.value?.valid === false
-            ? "Saved filter needs repair. No matches will be returned."
+            ? this.#text("criteriaNeedsRepair")
             : describeCriteria(view.criteria, this.#collection.type)}</span>` : nothing}
-      ${tool("columns", "Columns")}
-      ${this.#persist.value ? tool("views", "Views") : nothing}
-      ${panel === "columns" ? this.#columnsPanel(view) : panel === "views" ? this.#viewsPanel(view) : nothing}
+      ${options.columns === false ? nothing : tool("columns", this.#text("columns"))}
+      ${options.views === false || !this.#persist.value ? nothing : tool("views", this.#text("views"))}
+      ${options.extra ?? nothing}
+      ${panel === "sort" ? this.#sortPanel(view) : panel === "columns" ? this.#columnsPanel(view) : panel === "views" ? this.#viewsPanel(view) : nothing}
+    </div>`;
+    }
+    #sortPanel(view) {
+        const fieldTitle = (field) => this.#title(field);
+        const offered = this.#visibleColumns(view)
+            .filter((column) => this.#sortable(column.field))
+            .map((column) => ({ field: column.field, offered: true, refusal: undefined }));
+        const shown = new Set(offered.map((row) => row.field));
+        // A sort on a hidden or now-refused column still shows, with its reason:
+        // the panel never says nothing is sorted, and the stored key stays clearable.
+        const rows = [...offered];
+        for (const key of view.sort) {
+            if (shown.has(key.field))
+                continue;
+            shown.add(key.field);
+            rows.push({ field: key.field, offered: false, refusal: this.#sortRefusal(key.field) });
+        }
+        const active = view.sort.filter((key) => this.#sortable(key.field));
+        const priority = new Map(active.map((key, i) => [key.field, i + 1]));
+        const toggle = (field) => {
+            const key = view.sort.find((sortKey) => sortKey.field === field);
+            const sorted = key !== undefined;
+            const descending = key?.descending === true;
+            const name = fieldTitle(field);
+            const action = sorted
+                ? this.#text("sortActionNow", { field: name, direction: descending ? this.#text("directionDescending") : this.#text("directionAscending") })
+                : this.#text("sortAction", { field: name });
+            return html `<button type="button" class="aster-grid-sort-direction" aria-label=${action} aria-pressed=${sorted ? "true" : "false"}
+        title=${`${action}. ${sorted ? this.#text("sortReverse") : this.#text("sortAscending")}.`}
+        @click=${() => this.#setView(sortDirection(view, field, sorted ? !descending : false, this.#multiSort()))}>
+        <svg viewBox="0 0 10 10" aria-hidden="true"><path d=${sorted
+                ? descending ? "M2 3.5 5 6.5l3-3" : "M2 6.5 5 3.5l3 3"
+                : "M2 3.5 5 .5l3 3M2 6.5 5 9.5l3-3"}/></svg>
+      </button>`;
+        };
+        return html `<div class="aster-grid-panel aster-grid-sort-panel aster-popover" popover="manual" ${openWhen(true)}
+      style=${placeStyle(`${this.#id}-tool-sort`)} id=${`${this.#id}-sort`} role="group" aria-label=${this.#text("sortRows")}
+      @keydown=${(e) => this.#panelKey(e)}>
+      <p class="aster-grid-panel-title">${this.#text("sortRows")}</p>
+      ${rows.length === 0
+            ? html `<p class="aster-grid-panel-note">${this.#text("noSortableColumns")}</p>`
+            : html `<ul>
+          ${rows.map(({ field, offered, refusal }) => html `<li data-field=${field} ?data-refused=${refusal !== undefined}>
+            <span class="aster-grid-sort-name"><span class="aster-grid-sort-title">${fieldTitle(field)}</span>
+              ${refusal ? html `<small class="aster-grid-sort-reason">${refusal}</small>` : nothing}</span>
+            <span class="aster-grid-sort-actions">
+              <small class="aster-grid-sort-priority" aria-hidden="true">${priority.has(field) && active.length > 1 ? priority.get(field) : ""}</small>
+              ${priority.has(field) && active.length > 1 ? html `<span class="aster-sr-only">${this.#text("sortPriority", { priority: priority.get(field) })}</span>` : nothing}
+              ${refusal ? nothing : toggle(field)}
+              <button type="button" class="aster-grid-sort-clear" aria-label=${this.#text("clearFieldSorting", { field: fieldTitle(field) })} ?disabled=${!view.sort.some((key) => key.field === field)}
+                @click=${(e) => {
+                // Clearing disables this button, so focus a control that survives the render.
+                if (offered)
+                    e.currentTarget.closest("li")?.querySelector(".aster-grid-sort-direction")?.focus();
+                else
+                    this.querySelector(`.aster-grid-tool[aria-controls="${this.#id}-sort"]`)?.focus();
+                this.#setView(removeSort(view, field));
+            }}>
+                <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M2.5 2.5 7.5 7.5M7.5 2.5 2.5 7.5"/></svg>
+              </button>
+            </span>
+          </li>`)}
+        </ul>`}
+      <button type="button" class="aster-grid-panel-action" ?disabled=${view.sort.length === 0}
+        @click=${() => {
+            const first = this.querySelector(".aster-grid-sort-panel .aster-grid-sort-direction");
+            (first ?? this.querySelector(`.aster-grid-tool[aria-controls="${this.#id}-sort"]`))?.focus();
+            this.#setView({ ...view, sort: [] });
+        }}>${this.#text("clearSorting")}</button>
     </div>`;
     }
     #columnsPanel(view) {
-        const type = this.#collection.type;
-        const title = (field) => type.field(field)?.title ?? field;
-        const visible = view.columns.filter((c) => !c.hidden).length;
+        const title = (field) => this.#title(field);
+        const shown = new Set(this.#visibleColumns(view).map((column) => column.field));
         return html `<div class="aster-grid-panel aster-popover" popover="manual" ${openWhen(true)} style=${placeStyle(`${this.#id}-tool-columns`)}
-      id=${`${this.#id}-columns`} role="group" aria-label="Columns"
+      id=${`${this.#id}-columns`} role="group" aria-label=${this.#text("columns")}
       @keydown=${(e) => this.#panelKey(e)}>
-      <p class="aster-grid-panel-title">Columns</p>
+      <p class="aster-grid-panel-title">${this.#text("columns")}</p>
       <ul>
-        ${view.columns.map((c, i) => html `<li>
-            <label><input type="checkbox" .checked=${!c.hidden} ?disabled=${!c.hidden && visible === 1}
+        ${view.columns.map((c, i) => {
+            const visible = shown.has(c.field);
+            const hide = visible ? this.#hideRefusal(c.field) : undefined;
+            const move = this.#moveRefusal(c.field);
+            return html `<li>
+            <label title=${hide ?? nothing}><input type="checkbox" .checked=${visible} ?disabled=${hide !== undefined}
               @change=${(e) => this.#setView(setHidden(view, c.field, !e.target.checked))}>
               ${title(c.field)}</label>
-            <button type="button" aria-label=${`Move ${title(c.field)} up`} ?disabled=${i === 0}
+            <button type="button" aria-label=${this.#text("moveFieldUp", { field: title(c.field) })} ?disabled=${i === 0 || move !== undefined} title=${move ?? nothing}
               @click=${() => this.#setView(moveColumn(view, c.field, i - 1))}>↑</button>
-            <button type="button" aria-label=${`Move ${title(c.field)} down`} ?disabled=${i === view.columns.length - 1}
+            <button type="button" aria-label=${this.#text("moveFieldDown", { field: title(c.field) })} ?disabled=${i === view.columns.length - 1 || move !== undefined} title=${move ?? nothing}
               @click=${() => this.#setView(moveColumn(view, c.field, i + 1))}>↓</button>
-          </li>`)}
+          </li>`;
+        })}
       </ul>
-      <button type="button" class="aster-grid-panel-action" @click=${() => this.#reset()}>Reset to the page’s view</button>
+      <button type="button" class="aster-grid-panel-action" @click=${() => this.#reset()}>${this.#text("resetView")}</button>
     </div>`;
     }
     #viewsPanel(view) {
@@ -1028,29 +2100,29 @@ export class Grid extends AsterElement {
             this.#panel.value = undefined;
         };
         return html `<div class="aster-grid-panel aster-popover" popover="manual" ${openWhen(true)} style=${placeStyle(`${this.#id}-tool-views`)}
-      id=${`${this.#id}-views`} role="group" aria-label="Views"
+      id=${`${this.#id}-views`} role="group" aria-label=${this.#text("views")}
       @keydown=${(e) => this.#panelKey(e)}>
-      <p class="aster-grid-panel-title">Saved views</p>
-      ${names.length === 0 ? html `<p class="aster-grid-panel-note">None yet. Shape the grid, then save it here by name.</p>` : nothing}
+      <p class="aster-grid-panel-title">${this.#text("savedViews")}</p>
+      ${names.length === 0 ? html `<p class="aster-grid-panel-note">${this.#text("noSavedViews")}</p>` : nothing}
       <ul>
         ${names.map((n) => html `<li>
             <button type="button" class="aster-grid-panel-view" @click=${() => {
             this.#setView(reconcile(saved.named[n], this.#offered ?? view));
             this.#panel.value = undefined;
         }}>${n}</button>
-            <button type="button" aria-label=${`Delete the view ${n}`} @click=${() => {
+            <button type="button" aria-label=${this.#text("deleteView", { name: n })} @click=${() => {
             const { [n]: _, ...rest } = saved.named;
             this.#saved.value = { ...saved, named: rest };
-        }}>Delete</button>
+        }}>${this.#text("delete")}</button>
           </li>`)}
       </ul>
       <form class="aster-grid-panel-save" @submit=${(e) => (e.preventDefault(), save(e.currentTarget))}>
         <label class="aster-field" data-ring-owner>
-          <input aria-label="Name for this view" placeholder="Name this view">
+          <input aria-label=${this.#text("viewName")} placeholder=${this.#text("viewNamePlaceholder")}>
         </label>
-        <button type="submit" class="aster-grid-panel-action">Save</button>
+        <button type="submit" class="aster-grid-panel-action">${this.#text("save")}</button>
       </form>
-      <button type="button" class="aster-grid-panel-action" @click=${() => this.#reset()}>Reset to the page’s view</button>
+      <button type="button" class="aster-grid-panel-action" @click=${() => this.#reset()}>${this.#text("resetView")}</button>
     </div>`;
     }
     #reset() {
@@ -1068,98 +2140,126 @@ export class Grid extends AsterElement {
         this.querySelector(`.aster-grid-tool[aria-controls="${this.#id}-${panel}"]`)?.focus();
     }
     // ── header ──
-    #header(column, field, i, view, numeric, frozen, active) {
-        const sort = view.sort.findIndex((s) => s.field === column.field);
-        const key = sort >= 0 ? view.sort[sort] : undefined;
+    #header(column, field, i, view, numeric, frozen, style, active, offset) {
+        // Only an effective key counts as sorted: a stored key the page refuses
+        // is reported by the drift note, not drawn as if the rows came sorted.
+        const keys = view.sort.filter((key) => this.#sortable(key.field));
+        const sort = keys.findIndex((key) => key.field === column.field);
+        const key = sort >= 0 ? keys[sort] : undefined;
         const ariaSort = sort === 0 ? (key.descending ? "descending" : "ascending") : nothing;
-        const title = field?.title ?? column.field;
-        return html `<div class="aster-grid-cell aster-grid-header" role="columnheader" aria-colindex=${i + 1} id=${`${this.#id}-h-${i}`}
-      aria-sort=${ariaSort} ?data-numeric=${numeric} ?data-frozen=${i < view.frozen} ?data-active=${active} style=${frozen}
-      data-field=${column.field}>
-      <button type="button" class="aster-grid-sort" tabindex="-1"
-        title=${this.#sortable(column.field) ? `Sort by ${title}; Shift adds it to the sort; drag to move` : "Drag to move"}
+        const title = this.#title(column.field);
+        const align = this.#presentation.value.columns?.[column.field]?.align;
+        const refusal = this.#sortRefusal(column.field);
+        const move = this.#moveRefusal(column.field);
+        const resize = this.#resizeRefusal(column.field);
+        const multi = this.#multiSort();
+        const hint = [
+            refusal ?? this.#text("sortBy", { field: title }) + (multi ? this.#text("addToSort") : ""),
+            move ?? this.#text("dragToMove"),
+            resize ?? this.#text("dragToResize"),
+        ].join(". ");
+        return html `<div class="aster-grid-cell aster-grid-header" role="columnheader" aria-colindex=${i + offset} id=${`${this.#id}-h-${i}`}
+      data-col=${i} aria-sort=${ariaSort} ?data-numeric=${numeric} ?data-frozen=${i < frozen} ?data-active=${active} style=${style}
+      data-align=${align ?? nothing}
+      data-field=${column.field} data-sortable=${refusal ? "false" : "true"} ?data-movable=${!move} ?data-resizable=${!resize}>
+      <button type="button" class="aster-grid-sort" tabindex="-1" title=${hint}
         @pointerdown=${(e) => this.#dragColumn(e, column.field)}
         @click=${(e) => this.#sort(column.field, e.shiftKey)}>
         <span>${title}</span>
         ${key
             ? html `<svg class="aster-grid-sort-mark" viewBox="0 0 10 10" aria-hidden="true">
               <path d=${key.descending ? "M2 3.5 5 6.5l3-3" : "M2 6.5 5 3.5l3 3"}/></svg>
-              ${view.sort.length > 1 ? html `<small>${sort + 1}</small>` : nothing}`
+              ${keys.length > 1 ? html `<small>${sort + 1}</small>` : nothing}`
             : nothing}
       </button>
-      <button type="button" class="aster-grid-header-menu" tabindex="-1" aria-label=${`${title} column options`}
+      ${refusal ? html `<span class="aster-sr-only">${refusal}</span>` : nothing}
+      ${this.showHeaderMenu ? html `<button type="button" class="aster-grid-header-menu" tabindex="-1" aria-label=${this.#text("columnOptions", { field: title })}
         @click=${(e) => this.#openMenu(column.field, e.currentTarget)}>
         <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M2 3.8 5 6.8l3-3"/></svg>
-      </button>
-      <span class="aster-grid-resize" aria-hidden="true" @pointerdown=${(e) => this.#resize(e, column.field)}
-        @dblclick=${() => this.#setView(setWidth(this.#view.peek(), column.field, undefined))}></span>
+      </button>` : nothing}
+      ${resize ? nothing : html `<span class="aster-grid-resize" aria-hidden="true" @pointerdown=${(e) => this.#resize(e, column.field)}
+        @dblclick=${() => this.#setView(setWidth(this.#view.peek(), column.field, undefined))}></span>`}
     </div>`;
     }
     #menuItems(field) {
         const view = this.#view.peek();
-        const type = this.#collection.type;
-        const title = type.field(field)?.title ?? field;
+        const title = this.#title(field);
         const sorted = view.sort.find((s) => s.field === field);
-        const visible = view.columns.filter((c) => !c.hidden);
+        const visible = this.#visibleColumns(view);
+        const frozen = this.#frozenCount(view, visible);
         const at = visible.findIndex((c) => c.field === field);
         const set = (v) => this.#setView(v);
         const width = (delta) => set(setWidth(view, field, (visible[at]?.width ?? this.#measuredWidth(field)) + delta));
-        const frozenHere = at + 1 === view.frozen;
+        const frozenHere = at + 1 === frozen;
         const move = (to) => set(moveColumn(view, field, view.columns.findIndex((c) => c.field === visible[to]?.field)));
+        const sortedFields = groupFields(view);
+        const groupRefusal = this.#groupRefusal(field);
+        const freezeRefusal = this.#freezeThroughRefusal(field);
+        const moveRefusal = this.#moveRefusal(field);
+        const resizeRefusal = this.#resizeRefusal(field);
+        const hideRefusal = at < 0 ? undefined : this.#hideRefusal(field);
+        const moveItem = (label, run, unavailable) => moveRefusal ? { label, run: () => { }, disabled: moveRefusal } : { label, run, ...(unavailable ? { disabled: unavailable } : {}) };
+        const custom = this.#columnMenu.value(field);
         return [
+            ...custom,
+            ...(custom.length ? [{ kind: "separator" }] : []),
             ...(this.#sortable(field)
                 ? [
                     {
                         kind: "group",
-                        label: "Sort",
+                        label: this.#text("menuSort"),
                         items: [
-                            { kind: "radio", label: "Ascending", checked: !!sorted && !sorted.descending, run: () => set(sortDirection(view, field, false, false)) },
-                            { kind: "radio", label: "Descending", checked: !!sorted?.descending, run: () => set(sortDirection(view, field, true, false)) },
-                            { kind: "radio", label: "Not sorted", checked: !sorted, run: () => set(removeSort(view, field)) },
-                            ...(view.sort.length > 0 && !sorted ? [{ label: "Add to the sort", run: () => set(sortDirection(view, field, false, true)) }] : []),
+                            { kind: "radio", label: this.#text("ascending"), checked: !!sorted && !sorted.descending, run: () => set(sortDirection(view, field, false, false)) },
+                            { kind: "radio", label: this.#text("descending"), checked: !!sorted?.descending, run: () => set(sortDirection(view, field, true, false)) },
+                            { kind: "radio", label: this.#text("notSorted"), checked: !sorted, run: () => set(removeSort(view, field)) },
+                            ...(this.#multiSort() && view.sort.length > 0 && !sorted ? [{ label: this.#text("addToSortMenu"), run: () => set(sortDirection(view, field, false, true)) }] : []),
                         ],
                     },
                     { kind: "separator" },
                 ]
                 : []),
-            ...(this.#groupable(field)
-                ? [{ kind: "check", label: `Group by ${title}`, checked: groupFields(view).includes(field), run: () => set(setGroup(view, groupFields(view).includes(field) ? groupFields(view).filter((f) => f !== field) : [...groupFields(view), field])) }]
-                : []),
-            ...(at < visible.length - 1
-                ? [{
-                        kind: "check",
-                        label: `Freeze up to ${title}`,
-                        checked: frozenHere,
-                        run: () => set(frozenHere ? { ...view, frozen: 0 } : freezeThrough(view, field, (f) => this.#measuredWidth(f))),
-                    }]
-                : []),
+            groupRefusal
+                ? { label: this.#text("groupBy", { field: title }), run: () => { }, disabled: groupRefusal }
+                : { kind: "check", label: this.#text("groupBy", { field: title }), checked: sortedFields.includes(field), run: () => set(setGroup(view, sortedFields.includes(field) ? sortedFields.filter((f) => f !== field) : [...sortedFields, field])) },
+            freezeRefusal
+                ? { label: this.#text("freezeUpTo", { field: title }), run: () => { }, disabled: freezeRefusal }
+                : {
+                    kind: "check",
+                    label: this.#text("freezeUpTo", { field: title }),
+                    checked: frozenHere,
+                    run: () => set(frozenHere ? { ...view, frozen: 0 } : freezeThrough(view, field, (f) => this.#measuredWidth(f))),
+                },
             {
                 kind: "submenu",
-                label: "Move",
+                label: this.#text("menuMove"),
                 items: [
-                    { label: "Left", run: () => set(nudgeColumn(view, field, -1)), ...(at > 0 ? {} : { disabled: "It's the first column." }) },
-                    { label: "Right", run: () => set(nudgeColumn(view, field, 1)), ...(at < visible.length - 1 ? {} : { disabled: "It's the last column." }) },
-                    { label: "To the start", run: () => move(0), ...(at > 0 ? {} : { disabled: "It's the first column." }) },
-                    { label: "To the end", run: () => move(visible.length - 1), ...(at < visible.length - 1 ? {} : { disabled: "It's the last column." }) },
+                    moveItem(this.#text("moveLeft"), () => set(nudgeColumn(view, field, -1)), at > 0 ? undefined : this.#text("firstColumn")),
+                    moveItem(this.#text("moveRight"), () => set(nudgeColumn(view, field, 1)), at < visible.length - 1 ? undefined : this.#text("lastColumn")),
+                    moveItem(this.#text("moveToStart"), () => move(0), at > 0 ? undefined : this.#text("firstColumn")),
+                    moveItem(this.#text("moveToEnd"), () => move(visible.length - 1), at < visible.length - 1 ? undefined : this.#text("lastColumn")),
                 ],
             },
             {
                 kind: "submenu",
-                label: "Width",
-                items: [
-                    { label: "Wider", run: () => width(40) },
-                    { label: "Narrower", run: () => width(-40) },
-                    { label: "Fit the space", run: () => set(setWidth(view, field, undefined)) },
-                ],
+                label: this.#text("menuWidth"),
+                items: resizeRefusal
+                    ? [this.#text("wider"), this.#text("narrower"), this.#text("fitSpace")].map((label) => ({ label, run: () => { }, disabled: resizeRefusal }))
+                    : [
+                        { label: this.#text("wider"), run: () => width(40) },
+                        { label: this.#text("narrower"), run: () => width(-40) },
+                        { label: this.#text("fitSpace"), run: () => set(setWidth(view, field, undefined)) },
+                    ],
             },
             { kind: "separator" },
-            ...(visible.length > 1 ? [{ label: `Hide ${title}`, run: () => set(setHidden(view, field, true)) }] : []),
-            { label: "Columns…", run: () => (this.#panel.value = "columns") },
+            hideRefusal
+                ? { label: this.#text("hideField", { field: title }), run: () => { }, disabled: hideRefusal }
+                : { label: this.#text("hideField", { field: title }), run: () => set(setHidden(view, field, true)) },
+            { label: this.#text("columnsEllipsis"), run: () => (this.#panel.value = "columns") },
         ];
     }
     #openMenu(field, anchor, returnTo = anchor) {
-        const title = this.#collection?.type.field(field)?.title ?? field;
-        this.querySelector(".aster-grid-menu")?.openFrom(anchor, this.#menuItems(field), `${title} column`, returnTo);
+        const title = this.#title(field);
+        this.querySelector(".aster-grid-menu")?.openFrom(anchor, this.#menuItems(field), this.#text("rowColumn", { field: title }), returnTo);
     }
     /**
      * The row's menu: the page's actions for the record, then the column's
@@ -1167,7 +2267,7 @@ export class Grid extends AsterElement {
      */
     #openRowMenu(row, col, point) {
         const item = untracked(() => this.#layout()).at(row);
-        const field = this.#view.peek().columns.filter((c) => !c.hidden)[col]?.field;
+        const field = this.#visibleColumns(this.#view.peek())[col]?.field;
         if (!field)
             return;
         const title = this.#collection.type.field(field)?.title ?? field;
@@ -1177,20 +2277,39 @@ export class Grid extends AsterElement {
         const items = [
             ...actions,
             ...(actions.length ? [{ kind: "separator" }] : []),
-            { kind: "submenu", label: `${title} column`, items: this.#menuItems(field) },
+            { kind: "submenu", label: this.#text("rowColumn", { field: title }), items: this.#menuItems(field) },
         ];
         const cell = this.querySelector(`#${CSS.escape(`${this.#id}-${row}-${col}`)}`);
         const rect = cell?.getBoundingClientRect();
         const at = point ?? { x: rect?.left ?? 0, y: rect?.bottom ?? 0 };
-        this.querySelector(".aster-grid-menu")?.openAt(at, items, key !== undefined ? "Row" : `${title} column`, this.querySelector(".aster-grid-scroll"));
+        this.querySelector(".aster-grid-menu")?.openAt(at, items, key !== undefined ? this.#text("rowMenu") : this.#text("rowColumn", { field: title }), this.querySelector(".aster-grid-scroll"));
     }
     // ── filters ──
+    /** A filter cell whose operator allowlist leaves no usable control. */
+    #filterRefused(reason) {
+        return html `<span class="aster-grid-filter-refused" data-filterable="false" title=${reason}>${this.#text("notFilterable")}<span class="aster-sr-only"> ${reason}</span></span>`;
+    }
     #filter(column, field, view) {
         if (!field)
             return nothing;
-        const title = field.title ?? column.field;
+        const refusal = this.#filterRefusal(column.field);
+        if (refusal)
+            return this.#filterRefused(refusal);
+        const operators = this.#operators(column.field);
+        const title = this.#title(column.field);
         const current = view.filters[column.field];
         const lookup = this.#lookups.value[column.field];
+        if (lookup && !operators.includes("in"))
+            return this.#filterRefused(this.#filterOperatorRefusal(column.field, "in"));
+        if (!lookup && (field.type === "Edm.Boolean" || field.allowedValues) && !operators.includes("eq"))
+            return this.#filterRefused(this.#filterOperatorRefusal(column.field, "eq"));
+        const ranged = isNumeric(field) || field.type === "Edm.Date";
+        if (!lookup && !(field.type === "Edm.Boolean" || field.allowedValues) && !ranged && !operators.includes("contains")) {
+            return this.#filterRefused(this.#filterOperatorRefusal(column.field, "contains"));
+        }
+        if (!lookup && ranged && !["eq", "gt", "ge", "lt", "le"].some((op) => operators.includes(op))) {
+            return this.#filterRefused(this.#filterOperatorRefusal(column.field, "eq"));
+        }
         const pick = (options, value, to) => html `<aster-choice .label=${`Filter ${title}`} .placeholder=${"Any"} .options=${[{ value: "\u0000any", label: "Any" }, ...options]}
         .value=${value ?? "\u0000any"}
         @change=${(e) => this.#setView(setFilter(this.#view.peek(), column.field, e.detail === "\u0000any" ? undefined : to(e.detail)))}></aster-choice>`;
@@ -1208,7 +2327,6 @@ export class Grid extends AsterElement {
             return pick([{ value: true, label: "Yes" }, { value: false, label: "No" }], chosen, eq);
         if (field.allowedValues)
             return pick(field.allowedValues.map((a) => ({ value: a.value, label: a.label ?? String(a.value) })), chosen, eq);
-        const ranged = isNumeric(field) || field.type === "Edm.Date";
         const text = this.#filterText.value[column.field] ?? (ranged ? rangeText(current) : current && "value" in current ? String(current.value) : "");
         const error = this.#filterErrors.value[column.field];
         const errorId = `${this.#id}-filter-${column.field}`;
@@ -1223,14 +2341,14 @@ export class Grid extends AsterElement {
                 this.querySelector(`#${CSS.escape(button)}`)?.focus();
         };
         return html `<label class="aster-field" data-ring-owner style=${date ? anchorStyle(anchor) : nothing}>
-        <input .value=${live(text)} aria-label=${`Filter ${title}`} aria-invalid=${error ? "true" : nothing}
+        <input .value=${live(text)} aria-label=${this.#text("filterField", { field: title })} aria-invalid=${error ? "true" : nothing}
           aria-describedby=${error ? errorId : nothing}
           placeholder=${ranged ? (date ? ">=1 Oct 2026" : ">5 or 1..3") : "Contains"}
           @input=${(e) => this.#typeFilter(column.field, field, e.target.value, ranged)}
           @keydown=${(e) => e.key === "Enter" && this.#flushFilter(column.field)}
           @blur=${() => this.#flushFilter(column.field)}>
         ${date
-            ? html `<button type="button" class="aster-date-button" id=${button} aria-label=${`Choose a date to filter ${title}`}
+            ? html `<button type="button" class="aster-date-button" id=${button} aria-label=${this.#text("chooseFilterDate", { field: title })}
               aria-haspopup="dialog" aria-expanded=${open ? "true" : "false"} aria-controls=${dialog}
               @click=${(e) => {
                 e.preventDefault();
@@ -1277,6 +2395,9 @@ export class Grid extends AsterElement {
             const parsed = ranged
                 ? parseRange(field, text)
                 : { criteria: containsText(name, text) };
+            const refused = parsed.criteria && !parsed.error ? this.#criteriaOperatorRefusal(name, parsed.criteria) : undefined;
+            if (refused)
+                parsed.error = refused;
             const { [name]: _, ...errors } = this.#filterErrors.peek();
             this.#filterErrors.value = parsed.error ? { ...errors, [name]: parsed.error } : errors;
             if (!parsed.error)
@@ -1286,12 +2407,17 @@ export class Grid extends AsterElement {
         this.#filterTimers.set(name, setTimeout(apply, FILTER_DELAY));
     }
     #toggleFilters(view) {
-        const showing = this.#showFilters.peek() || Object.keys(view.filters).length > 0;
+        if (this.#chrome.peek().filterRow === false)
+            return;
+        const showing = this.#filtersShown();
         if (showing && Object.keys(view.filters).length > 0) {
             this.#filterText.value = {};
             this.#filterErrors.value = {};
             this.#setView({ ...view, filters: {} });
         }
+        // A forced row stays open; the button still clears its filters.
+        if (this.#chrome.peek().filterRow === true)
+            return;
         this.#showFilters.value = !showing;
     }
     #optionsFor(field, lookup) {
@@ -1307,7 +2433,7 @@ export class Grid extends AsterElement {
         return options;
     }
     // ── cells ──
-    #cell(column, field, entity, key, ctx) {
+    #cell(column, field, entity, key, ctx, mapped) {
         const render = this.#renderers.value[column.field];
         if (render)
             return render(entity, key);
@@ -1315,27 +2441,32 @@ export class Grid extends AsterElement {
         const formatter = this.#formatters.value[column.field];
         if (formatter)
             return formatter(value, entity, field);
+        if (mapped)
+            return mapped.label;
         const lookup = this.#lookups.value[column.field];
         if (lookup && value !== null && value !== undefined) {
             const related = ctx.lookup(lookup.set, keyText([value])).value;
             return related ? String(related[lookup.display] ?? "") : html `<span class="aster-grid-skeleton"></span>`;
         }
-        if (field?.type === "Edm.Boolean")
-            return value ? "Yes" : "";
-        if (field?.type === "Edm.Date" && typeof value === "string")
-            return formatDate(value);
-        if (field?.type === "Edm.DateTimeOffset" && typeof value === "string")
-            return absoluteTime(value);
-        return formatValue(field, value);
+        return cellText(field, value, this.#presentation.value.columns?.[column.field]?.format);
     }
     #external() {
-        return this.#binding.value ?? this.#selection.value?.collection;
+        const binding = this.#binding.value;
+        if (binding)
+            return binding;
+        // A tree owns one collection per level; a supplied selection is state, not the data binding.
+        if (this.#treeOptions.value)
+            return undefined;
+        return this.#selection.value?.collection;
     }
     #syncBound() {
         const collection = this.#external();
         const view = this.#view.value;
         const base = this.#base.value;
         const paths = this.#sortPaths.value;
+        // Capability changes alter the projected query even when the view doesn't.
+        this.#policy.value;
+        this.#ctx.value;
         if (!collection) {
             this.#bound = undefined;
             return;
@@ -1357,9 +2488,10 @@ export class Grid extends AsterElement {
             }
             if (!view)
                 return;
-            const parts = [this.#boundBase, base, ...Object.values(view.filters)].filter((c) => c !== undefined);
+            const parts = [this.#boundBase, base].filter((c) => c !== undefined);
             const filter = parts.length > 1 ? { op: "and", args: parts } : parts[0];
-            const projected = this.#query(query.set, { ...view, filters: {} }, filter, paths);
+            // View entries go through capability filtering; refused filters drop out and the drift note reports them.
+            const projected = this.#query(query.set, view, filter, paths);
             if (JSON.stringify([query.filter, query.orderBy]) === JSON.stringify([projected.filter, projected.orderBy]))
                 return;
             const { filter: _filter, orderBy: _orderBy, ...rest } = query;
@@ -1370,6 +2502,9 @@ export class Grid extends AsterElement {
     }
     #recoverActive() {
         this.#version.value;
+        // Paged mode keeps the active row inside the page it chose.
+        if (this.#pagedMode())
+            return;
         const grouping = this.#grouping;
         if (grouping) {
             const rows = grouping.rows.value;
@@ -1418,19 +2553,20 @@ export class Grid extends AsterElement {
         });
     }
     #choose(key, index, extend, toggle) {
-        if (!this.#selectable.peek())
-            return;
+        if (!this.#selectionAllowed())
+            return false;
         const selection = this.#selection.peek();
         if (!selection)
-            return;
+            return false;
         let accepted = true;
         if (extend && selection.multiple) {
-            const anchor = this.#selectionAnchor;
-            const slots = selection.collection.keys.peek();
-            const loaded = anchor ? slots.indexOf(anchor.key) : -1;
-            const from = loaded >= 0 ? loaded : anchor?.query === selection.collection.query ? anchor.index : index;
-            const range = slots.slice(Math.min(from, index), Math.max(from, index) + 1).filter((k) => k !== undefined);
-            accepted = selection.selectAll(range);
+            accepted = selection.selectAll(this.#shiftRange(selection, key, index, this.#selectionAnchor));
+        }
+        else if (!extend && this.#cascadeEnabled(selection)) {
+            // Cascades settle several keys at once: toggling the clicked row first
+            // would keep it selected when an ordered selection rejects the whole.
+            accepted = this.#cascadeChoose(selection, key, !selection.keys.peek().includes(key));
+            this.#selectionAnchor = { key, index, query: selection.collection.query };
         }
         else {
             if (toggle || selection.ordered)
@@ -1440,9 +2576,80 @@ export class Grid extends AsterElement {
             this.#selectionAnchor = { key, index, query: selection.collection.query };
         }
         this.#selectionNote.value = accepted ? "" : `Select at most ${selection.maxOrdered} ordered items. Deselect an item to add another.`;
+        return accepted;
+    }
+    /** The keys between the anchor and the click: visible tree order when there is a tree, membership order otherwise. */
+    #shiftRange(selection, key, index, anchor) {
+        if (this.#tree && anchor) {
+            const visible = this.#layout().keys;
+            const from = visible.indexOf(anchor.key);
+            const to = visible.indexOf(key);
+            if (from >= 0 && to >= 0) {
+                return visible.slice(Math.min(from, to), Math.max(from, to) + 1).filter((k) => k !== undefined);
+            }
+        }
+        const slots = selection.collection.keys.peek();
+        const loaded = anchor ? slots.indexOf(anchor.key) : -1;
+        const from = loaded >= 0 ? loaded : anchor?.query === selection.collection.query ? anchor.index : index;
+        return slots.slice(Math.min(from, index), Math.max(from, index) + 1).filter((k) => k !== undefined);
+    }
+    /** Cascade needs a tree, a multiple shared selection and the tree's switch. */
+    #cascadeEnabled(selection) {
+        return selection.multiple && this.#tree !== undefined && this.#treeOptions.value?.cascadeSelection === true;
+    }
+    /** The loaded tree rows whose parent chain passes through `key`. */
+    #loadedDescendants(key) {
+        const rows = this.#tree?.rows.peek() ?? [];
+        const parentOf = new Map();
+        for (const row of rows)
+            if (row.key !== undefined)
+                parentOf.set(row.key, row.parent);
+        const under = (candidate) => {
+            let parent = parentOf.get(candidate);
+            while (parent !== undefined) {
+                if (parent === key)
+                    return true;
+                parent = parentOf.get(parent);
+            }
+            return false;
+        };
+        return rows.flatMap((row) => (row.key !== undefined && under(row.key) ? [row.key] : []));
+    }
+    /**
+     * Applies a selection to a node's loaded descendants, and settles each
+     * ancestor on whether all its loaded children are chosen. `choosing` is
+     * the clicked row's state before this call, which itself changes nothing.
+     */
+    #cascadeChoose(selection, key, choosing) {
+        const rows = this.#tree?.rows.peek() ?? [];
+        const parentOf = new Map();
+        for (const row of rows)
+            if (row.key !== undefined)
+                parentOf.set(row.key, row.parent);
+        const under = new Set([key, ...this.#loadedDescendants(key)]);
+        let next = [...selection.keys.peek()];
+        if (choosing) {
+            for (const row of rows)
+                if (row.key !== undefined && under.has(row.key) && !next.includes(row.key))
+                    next.push(row.key);
+        }
+        else {
+            next = next.filter((candidate) => !under.has(candidate));
+        }
+        let parent = parentOf.get(key);
+        while (parent !== undefined) {
+            const children = rows.flatMap((row) => (row.key !== undefined && row.parent === parent ? [row.key] : []));
+            const completed = children.length > 0 && children.every((child) => next.includes(child));
+            if (completed && !next.includes(parent))
+                next.push(parent);
+            if (!completed)
+                next = next.filter((candidate) => candidate !== parent);
+            parent = parentOf.get(parent);
+        }
+        return selection.selectAll(next);
     }
     #moveSelection(key, delta) {
-        if (!this.#selectable.peek())
+        if (!this.#selectionAllowed())
             return;
         const selection = this.#selection.peek();
         if (!selection)
@@ -1488,6 +2695,88 @@ export class Grid extends AsterElement {
           ?disabled=${index === chosen.length - 1} @click=${() => this.#moveSelection(key, 1)}>↓</button>` : nothing}
     </span>`;
     }
+    /**
+     * The selection column's header. With a multiple shared selection it is a
+     * select-all for the loaded rows, mixed when only some are chosen; a single
+     * or owned selection has nothing to select in bulk.
+     */
+    #selectionHead(selection, chosen) {
+        const loaded = this.#tree
+            ? this.#tree.rows.peek().flatMap((row) => (row.key !== undefined ? [row.key] : []))
+            : this.#collection?.keys.value.filter((key) => key !== undefined) ?? [];
+        const loadedSet = new Set(loaded);
+        const picked = loaded.filter((key) => chosen.includes(key));
+        const checked = loaded.length > 0 && picked.length === loaded.length;
+        const mixed = picked.length > 0 && !checked;
+        const multiple = selection?.multiple === true;
+        return html `<div class="aster-grid-cell aster-grid-select aster-grid-select-head" role="columnheader" aria-colindex="1" id=${`${this.#id}-h-s`}>
+      ${multiple
+            ? html `<input type="checkbox" .checked=${checked} .indeterminate=${mixed} tabindex="0"
+            aria-label=${checked ? "Clear the selection of loaded rows" : mixed ? "Select all loaded rows, some are selected" : "Select all loaded rows"}
+            @change=${(e) => {
+                const input = e.currentTarget;
+                if (!selection)
+                    return;
+                if (checked) {
+                    const keep = chosen.filter((key) => !loadedSet.has(key));
+                    selection.selectAll(keep);
+                    this.#selectionNote.value = keep.length ? `Kept ${keep.length} selected ${keep.length === 1 ? "row" : "rows"} not loaded here.` : "";
+                }
+                else if (selection.selectAll([...new Set([...chosen, ...loaded])])) {
+                    this.#selectionNote.value = "";
+                }
+                else {
+                    this.#selectionNote.value = `Select at most ${selection.maxOrdered} ordered items. Deselect an item to add another.`;
+                }
+                const now = selection.keys.peek();
+                const picked = loaded.filter((key) => now.includes(key)).length;
+                input.checked = loaded.length > 0 && picked === loaded.length;
+                input.indeterminate = picked > 0 && picked < loaded.length;
+            }}>`
+            : html `<span class="aster-sr-only">Selection</span>`}
+    </div>`;
+    }
+    /** One row's checkbox in the leading selection column. */
+    #selectionCell(key, index, selection, chosen, entity, hidden) {
+        if (key === undefined)
+            return html `<div class="aster-grid-cell aster-grid-select" role="gridcell" aria-colindex="1" data-col="-1"></div>`;
+        const chosenIndex = chosen.indexOf(key);
+        const checked = selection ? chosenIndex >= 0 : key === this.#selected.value;
+        const field = this.#collection?.type.titleField;
+        const name = field && hidden?.has(field) ? "Hidden" : String((entity && field ? entity[field] : undefined) ?? key);
+        // A folder with some chosen descendants is mixed while cascade is on.
+        const mixed = !checked && selection?.multiple === true && this.#tree !== undefined && this.#treeOptions.value?.cascadeSelection === true
+            && this.#loadedDescendants(key).some((descendant) => chosen.includes(descendant));
+        const label = mixed
+            ? `Select all under ${name}, some are selected`
+            : selection?.multiple ? `${checked ? "Deselect" : "Select"} ${name}` : `${checked ? "Selected" : "Select"} ${name}`;
+        return html `<div class="aster-grid-cell aster-grid-select" role="gridcell" aria-colindex="1" data-col="-1" data-label="Select">
+      <input type="checkbox" .checked=${checked} .indeterminate=${mixed} tabindex="-1" aria-label=${label}
+        @change=${(e) => {
+            const input = e.currentTarget;
+            if (selection)
+                this.#choose(key, this.#collection.keys.peek().indexOf(key), false, selection.multiple);
+            else
+                this.#activate(index, this.#active.peek().col);
+            // The native toggle ran first; settle it on the state that resulted.
+            input.checked = selection ? selection.keys.peek().includes(key) : key === this.#selected.peek();
+            const chosenNow = selection?.keys.peek() ?? [];
+            input.indeterminate = !input.checked && selection?.multiple === true && this.#tree !== undefined && this.#treeOptions.peek()?.cascadeSelection === true
+                && this.#loadedDescendants(key).some((descendant) => chosenNow.includes(descendant));
+        }}
+        @keydown=${(e) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                this.focus();
+            }
+            else if (e.key !== "Tab")
+                e.stopPropagation();
+        }}
+        @dblclick=${(e) => e.stopPropagation()}
+        @contextmenu=${(e) => e.stopPropagation()}>
+      ${selection?.ordered && chosenIndex >= 0 ? html `<span class="aster-grid-select-rank" aria-hidden="true">${chosenIndex + 1}</span>` : nothing}
+    </div>`;
+    }
     // ── data and view ──
     /** With `persist`, the person's last view replaces the page's, reconciled with today's columns. */
     #restore() {
@@ -1514,6 +2803,9 @@ export class Grid extends AsterElement {
     }
     /** Stored views have been read; until then, writing would replace them. */
     #restored = false;
+    /** The view and effective selection the change events last reported. */
+    #viewBefore;
+    #selectionBefore;
     /** Publishes the shared selection or active row, plus view and total. */
     #announce() {
         const key = this.#publish.value;
@@ -1542,9 +2834,52 @@ export class Grid extends AsterElement {
             ...(publication?.hidden ? { hidden: publication.hidden } : {}),
         });
     }
+    /** Drift is announced once per set of dropped entries; dismissing hides the note, not the announcement. */
+    #driftAnnounced = "";
+    /** Notifies after the view changed, whichever code changed it; never cancelable. */
+    #viewChanged() {
+        const view = this.#view.value;
+        if (view === this.#viewBefore)
+            return;
+        const before = this.#viewBefore;
+        this.#viewBefore = view;
+        if (!before || !view)
+            return;
+        if (JSON.stringify(before.sort) !== JSON.stringify(view.sort))
+            this.emit("sort-change", { sort: view.sort }, { cancelable: false });
+        if (JSON.stringify(before.filters) !== JSON.stringify(view.filters))
+            this.emit("filter-change", { filters: view.filters }, { cancelable: false });
+        if (JSON.stringify(before.criteria) !== JSON.stringify(view.criteria))
+            this.emit("criteria-change", { criteria: view.criteria }, { cancelable: false });
+    }
+    /** Notifies after the effective selection changed; owned selection reports its one key. */
+    #selectionChanged() {
+        const shared = this.#selection.value;
+        const keys = shared ? [...shared.keys.value] : this.#selected.value === undefined ? [] : [this.#selected.value];
+        const id = keys.join("\u0000");
+        if (id === this.#selectionBefore)
+            return;
+        const first = this.#selectionBefore === undefined;
+        this.#selectionBefore = id;
+        if (!first)
+            this.emit("selection-change", { keys }, { cancelable: false });
+    }
+    #driftAnnounce() {
+        const entries = this.#drift.value;
+        const key = this.#driftKey(entries);
+        if (!entries.length) {
+            this.#driftAnnounced = "";
+            this.#driftDismissed.value = "";
+            return;
+        }
+        if (key === this.#driftAnnounced)
+            return;
+        this.#driftAnnounced = key;
+        announce(this.#driftText(entries));
+    }
     #setView(view) {
         const request = ++this.#viewRequest;
-        if (this.#editing.peek() && (JSON.stringify(groupFields(view)) !== JSON.stringify(groupFields(this.#view.peek())) || JSON.stringify(view.criteria) !== JSON.stringify(this.#view.peek()?.criteria))) {
+        if (this.#editing.peek() && (JSON.stringify(this.#groupedFields(view)) !== JSON.stringify(this.#groupedFields(this.#view.peek())) || JSON.stringify(view.criteria) !== JSON.stringify(this.#view.peek()?.criteria))) {
             void this.#endEdit(true).then((saved) => {
                 if (saved && this.isConnected && request === this.#viewRequest)
                     this.#commitView(view);
@@ -1554,8 +2889,8 @@ export class Grid extends AsterElement {
         this.#commitView(view);
     }
     #commitView(view) {
-        const beforeGroups = groupFields(this.#view.peek());
-        const afterGroups = groupFields(view);
+        const beforeGroups = this.#groupedFields(this.#view.peek());
+        const afterGroups = this.#groupedFields(view);
         const focused = this.contains(document.activeElement) ? document.activeElement?.closest(".aster-grid-group-tools") : null;
         if (focused && JSON.stringify(beforeGroups) !== JSON.stringify(afterGroups)) {
             const field = focused.dataset.groupField;
@@ -1577,6 +2912,7 @@ export class Grid extends AsterElement {
         if (binding) {
             untracked(() => {
                 this.#selected.value = undefined;
+                this.#ownedOptions = undefined;
                 if (this.#collection === binding) {
                     this.#ownsCollection = false;
                     return;
@@ -1593,11 +2929,14 @@ export class Grid extends AsterElement {
             if (!this.#view.peek())
                 this.view = defaultView(ctx.schema.set(set).type);
         });
-        if (this.#collection?.query.set === set && (this.#ownsCollection || this.#tree))
+        const options = this.#collectionOptions();
+        const optionsKey = JSON.stringify(options);
+        if (this.#collection?.query.set === set && (this.#tree || (this.#ownsCollection && this.#ownedOptions === optionsKey)))
             return;
         const treeOptions = untracked(() => this.#treeOptions.value);
         if (treeOptions) {
             untracked(() => {
+                this.#ownedOptions = undefined;
                 this.#tree?.dispose();
                 const filters = computed(() => {
                     return this.#query(set, this.#view.value ?? { columns: [], sort: [], filters: {}, frozen: 0 }).filter;
@@ -1607,9 +2946,10 @@ export class Grid extends AsterElement {
                     ...treeOptions,
                     base: computed(() => this.#base.value),
                     filter: filters,
-                    orderBy: computed(() => viewQuery(set, this.#view.value ?? { columns: [], sort: [], filters: {}, frozen: 0 }, undefined, this.#sortPaths.value).orderBy ?? []),
+                    orderBy: computed(() => viewQuery(set, this.#view.value ?? { columns: [], sort: [], filters: {}, frozen: 0 }, undefined, this.#sortPaths.value, this.#capabilities()).orderBy ?? []),
                 });
                 this.#collection = this.#tree.level(undefined);
+                this.#autoOpen(this.#tree, treeOptions.autoOpen ?? 0);
                 this.#version.value++;
             });
             this.onDisconnect(() => {
@@ -1623,20 +2963,24 @@ export class Grid extends AsterElement {
         untracked(() => {
             if (this.#ownsCollection && this.#collection)
                 ctx.release(this.#collection);
-            this.#collection = ctx.collection(query, { pageSize: 100 });
+            this.#collection = ctx.collection(query, options);
             this.#ownsCollection = true;
+            this.#ownedOptions = optionsKey;
             this.#version.value++;
         });
     }
+    /** The owned collection's data options, so a change recreates it. */
+    #ownedOptions;
     /** A new query (filter, sort, grouping, base) starts at the top, with its first row active. */
     #toTop() {
         const view = this.#view.value;
         // Before the view arrives there's no query to compare with.
         if (!view)
             return;
-        const key = JSON.stringify([view.filters, view.criteria, view.sort, view.groupBy, this.#base.value, this.#external()?.query]);
+        const key = JSON.stringify([view.filters, view.criteria, view.sort, view.groupBy, this.#base.value, this.#external()?.query, this.#capabilitiesVersion.value]);
         untracked(() => {
             if (this.#lastQuery !== undefined && this.#lastQuery !== key) {
+                this.#page.value = 0;
                 const scroll = this.querySelector(".aster-grid-scroll");
                 if (scroll)
                     scroll.scrollTop = 0;
@@ -1656,13 +3000,18 @@ export class Grid extends AsterElement {
     #load() {
         const collection = this.#collection;
         this.#version.value;
-        if (!collection)
+        if (!collection || this.#deferred())
             return;
         const layout = this.#layout();
         this.#heights.setKeys(layout.keys);
         const { start, end } = this.#heights.window(this.#top.value, this.#viewport.value, OVERSCAN);
         const wanted = new Map();
-        if (!groupFields(this.#view.value).length && !this.#tree)
+        if (this.#pagedMode()) {
+            const first = layout.first ?? 0;
+            const size = Math.max(1, this.#pageSize.peek());
+            wanted.set(collection, { from: first, to: Math.max(first + 1, layout.total === undefined ? first + size : Math.min(layout.total, first + size)) });
+        }
+        else if (!this.#groupedFields().length && !this.#tree)
             wanted.set(collection, { from: start, to: Math.max(end, 1) });
         else {
             // A tree's top level loads before it has lines to look at.
@@ -1715,7 +3064,25 @@ export class Grid extends AsterElement {
                 },
             };
         }
-        if (!groupFields(view).length) {
+        if (this.#pagedMode()) {
+            const keys = collection.keys.value;
+            const total = collection.count.value;
+            const size = Math.max(1, this.#pageSize.value);
+            const pages = total === undefined ? undefined : Math.max(1, Math.ceil(total / size));
+            const page = pages === undefined ? Math.max(0, this.#page.value) : Math.min(Math.max(0, this.#page.value), pages - 1);
+            const first = page * size;
+            const end = total === undefined ? Math.min(keys.length, first + size) : Math.min(total, first + size);
+            const slice = keys.slice(first, end);
+            return {
+                keys: slice,
+                total,
+                ...atLeast(collection),
+                groups: undefined,
+                first,
+                at: (i) => ({ kind: "row", key: slice[i], collection, local: first + i }),
+            };
+        }
+        if (!this.#groupedFields(view).length) {
             const keys = collection.keys.value;
             const total = collection.count.value;
             return { keys, total, ...atLeast(collection), groups: undefined, at: (i) => ({ kind: "row", key: keys[i], collection, local: i }) };
@@ -1728,7 +3095,8 @@ export class Grid extends AsterElement {
     #groupRow(item, index, rowIndex, columns, _view, active) {
         const field = this.#collection.type.field(item.field);
         const label = this.#groupLabel(item.field, field, item.group.value);
-        const path = item.path.map((value, i) => String(this.#groupLabel(groupFields(this.#view.value)[i], this.#collection.type.field(groupFields(this.#view.value)[i]), value))).join(" / ");
+        const fields = this.#groupedFields(this.#view.value);
+        const path = item.path.map((value, i) => String(this.#groupLabel(fields[i], this.#collection.type.field(fields[i]), value))).join(" / ");
         return html `<div class="aster-grid-row aster-grid-group" role="row" aria-rowindex=${rowIndex} data-index=${index}
       data-key=${item.id} aria-level=${item.level} aria-posinset=${item.position} aria-setsize=${item.siblings}
       aria-expanded=${item.expanded ? "true" : "false"} aria-busy=${item.loading ? "true" : "false"} style=${`--level:${item.level - 1}`}>
@@ -1736,13 +3104,13 @@ export class Grid extends AsterElement {
         ?data-active=${active} @click=${(e) => { if (!e.target.closest("button"))
             this.#toggleGroup(item.id); }}>
         <svg viewBox="0 0 10 10" aria-hidden="true"><path d="M3.5 2 6.5 5l-3 3"/></svg>
-        <span class="aster-sr-only">${field?.title ?? item.field}: </span>
+        <span class="aster-sr-only">${this.#title(item.field)}: </span>
         <span class="aster-grid-group-label">${label}</span>
         <span class="aster-grid-group-count">${new Intl.NumberFormat("en-GB").format(item.group.count)}</span>
         ${item.totalsAvailable ? this.#summaries.value.map((summary, i) => summary.method === "count" ? nothing : html `<span class="aster-grid-group-summary">${this.#summaryLabel(summary)}: ${this.#summaryValue(summary, item.group.totals[`s${i}`] ?? null)}</span>`) : nothing}
-        ${item.loading ? html `<span class="aster-grid-group-loading" role="status">Loading…</span>` : nothing}
-        ${item.error !== undefined ? html `<span class="aster-error" role="status">Couldn’t load group.</span>
-          <button type="button" class="aster-grid-tool" aria-label=${`Retry group ${path}`} @click=${() => { this.#activate(index, 0); this.focus({ preventScroll: true }); void this.#grouping?.retry(item.id).catch(() => { }); }}>Retry</button>` : nothing}
+        ${item.loading ? html `<span class="aster-grid-group-loading" role="status">${this.#text("loading")}</span>` : nothing}
+        ${item.error !== undefined ? html `<span class="aster-error" role="status">${this.#text("groupLoadFailed")}</span>
+          <button type="button" class="aster-grid-tool" aria-label=${this.#text("retryGroup", { group: path })} @click=${() => { this.#activate(index, 0); this.focus({ preventScroll: true }); void this.#grouping?.retry(item.id).catch(() => { }); }}>${this.#text("retry")}</button>` : nothing}
       </div>
     </div>`;
     }
@@ -1772,17 +3140,31 @@ export class Grid extends AsterElement {
         if (summary.label)
             return summary.label;
         if (summary.method === "count")
-            return "Rows";
-        const title = this.#collection?.type.field(summary.field)?.title ?? summary.field;
-        const names = { sum: "Sum", min: "Minimum", max: "Maximum", average: "Average", countdistinct: "Distinct" };
-        return `${names[summary.method]} ${title}`;
+            return this.#text("summaryRows");
+        const title = this.#title(summary.field);
+        switch (summary.method) {
+            case "sum":
+                return this.#text("summarySum", { field: title });
+            case "min":
+                return this.#text("summaryMinimum", { field: title });
+            case "max":
+                return this.#text("summaryMaximum", { field: title });
+            case "average":
+                return this.#text("summaryAverage", { field: title });
+            case "countdistinct":
+                return this.#text("summaryDistinct", { field: title });
+            default:
+                return title;
+        }
     }
     #summaryValue(summary, value) {
         if (value === null)
             return "—";
         if (summary.method === "count" || summary.method === "countdistinct")
             return new Intl.NumberFormat("en-GB").format(Number(value));
-        return formatValue(this.#collection?.type.field(summary.field), value);
+        const field = this.#collection?.type.field(summary.field);
+        const format = this.#presentation.value.columns?.[summary.field]?.format;
+        return format ? cellText(field, value, format) : formatValue(field, value);
     }
     #summaryView() {
         const summary = this.#summary;
@@ -1790,20 +3172,26 @@ export class Grid extends AsterElement {
             return nothing;
         const values = summary.values.value;
         const status = summary.status.value;
-        return html `<section class="aster-grid-summary" aria-label=${`${this.#label.value} summaries`} aria-busy=${status === "loading" ? "true" : "false"}>
+        return html `<section class="aster-grid-summary" aria-label=${this.#text("summaryAria", { label: this.#label.value })} aria-busy=${status === "loading" ? "true" : "false"}>
       <aster-progress-status class="aster-grid-summary-status" .busy=${status === "loading"}
-        .error=${status === "error" ? "Couldn’t load summaries." : undefined} .progressPolicy=${this.#progressPolicy.value}
-        .pendingText=${"Loading summaries…"} .completeText=${"Summaries updated"}></aster-progress-status>
-      ${status === "error" ? html `<button type="button" class="aster-grid-tool" @click=${() => { this.focus({ preventScroll: true }); void summary.refresh(); }}>Retry summaries</button>` : nothing}
+        .error=${status === "error" ? this.#text("summaryLoadFailed") : undefined} .progressPolicy=${this.#progressPolicy.value}
+        .pendingText=${this.#text("summaryLoading")} .completeText=${this.#text("summariesUpdated")}></aster-progress-status>
+      ${status === "error" ? html `<button type="button" class="aster-grid-tool" @click=${() => { this.focus({ preventScroll: true }); void summary.refresh(); }}>${this.#text("retrySummaries")}</button>` : nothing}
       ${values ? html `<dl>${this.#summaries.value.map((s, i) => html `<div><dt>${this.#summaryLabel(s)}</dt><dd>${this.#summaryValue(s, values[s.method === "count" ? "count" : `s${i}`] ?? null)}</dd></div>`)}</dl>` : nothing}
     </section>`;
     }
     #groupLabel(name, field, value) {
+        const column = this.#presentation.value.columns?.[name];
+        const mapped = mappedValue(column, value);
+        if (mapped)
+            return mapped.label;
         if (value === null)
             return "None";
         const lookup = this.#lookups.value[name];
         if (lookup)
             return String(this.#ctx.peek().lookup(lookup.set, keyText([value])).value?.[lookup.display] ?? "…");
+        if (column?.format)
+            return cellText(field, value, column.format);
         if (field?.type === "Edm.Boolean")
             return value ? "Yes" : "No";
         if (field?.type === "Edm.Date" && typeof value === "string")
@@ -1812,14 +3200,6 @@ export class Grid extends AsterElement {
             return absoluteTime(value);
         return formatValue(field, value);
     }
-    #groupable(name) {
-        if (this.#tree || this.#external())
-            return false;
-        const field = this.#collection?.type.field(name);
-        if (!field)
-            return false;
-        return !(field.type === "Edm.String" && !field.allowedValues && (field.maxLength ?? 0) > 500);
-    }
     async #toggleGroup(id) {
         const grouping = this.#grouping;
         if (!grouping)
@@ -1849,16 +3229,21 @@ export class Grid extends AsterElement {
         }
         void grouping.toggle(id).catch(() => { });
     }
-    #reorderGroup(index, step) {
+    #reorderGroup(field, step) {
         const view = this.#view.peek();
         if (!view)
             return;
-        const fields = [...groupFields(view)];
-        const to = index + step;
-        if (to < 0 || to >= fields.length)
+        const stored = [...groupFields(view)];
+        const effective = this.#groupedFields(view);
+        const neighbour = effective[effective.indexOf(field) + step];
+        if (neighbour === undefined)
+            return;
+        const a = stored.indexOf(field);
+        const b = stored.indexOf(neighbour);
+        if (a < 0 || b < 0)
             return;
-        [fields[index], fields[to]] = [fields[to], fields[index]];
-        this.#setView(setGroup(view, fields));
+        [stored[a], stored[b]] = [stored[b], stored[a]];
+        this.#setView(setGroup(view, stored));
     }
     #groupSummaryConfig;
     #groupFieldsKey = "";
@@ -1867,7 +3252,7 @@ export class Grid extends AsterElement {
     #group() {
         const ctx = this.#ctx.value;
         const set = this.set;
-        const fields = this.#treeOptions.value ? [] : groupFields(this.#view.value);
+        const fields = this.#groupedFields(this.#view.value);
         const key = JSON.stringify([set, fields]);
         const summaries = this.#summaries.value;
         untracked(() => {
@@ -1926,9 +3311,9 @@ export class Grid extends AsterElement {
         this.#anchor = { index, delta };
         this.#version.value++;
     }
-    #frozenOffsets(columns, frozen) {
+    #frozenOffsets(columns, frozen, base = 0) {
         const out = [];
-        let left = 0;
+        let left = base;
         for (let i = 0; i < Math.min(frozen, columns.length); i++) {
             out.push(left);
             left += columns[i].width ?? 0;
@@ -1946,7 +3331,7 @@ export class Grid extends AsterElement {
      * doesn't sort until the server can order by the related field.
      */
     #sortable(field) {
-        return !this.#lookups.peek()[field] || this.#sortPaths.peek()[field] !== undefined;
+        return this.#sortRefusal(field) === undefined;
     }
     /**
      * Lookup columns sort by the related record's display field, through the
@@ -1969,15 +3354,22 @@ export class Grid extends AsterElement {
         return paths;
     });
     #sort(field, add) {
-        if (this.#dragged || !this.#sortable(field))
+        if (this.#dragged)
             return;
+        const refusal = this.#sortRefusal(field);
+        if (refusal) {
+            this.#refused.value = refusal;
+            announce(refusal);
+            return;
+        }
+        this.#refused.value = undefined;
         const view = this.#view.peek();
         if (view)
-            this.#setView(sortBy(view, field, add));
+            this.#setView(sortBy(view, field, add && this.#multiSort()));
     }
     /** Drag the right edge of a header; JS writes only the column's width. */
     #resize(e, field) {
-        if (e.button !== 0)
+        if (e.button !== 0 || this.#resizeRefusal(field))
             return;
         e.preventDefault();
         e.stopPropagation();
@@ -1996,6 +3388,12 @@ export class Grid extends AsterElement {
     #dragColumn(e, field) {
         if (e.button !== 0)
             return;
+        const refusal = this.#moveRefusal(field);
+        if (refusal) {
+            this.#refused.value = refusal;
+            announce(refusal);
+            return;
+        }
         const button = e.currentTarget;
         const from = e.clientX;
         this.#dragged = false;
@@ -2037,7 +3435,7 @@ export class Grid extends AsterElement {
     #dragRow(e) {
         const tree = this.#tree;
         const target = e.target;
-        if (!tree || !this.#treeOptions.peek()?.draggable || e.button !== 0 || !this.#editable.peek())
+        if (!tree || !this.#treeOptions.peek()?.draggable || e.button !== 0 || !this.#editEnabled())
             return;
         if (target.closest("button, input, textarea, select, a, [data-editing], .aster-grid-expansion, .aster-grid-controls"))
             return;
@@ -2051,13 +3449,26 @@ export class Grid extends AsterElement {
         let label;
         let over;
         // The node's ancestors from stored records: a drop is refused where its own key is among them.
+        const from = (() => {
+            const parent = tree.entity(key)?.[tree.options.parentField];
+            return parent === null || parent === undefined ? undefined : keyText([parent]);
+        })();
+        const options = this.#treeOptions.peek();
         const why = (to) => {
+            // Structure refuses first; a drop rule is host policy on top.
             for (let k = to; k !== undefined;) {
                 if (k === key)
                     return "A row can’t move under itself or its own subtree.";
                 const parent = tree.entity(k)?.[tree.options.parentField];
                 k = parent === null || parent === undefined ? undefined : keyText([parent]);
             }
+            if (options.reparent === false && to !== from)
+                return "Rows can’t be moved to another parent on this page.";
+            if (options.dropOnLeaves === false && to !== undefined) {
+                const node = tree.rows.peek().find((row) => row.key === to);
+                if (node?.folder === false)
+                    return "A row can’t be dropped on a leaf; drop it on a folder or the top level.";
+            }
             return undefined;
         };
         pressDrag(e, { distance: 6, escape: true, capture: scroll, scroller: () => scroll, inset: () => this.querySelector(".aster-grid-headgroup")?.offsetHeight ?? 0 }, {
@@ -2071,7 +3482,7 @@ export class Grid extends AsterElement {
                 this.toggleAttribute("data-dragging", true);
                 if (touch)
                     this.#lifted.value = key;
-                announce(`Picked up ${title}. Drop it on another row to move it under that row, or on Top level to move it to the top level.`);
+                announce(this.#text("dragPickedUp", { field: title }));
             },
             move: (x, y) => {
                 // Above a finger, where it can be seen (below it near the top); beside a mouse pointer.
@@ -2107,7 +3518,7 @@ export class Grid extends AsterElement {
         const parent = tree.entity(key)?.[tree.options.parentField];
         const from = parent === null || parent === undefined ? undefined : keyText([parent]);
         if (!over || over.to === from) {
-            announce(`${title} not moved.`);
+            announce(this.#text("dragNotMoved", { field: title }));
             return;
         }
         try {
@@ -2126,6 +3537,13 @@ export class Grid extends AsterElement {
         if (e.target.closest("button, input, select, textarea, a[href], [contenteditable], [data-editing]"))
             return;
         const row = e.target.closest('[role="row"][data-index]:not(.aster-grid-group)');
+        const pressed = e.target.closest('[role="gridcell"]');
+        if (row?.dataset.key && pressed && Number(pressed.dataset.col ?? -1) >= 0) {
+            const column = Number(pressed.dataset.col);
+            const target = { key: row.dataset.key, field: this.#visibleColumns(this.#view.peek())[column]?.field, row: Number(row.dataset.index), column, originalEvent: e };
+            if (!this.emit("cell-double-click", target))
+                return;
+        }
         if (row?.dataset.key && !this.emit("row-open", { key: row.dataset.key }))
             return;
         // With expansion, a double-click opens the row rather than editing it in
@@ -2138,11 +3556,11 @@ export class Grid extends AsterElement {
                 void this.collapse(key);
             return;
         }
-        if (!this.#editable.peek() || e.target.closest("[data-editing]"))
+        if (!this.#editEnabled() || e.target.closest("[data-editing]"))
             return;
         const cell = e.target.closest('[role="gridcell"]');
         if (row?.dataset.key)
-            this.#startEdit(row.dataset.key, Number(cell?.getAttribute("aria-colindex") ?? 1) - 1);
+            this.#startEdit(row.dataset.key, Number(cell?.dataset.col ?? 0));
     }
     /**
      * Starts editing a row: an edit model with the grid's rules in a child
@@ -2150,7 +3568,15 @@ export class Grid extends AsterElement {
      * saves first, and stays if it can't.
      */
     async #startEdit(key, col) {
-        if (this.#editing.peek()?.key === key)
+        if (!this.#editEnabled() || this.#editing.peek()?.key === key)
+            return;
+        const columns = this.#visibleColumns(this.#view.peek());
+        const field = columns[col]?.field;
+        const type = this.#collection?.type;
+        // Cell mode edits the pressed cell; a cell that isn't editable starts nothing.
+        if (this.editMode === "cell" && (!field || !this.#fieldEditable(field) || type?.field(field)?.computed))
+            return;
+        if (!this.emit("edit-start", { key, field }, { cancelable: true }))
             return;
         if (!(await this.#endEdit(true)))
             return;
@@ -2162,7 +3588,18 @@ export class Grid extends AsterElement {
         const rules = this.#rules.peek();
         if (scope && Object.keys(rules).length)
             edit.applyRules(scope, `${this.#publish.peek() || "grid"}.row`, rules);
-        this.#editing.value = { key, edit, stop: () => (withdraw?.(), edit.dispose()) };
+        // The draft's values change signal is the single source for cell-change.
+        let before = { ...edit.values.peek() };
+        const stopChanges = effect(() => {
+            const values = edit.values.value;
+            for (const [name, value] of Object.entries(values)) {
+                if (JSON.stringify(value) === JSON.stringify(before[name]))
+                    continue;
+                this.emit("cell-change", { key, field: name, value, previous: before[name] }, { cancelable: false });
+            }
+            before = { ...values };
+        });
+        this.#editing.value = { key, field: field ?? "", column: col, edit, stop: () => (stopChanges(), withdraw?.(), edit.dispose()) };
         requestAnimationFrame(() => this.#focusEditor(key, col));
     }
     #focusEditor(key, col) {
@@ -2170,8 +3607,8 @@ export class Grid extends AsterElement {
         // A user may choose another control before deferred initial focus runs.
         if (row?.contains(document.activeElement))
             return;
-        const cells = row ? [...row.querySelectorAll('[role="gridcell"]')] : [];
-        const target = cells[col]?.querySelector("input:not([readonly]), textarea:not([readonly]), [role=combobox]:not([aria-readonly])") ??
+        const cells = row ? [...row.querySelectorAll('[role="gridcell"][data-col]')] : [];
+        const target = cells.find((cell) => Number(cell.dataset.col) === col)?.querySelector("input:not([readonly]), textarea:not([readonly]), [role=combobox]:not([aria-readonly])") ??
             row?.querySelector("input:not([readonly]), textarea:not([readonly]), [role=combobox]:not([aria-readonly])");
         target?.focus();
         if (target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement)
@@ -2187,8 +3624,22 @@ export class Grid extends AsterElement {
         if (!editing || (only && editing !== only))
             return true;
         if (save && editing.edit.dirty.peek()) {
+            const changes = {};
+            const values = editing.edit.values.peek();
+            const baseline = editing.edit.baseline.peek();
+            for (const [field, value] of Object.entries(values)) {
+                if (JSON.stringify(value) !== JSON.stringify(baseline[field]))
+                    changes[field] = value;
+            }
+            if (!this.emit("edit-save", { key: editing.key, changes }, { cancelable: true }))
+                return false;
             const saved = await editing.edit.save();
             if (!saved) {
+                this.emit("edit-error", {
+                    key: editing.key,
+                    error: editing.edit.formError.peek() ?? "The row couldn’t be saved.",
+                    errors: editing.edit.errors.peek(),
+                }, { cancelable: false });
                 requestAnimationFrame(() => this.querySelector(`.aster-grid-row[data-editing] [aria-invalid="true"]`)?.focus());
                 return false;
             }
@@ -2258,9 +3709,14 @@ export class Grid extends AsterElement {
             return;
         e.preventDefault();
         const index = Number(row.dataset.index);
-        const col = Number(cell.getAttribute("aria-colindex")) - 1;
-        this.#activate(index, col);
-        this.#openRowMenu(index, col, { x: e.clientX, y: e.clientY });
+        const col = Number(cell.dataset.col ?? 0);
+        if (row.dataset.key && col >= 0) {
+            const target = { key: row.dataset.key, field: this.#visibleColumns(this.#view.peek())[col]?.field, row: index, column: col, originalEvent: e };
+            if (!this.emit("cell-context-menu", target))
+                return;
+        }
+        this.#activate(index, Math.max(0, col));
+        this.#openRowMenu(index, Math.max(0, col), { x: e.clientX, y: e.clientY });
     }
     #click(e) {
         const cell = e.target.closest('[role="gridcell"]');
@@ -2270,14 +3726,32 @@ export class Grid extends AsterElement {
         if (e.target.closest("button, input, select, textarea, a[href], [contenteditable], [data-editing]"))
             return;
         const index = Number(row.dataset.index);
-        const item = untracked(() => this.#layout()).at(index);
-        if (item.kind === "row" && item.key !== undefined)
-            this.#choose(item.key, index, e.shiftKey, e.ctrlKey || e.metaKey);
-        this.#activate(index, row.classList.contains("aster-grid-group") ? this.#active.peek().col : Number(cell.getAttribute("aria-colindex")) - 1);
+        const column = Number(cell.dataset.col ?? 0);
+        const field = this.#visibleColumns(this.#view.peek())[column]?.field;
+        const layout = untracked(() => this.#layout());
+        const item = layout.at(index);
+        if (item.kind === "row" && item.key !== undefined && column >= 0) {
+            const target = { key: item.key, field, row: index, column, originalEvent: e };
+            // Both action events fire; either may veto the default.
+            const cellOk = this.emit("cell-click", target);
+            const rowOk = this.emit("row-click", { key: item.key, row: index, originalEvent: e });
+            if (!cellOk || !rowOk)
+                return;
+            // Selection indices are collection-relative; later pages render rows that start mid-collection.
+            this.#choose(item.key, (layout.first ?? 0) + index, e.shiftKey, e.ctrlKey || e.metaKey);
+        }
+        this.#activate(index, row.classList.contains("aster-grid-group") ? this.#active.peek().col : Math.max(0, column));
     }
     #key(e, columns) {
         if (e.target.closest(".aster-grid-filters, .aster-grid-panel, .aster-grid-selection, [data-editing], .aster-grid-group button"))
             return;
+        // Focus can still be on the grid during the frame an edit starts in; Escape ends it all the same.
+        if (e.key === "Escape" && this.#editing.peek()) {
+            e.preventDefault();
+            this.#editing.peek().edit.revert();
+            void this.#endEdit(false, true);
+            return;
+        }
         const layout = untracked(() => this.#layout());
         const count = layout.keys.length;
         const { row, col } = this.#active.peek();
@@ -2297,7 +3771,7 @@ export class Grid extends AsterElement {
         }
         if (e.key === " " && this.#selection.peek() && item.kind === "row" && item.key !== undefined) {
             e.preventDefault();
-            this.#choose(item.key, row, e.shiftKey, this.#selection.peek().multiple);
+            this.#choose(item.key, (layout.first ?? 0) + row, e.shiftKey, this.#selection.peek().multiple);
             return;
         }
         const page = Math.max(1, Math.floor(this.#viewport.peek() / this.#heights.estimate) - 1);
@@ -2308,8 +3782,15 @@ export class Grid extends AsterElement {
                 break;
             case "ArrowUp":
                 if (row === 0) {
-                    e.preventDefault();
-                    this.#active.value = { row: this.#filtersShown() ? FILTER_ROW : HEADER, col };
+                    // Above the first row: the filter row when shown, else the header when it is reachable.
+                    if (this.#filtersShown()) {
+                        e.preventDefault();
+                        this.#active.value = { row: FILTER_ROW, col };
+                    }
+                    else if (this.#headerShown()) {
+                        e.preventDefault();
+                        this.#active.value = { row: HEADER, col };
+                    }
                     return;
                 }
                 next = { row: row - 1, col };
@@ -2336,10 +3817,11 @@ export class Grid extends AsterElement {
             case "F2": {
                 if (item.kind !== "row" || item.key === undefined)
                     return;
-                if (e.key === "F2" && this.#selectable.peek() && this.#selection.peek() && (!this.#editable.peek() || e.shiftKey)) {
+                if (e.key === "F2" && this.#selectionAllowed() && this.#selection.peek() && (!this.#editEnabled() || e.shiftKey)) {
                     e.preventDefault();
                     this.#selectionInside.value = item.key;
-                    queueMicrotask(() => this.querySelector(`.aster-grid-row[data-key="${CSS.escape(item.key)}"] .aster-grid-pick`)?.focus());
+                    const pick = this.#selectionColumnOn() ? ".aster-grid-select input" : ".aster-grid-pick";
+                    queueMicrotask(() => this.querySelector(`.aster-grid-row[data-key="${CSS.escape(item.key)}"] ${pick}`)?.focus());
                     return;
                 }
                 if (e.key === "Enter" && !this.emit("row-open", { key: item.key })) {
@@ -2352,7 +3834,7 @@ export class Grid extends AsterElement {
                     this.expand(item.key);
                     return;
                 }
-                if (!this.#editable.peek())
+                if (!this.#editEnabled())
                     return;
                 e.preventDefault();
                 this.#startEdit(item.key, col);
@@ -2382,27 +3864,89 @@ export class Grid extends AsterElement {
         if (this.#selection.peek() && e.shiftKey && target !== row) {
             const destination = layout.at(target);
             if (destination.kind === "row" && destination.key !== undefined)
-                this.#choose(destination.key, target, true, false);
+                this.#choose(destination.key, (layout.first ?? 0) + target, true, false);
         }
         this.#activate(target, Math.max(0, Math.min(columns - 1, next.col)));
     }
     #sortText(view) {
-        const title = (f) => this.#collection?.type.field(f)?.title ?? f;
-        if (!view.sort.length)
-            return "Not sorted";
-        return `Sorted by ${view.sort.map((k) => `${title(k.field)}, ${k.descending ? "descending" : "ascending"}`).join(", then ")}`;
-    }
-    /** The first column's indent and opener in a tree grid. */
+        const sort = view.sort.filter((key) => this.#sortable(key.field));
+        if (!sort.length)
+            return this.#text("notSorted");
+        const entries = sort.map((key) => this.#text("sortEntry", {
+            field: this.#title(key.field),
+            direction: key.descending ? this.#text("directionDescending") : this.#text("directionAscending"),
+        }));
+        return this.#text("sortedBy", { sorts: entries.join(this.#text("sortSeparator")) });
+    }
+    /** The first column's indent, optional opener and node icon in a tree grid. */
     #treeLead(node) {
+        const options = this.#treeOptions.value;
         const folder = node.folder !== false && node.key !== undefined;
-        return html `<span class="aster-grid-tree" style=${`--level:${node.level - 1}`}>${folder
-            ? html `<button type="button" class="aster-grid-opener" tabindex="-1" aria-hidden="true" ?data-open=${node.open}
-          @pointerdown=${(e) => e.stopPropagation()}
-          @click=${(e) => {
-                e.stopPropagation();
-                void this.#tree?.toggle(node.key);
-            }}><svg viewBox="0 0 10 10"><path d="M3.5 2 6.5 5l-3 3"/></svg></button>`
-            : html `<span class="aster-grid-opener" aria-hidden="true"></span>`}</span>`;
+        const icon = folder ? options?.folderIcon : options?.nodeIcon;
+        const opener = options?.showOpener !== false;
+        return html `<span class="aster-grid-tree" style=${`--level:${node.level - 1}`}>${opener
+            ? folder
+                ? html `<button type="button" class="aster-grid-opener" tabindex="-1" aria-hidden="true" ?data-open=${node.open}
+            @pointerdown=${(e) => e.stopPropagation()}
+            @click=${(e) => {
+                    e.stopPropagation();
+                    void this.#tree?.toggle(node.key);
+                }}><svg viewBox="0 0 10 10"><path d="M3.5 2 6.5 5l-3 3"/></svg></button>`
+                : html `<span class="aster-grid-opener" aria-hidden="true"></span>`
+            : nothing}
+      ${icon ? html `<span class="aster-grid-tree-icon" aria-hidden="true">${icon}</span>` : nothing}</span>`;
+    }
+    /**
+     * Opens the levels a tree loads with: `autoOpen` levels below the top, or
+     * every folder for Expand all. Bounded by `openLimit` and by the first page
+     * of each level.
+     */
+    async #expandLevels(tree, depth, limit) {
+        let opened = 0;
+        let parents = [undefined];
+        for (let level = 0; level < depth && parents.length > 0 && opened < limit; level++) {
+            const next = [];
+            for (const parent of parents) {
+                const collection = tree.level(parent);
+                await collection.ensure(0, collection.pageSize);
+                if (!this.isConnected || this.#tree !== tree)
+                    return opened;
+                for (const key of collection.keys.peek()) {
+                    if (key === undefined || tree.isOpen(key))
+                        continue;
+                    const node = tree.rows.peek().find((row) => row.key === key);
+                    if (node?.folder === false)
+                        continue;
+                    await tree.expand(key);
+                    next.push(key);
+                    if (++opened >= limit)
+                        return opened;
+                }
+            }
+            parents = next;
+        }
+        return opened;
+    }
+    /** Expand all: every folder in the loaded pages, up to `openLimit`. */
+    async #expandAll() {
+        const tree = this.#tree;
+        if (!tree)
+            return;
+        const limit = this.#treeOptions.peek()?.openLimit ?? 200;
+        const opened = await this.#expandLevels(tree, Number.POSITIVE_INFINITY, limit);
+        announce(opened >= limit ? this.#text("foldersLimit", { limit }) : this.#text("foldersOpened"));
+    }
+    #collapseAll() {
+        this.#tree?.setOpen([]);
+        if (this.#tree)
+            announce(this.#text("foldersClosed"));
+    }
+    /** Opens the configured initial depth once, when the tree is built. */
+    #autoOpen(tree, depth) {
+        if (!(depth > 0))
+            return;
+        const limit = this.#treeOptions.peek()?.openLimit ?? 200;
+        void this.#expandLevels(tree, depth, limit).catch(() => { });
     }
     /**
      * → on a closed folder opens it, on an open one goes to its first child;
@@ -2435,7 +3979,15 @@ export class Grid extends AsterElement {
         return true;
     }
     #filtersShown() {
-        return this.#showFilters.peek() || Object.keys(this.#view.peek()?.filters ?? {}).length > 0;
+        const filterRow = this.#chrome.value.filterRow ?? "auto";
+        if (filterRow === false)
+            return false;
+        if (filterRow === true)
+            return true;
+        return this.#showFilters.value || Object.keys(this.#view.value?.filters ?? {}).length > 0;
+    }
+    #headerShown() {
+        return this.#chrome.value.header !== false;
     }
     #groupKey(e, row, col) {
         const grouping = this.#grouping;
@@ -2485,7 +4037,7 @@ export class Grid extends AsterElement {
      * row (Enter or F2 goes into the filter; Escape there comes back).
      */
     #headKey(e, row, col, columns, count) {
-        const field = this.#view.peek().columns.filter((c) => !c.hidden)[col]?.field;
+        const field = this.#visibleColumns(this.#view.peek())[col]?.field;
         const move = (to) => {
             e.preventDefault();
             this.#active.value = { row: to.row, col: Math.max(0, Math.min(columns - 1, to.col)) };
@@ -2500,7 +4052,7 @@ export class Grid extends AsterElement {
             case "End":
                 return move({ row, col: columns - 1 });
             case "ArrowUp":
-                return row === FILTER_ROW ? move({ row: HEADER, col }) : undefined;
+                return row === FILTER_ROW && this.#headerShown() ? move({ row: HEADER, col }) : undefined;
             case "ArrowDown":
                 if (row === HEADER && this.#filtersShown())
                     return move({ row: FILTER_ROW, col });
@@ -2524,7 +4076,7 @@ export class Grid extends AsterElement {
                 return;
             case "F10":
             case "ContextMenu": {
-                if ((e.key === "F10" && !e.shiftKey) || row !== HEADER || !field)
+                if ((e.key === "F10" && !e.shiftKey) || row !== HEADER || !field || !this.showHeaderMenu)
                     return;
                 e.preventDefault();
                 const opener = this.querySelector(`.aster-grid-header[data-field="${CSS.escape(field)}"] .aster-grid-header-menu`);
@@ -2542,7 +4094,7 @@ export class Grid extends AsterElement {
         if (!cell)
             return;
         e.preventDefault();
-        this.#active.value = { row: FILTER_ROW, col: Number(cell.getAttribute("aria-colindex")) - 1 };
+        this.#active.value = { row: FILTER_ROW, col: Number(cell.dataset.col ?? 0) };
         this.querySelector(".aster-grid-scroll")?.focus();
     }
     /** Reveals the active cell; only an owned grid without shared selection chooses its row. */
@@ -2558,7 +4110,7 @@ export class Grid extends AsterElement {
         }
         if (item.kind === "row" && item.key !== undefined) {
             this.#activeKey.value = item.key;
-            if (this.#selectable.peek() && !this.#selection.peek() && !this.#external())
+            if (this.#selectionAllowed() && !this.#selection.peek() && !this.#external())
                 this.#selected.value = item.key;
         }
         else