@mintplayer/ng-spark 22.31.0 → 22.33.0

package/fesm2022/mintplayer-ng-spark-grid.mjs

@@ -3,13 +3,14 @@ import * as i0 from "@angular/core";
 import { ChangeDetectionStrategy, Component, DestroyRef, Directive, Injectable, Injector, TemplateRef, computed, contentChildren, effect, inject, input, linkedSignal, model, output, runInInjectionContext, signal, untracked, viewChild } from "@angular/core";
 import { ShowedOn, confirmationText, defaultQueryActions, filterQueryActions, hasShowedOnFlag, parseSelectionRule, selectionModeFor, valueFor } from "@mintplayer/ng-spark/models";
 import { SPARK_ATTRIBUTE_RENDERERS, cellValue, withDeclaredInputs } from "@mintplayer/ng-spark/renderers";
-import { SPARK_RETURN_URL_STATE_KEY, SparkLanguageService, SparkService, sparkDatatableLabels } from "@mintplayer/ng-spark/services";
+import { SPARK_RETURN_URL_STATE_KEY, SparkLanguageService, SparkLiveService, SparkService, canonicalJson, describeSparkError, sparkDatatableLabels } from "@mintplayer/ng-spark/services";
 import * as i1$1 from "@angular/common";
 import { CommonModule, NgComponentOutlet } from "@angular/common";
+import { HttpErrorResponse } from "@angular/common/http";
 import { toSignal } from "@angular/core/rxjs-interop";
 import * as i2 from "@angular/router";
 import { NavigationEnd, Router, RouterModule } from "@angular/router";
-import { filter, map } from "rxjs";
+import { BehaviorSubject, filter, map } from "rxjs";
 import { Color } from "@mintplayer/ng-bootstrap";
 import { BsAlertComponent } from "@mintplayer/ng-bootstrap/alert";
 import { BsSpinnerComponent } from "@mintplayer/ng-bootstrap/spinner";
@@ -86,7 +87,7 @@ var SparkGridRenderers = class SparkGridRenderers {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkGridRenderers,
 		deps: [],
@@ -94,7 +95,7 @@ var SparkGridRenderers = class SparkGridRenderers {
 	});
 	static ɵprov = i0.ɵɵngDeclareInjectable({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkGridRenderers,
 		providedIn: "root"
@@ -102,7 +103,7 @@ var SparkGridRenderers = class SparkGridRenderers {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: SparkGridRenderers,
 	decorators: [{
@@ -126,7 +127,7 @@ var SparkQueryIconDirective = class SparkQueryIconDirective {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkQueryIconDirective,
 		deps: [],
@@ -134,7 +135,7 @@ var SparkQueryIconDirective = class SparkQueryIconDirective {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: SparkQueryIconDirective,
 		isStandalone: true,
 		selector: "[sparkQueryIcon]",
@@ -150,7 +151,7 @@ var SparkQueryIconDirective = class SparkQueryIconDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: SparkQueryIconDirective,
 	decorators: [{
@@ -177,7 +178,7 @@ var SparkQueryCaptionDirective = class SparkQueryCaptionDirective {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkQueryCaptionDirective,
 		deps: [],
@@ -185,7 +186,7 @@ var SparkQueryCaptionDirective = class SparkQueryCaptionDirective {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: SparkQueryCaptionDirective,
 		isStandalone: true,
 		selector: "[sparkQueryCaption]",
@@ -201,7 +202,7 @@ var SparkQueryCaptionDirective = class SparkQueryCaptionDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: SparkQueryCaptionDirective,
 	decorators: [{
@@ -228,7 +229,7 @@ var SparkQueryActionsDirective = class SparkQueryActionsDirective {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkQueryActionsDirective,
 		deps: [],
@@ -236,7 +237,7 @@ var SparkQueryActionsDirective = class SparkQueryActionsDirective {
 	});
 	static ɵdir = i0.ɵɵngDeclareDirective({
 		minVersion: "17.1.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: SparkQueryActionsDirective,
 		isStandalone: true,
 		selector: "[sparkQueryActions]",
@@ -252,7 +253,7 @@ var SparkQueryActionsDirective = class SparkQueryActionsDirective {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: SparkQueryActionsDirective,
 	decorators: [{
@@ -335,7 +336,7 @@ var SparkGridCellComponent = class SparkGridCellComponent {
 	}, ...ngDevMode ? [{ debugName: "dateValue" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkGridCellComponent,
 		deps: [],
@@ -343,7 +344,7 @@ var SparkGridCellComponent = class SparkGridCellComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: SparkGridCellComponent,
 		isStandalone: true,
 		selector: "spark-grid-cell",
@@ -447,7 +448,7 @@ var SparkGridCellComponent = class SparkGridCellComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: SparkGridCellComponent,
 	decorators: [{
@@ -515,8 +516,74 @@ i0.ɵɵngDeclareClassMetadata({
 		}]
 	}
 });
+const LIVE_GRID_SETTLE_MS = 1e3;
+var LiveGridSession = class {
+	onPush;
+	onError;
+	settleMs;
+	requests = new BehaviorSubject(null);
+	subscription;
+	currentKey = null;
+	latest = null;
+	waiters = [];
+	failed = null;
+	constructor(live, onPush, onError, settleMs = LIVE_GRID_SETTLE_MS) {
+		this.onPush = onPush;
+		this.onError = onError;
+		this.settleMs = settleMs;
+		this.subscription = live.watchQuery(this.requests).subscribe((event) => {
+			if (event.type === "result") {
+				this.latest = event.result;
+				if (this.waiters.length) this.resolveWaiters(event.result);
+				else this.onPush();
+			} else {
+				this.failed = event;
+				this.latest = null;
+				this.resolveWaiters(null);
+				this.onError(event);
+			}
+		});
+	}
+	fetch(request) {
+		if (this.failed) return Promise.resolve(null);
+		const key = canonicalJson(request);
+		if (key === this.currentKey) {
+			if (this.waiters.length === 0 && this.latest) return Promise.resolve(this.latest);
+			return new Promise((resolve) => this.waiters.push(resolve));
+		}
+		const answered = this.currentKey === null || this.latest === null;
+		this.currentKey = key;
+		this.requests.next(request);
+		return new Promise((resolve) => {
+			let timer = null;
+			const waiter = (result) => {
+				if (timer) clearTimeout(timer);
+				resolve(result);
+			};
+			this.waiters.push(waiter);
+			if (!answered) timer = setTimeout(() => this.resolveWaiters(this.latest), this.settleMs);
+		});
+	}
+	dispose() {
+		this.subscription.unsubscribe();
+		this.requests.complete();
+		this.resolveWaiters(null);
+	}
+	resolveWaiters(result) {
+		const waiters = this.waiters;
+		this.waiters = [];
+		for (const waiter of waiters) waiter(result);
+	}
+};
+const LIVE_ERROR_STATUS = {
+	unavailable: 404,
+	invalid: 400,
+	limit: 429,
+	failed: 500
+};
 var SparkQueryGridComponent = class SparkQueryGridComponent {
 	sparkService = inject(SparkService);
+	liveService = inject(SparkLiveService);
 	gridRenderers = inject(SparkGridRenderers);
 	queryRefresh = inject(SparkQueryRefreshService);
 	injector = inject(Injector);
@@ -529,6 +596,13 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 	presetFilters = input([], ...ngDevMode ? [{ debugName: "presetFilters" }] : /* istanbul ignore next */ []);
 	appliedPresetFilters = signal([], ...ngDevMode ? [{ debugName: "appliedPresetFilters" }] : /* istanbul ignore next */ []);
 	data = input(null, ...ngDevMode ? [{ debugName: "data" }] : /* istanbul ignore next */ []);
+	live = input(void 0, ...ngDevMode ? [{ debugName: "live" }] : /* istanbul ignore next */ []);
+	liveFailed = signal(false, ...ngDevMode ? [{ debugName: "liveFailed" }] : /* istanbul ignore next */ []);
+	isLive = computed(() => this.data() === null && this.liveWanted(this.query()) && !this.liveFailed(), ...ngDevMode ? [{ debugName: "isLive" }] : /* istanbul ignore next */ []);
+	liveWanted(query) {
+		if (!query || isVirtualScrollingQuery(query)) return false;
+		return this.live() ?? query.live === true;
+	}
 	search = input("", ...ngDevMode ? [{ debugName: "search" }] : /* istanbul ignore next */ []);
 	columns = input(null, ...ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []);
 	reloadToken = input(null, ...ngDevMode ? [{ debugName: "reloadToken" }] : /* istanbul ignore next */ []);
@@ -846,7 +920,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 	allColumns = computed(() => this.columns() ?? this.fetchedColumns(), ...ngDevMode ? [{ debugName: "allColumns" }] : /* istanbul ignore next */ []);
 	rowActionsColumn = "__sparkRowActions";
 	datatableLabels = computed(() => sparkDatatableLabels(this.lang), ...ngDevMode ? [{ debugName: "datatableLabels" }] : /* istanbul ignore next */ []);
-	hasExternalData = computed(() => this.data() !== null || this.query()?.isStreamingQuery === true, ...ngDevMode ? [{ debugName: "hasExternalData" }] : /* istanbul ignore next */ []);
+	hasExternalData = computed(() => this.data() !== null, ...ngDevMode ? [{ debugName: "hasExternalData" }] : /* istanbul ignore next */ []);
 	isActionEnabled(action) {
 		return this.clientMethods.unavailableReason(action.requiresClient) === null && parseSelectionRule(action.selectionRule)(this.selection().map((r) => r.id).length);
 	}
@@ -929,6 +1003,46 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 				this.onFilterChanged();
 			});
 		});
+		let firstLive = true;
+		effect(() => {
+			this.live();
+			if (firstLive) {
+				firstLive = false;
+				return;
+			}
+			untracked(() => {
+				const query = this.query();
+				if (!query || this.hasExternalData()) return;
+				this.disposeLive();
+				this.fetchFn.set(this.makeFetch(query, this.parentId(), this.parentType()));
+			});
+		});
+		inject(DestroyRef).onDestroy(() => this.disposeLive());
+	}
+	liveSession = null;
+	disposeLive() {
+		this.liveSession?.dispose();
+		this.liveSession = null;
+		this.liveFailed.set(false);
+	}
+	onLivePush() {
+		const datatable = this.datatable();
+		if (datatable && this.fetchFn()) datatable.reload();
+	}
+	onLiveError(error) {
+		this.liveFailed.set(true);
+		this.errorMessage.set(error.code === "unavailable" ? this.lang.t("spark.query.unavailable", "This list is not available.") : error.message || this.lang.t("common.unexpectedError", "An unexpected error occurred"));
+		this.resultCount.set(0);
+		this.loadedIds.set(/* @__PURE__ */ new Set());
+		this.onLivePush();
+		this.error.emit(new HttpErrorResponse({
+			status: LIVE_ERROR_STATUS[error.code] ?? 500,
+			statusText: error.code,
+			error: {
+				error: error.message,
+				code: error.code
+			}
+		}));
 	}
 	reload(options) {
 		if (this.hasExternalData()) return;
@@ -1034,8 +1148,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			this.customActionExecuted.emit({ action });
 			if (action.refreshOnCompleted) this.reload();
 		} catch (e) {
-			const err = e;
-			this.errorMessage.set(err.error?.error || err.message || this.lang.t("common.actionFailed") || "Action failed");
+			this.errorMessage.set(describeSparkError(e, this.lang, e?.message || this.lang.t("common.actionFailed", "Action failed")));
 		}
 	}
 	reportError(err) {
@@ -1043,13 +1156,14 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 		this.error.emit(err);
 	}
 	describe(err) {
-		if (err?.status === 404) return this.lang.t("spark.query.unavailable") || "This list is not available.";
-		return err?.error?.error || err?.message || this.lang.t("common.unexpectedError") || "An unexpected error occurred";
+		if (err?.status === 404) return this.lang.t("spark.query.unavailable", "This list is not available.");
+		return err?.error?.error || err?.message || this.lang.t("common.unexpectedError", "An unexpected error occurred");
 	}
 	async loadData(queryId, parentId, parentType) {
 		this.loading.set(true);
 		this.errorMessage.set(null);
 		this.fetchFn.set(null);
+		this.disposeLive();
 		this.query.set(null);
 		this.entityType.set(null);
 		this.canRead.set(false);
@@ -1079,7 +1193,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 				this.defaultActions.set(defaultQueryActions(actions));
 			} else if (resolvedQuery) console.warn(`[spark] Query '${resolvedQuery.name}' names entity type '${resolvedQuery.entityType ?? resolvedQuery.source}', which resolves to no type in /spark/types; the grid offers no actions and no row links.`);
 			this.settings.set(initialGridSettings(resolvedQuery));
-			if (this.data() === null && !resolvedQuery?.isStreamingQuery) this.fetchFn.set(this.makeFetch(resolvedQuery, parentId, parentType));
+			if (this.data() === null) this.fetchFn.set(this.makeFetch(resolvedQuery, parentId, parentType));
 			this.loadLookupReferenceOptions();
 		} catch (e) {
 			this.fetchFn.set(null);
@@ -1096,7 +1210,10 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 		return entityTypes.find((t) => t.name === sourceName || t.name === singular || t.name + "s" === sourceName || t.clrType?.endsWith(singular)) ?? null;
 	}
 	makeFetch(query, parentId, parentType) {
-		return (req) => this.sparkService.executeQuery(query.id, {
+		return this.liveWanted(query) && this.data() === null ? this.makeLiveFetch(query, parentId, parentType) : this.makeHttpFetch(query, parentId, parentType);
+	}
+	requestFor(req, parentId, parentType) {
+		return {
 			sortColumns: req.sortColumns,
 			skip: (req.page - 1) * req.perPage,
 			take: req.perPage,
@@ -1106,21 +1223,59 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			parentType,
 			...this.effectiveDeleted() ? { deleted: this.effectiveDeleted() } : {},
 			...this.parentDeleted() && parentId && parentType ? { parentDeleted: "include" } : {}
-		}).then((r) => {
-			this.errorMessage.set(null);
-			this.resultCount.set(r.totalItems);
-			this.setFetchedColumns(r.columns ?? []);
-			this.disabledActions.set(r.disabledActions ?? []);
-			const ids = r.items.map((item) => item.id);
-			this.loadedIds.set(this.isVirtualScrolling() ? /* @__PURE__ */ new Set([...this.loadedIds(), ...ids]) : new Set(ids));
-			return {
-				data: r.items,
-				totalRecords: r.totalItems,
-				totalPages: Math.ceil(r.totalItems / req.perPage) || 1,
-				perPage: req.perPage,
-				page: req.page
+		};
+	}
+	toPage(r, req) {
+		this.errorMessage.set(null);
+		this.resultCount.set(r.totalItems);
+		this.setFetchedColumns(r.columns ?? []);
+		this.disabledActions.set(r.disabledActions ?? []);
+		const ids = (r.items ?? []).map((item) => item.id);
+		this.loadedIds.set(this.isVirtualScrolling() ? /* @__PURE__ */ new Set([...this.loadedIds(), ...ids]) : new Set(ids));
+		return {
+			data: r.items ?? [],
+			totalRecords: r.totalItems,
+			totalPages: Math.ceil(r.totalItems / req.perPage) || 1,
+			perPage: req.perPage,
+			page: req.page
+		};
+	}
+	makeLiveFetch(query, parentId, parentType) {
+		const session = this.liveSession ??= new LiveGridSession(this.liveService, () => this.onLivePush(), (e) => this.onLiveError(e));
+		return async (req) => {
+			const options = this.requestFor(req, parentId, parentType);
+			const request = {
+				queryId: query.id,
+				sortColumns: options.sortColumns?.length ? options.sortColumns.map((c) => ({
+					property: c.property,
+					direction: c.direction === "descending" ? "desc" : "asc"
+				})) : void 0,
+				skip: options.skip,
+				take: options.take,
+				search: options.search,
+				columns: options.columns.length ? options.columns : void 0,
+				parentId: options.parentId || void 0,
+				parentType: options.parentType || void 0,
+				deleted: options.deleted,
+				parentDeleted: options.parentDeleted
 			};
-		}).catch((e) => {
+			const result = await session.fetch(request);
+			if (!result) {
+				this.resultCount.set(0);
+				this.loadedIds.set(/* @__PURE__ */ new Set());
+				return {
+					data: [],
+					totalRecords: 0,
+					totalPages: 1,
+					perPage: req.perPage,
+					page: req.page
+				};
+			}
+			return this.toPage(result, req);
+		};
+	}
+	makeHttpFetch(query, parentId, parentType) {
+		return (req) => this.sparkService.executeQuery(query.id, this.requestFor(req, parentId, parentType)).then((r) => this.toPage(r, req)).catch((e) => {
 			this.reportError(e);
 			this.resultCount.set(0);
 			return {
@@ -1149,7 +1304,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkQueryGridComponent,
 		deps: [],
@@ -1157,7 +1312,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: SparkQueryGridComponent,
 		isStandalone: true,
 		selector: "spark-query-grid",
@@ -1197,6 +1352,13 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 				isRequired: false,
 				transformFunction: null
 			},
+			live: {
+				classPropertyName: "live",
+				publicName: "live",
+				isSignal: true,
+				isRequired: false,
+				transformFunction: null
+			},
 			search: {
 				classPropertyName: "search",
 				publicName: "search",
@@ -1277,7 +1439,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 			isSignal: true
 		}],
 		ngImport: i0,
-		template: "<!--\n  Three explicit states, in this order, and the order is load-bearing.\n\n  This template used to open with `@if (query(); as q)` wrapping EVERYTHING, and `query()` is only\n  set after loadData's awaits resolve. Three separate bugs fell out of that one line: the spinner\n  was unreachable on a first load (it rendered inside the gate, while `loading` starts true and\n  `query` starts null), a first-load failure rendered ZERO DOM — no card, no message, nothing to\n  see or report — and a failed RELOAD left the previous query's rows on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the final `@else`\n  always renders something. Do not fold these back into one gate, and do not move the spinner\n  inside the `query()` branch.\n-->\n@if (loading()) {\n  <div class=\"text-center p-3\">\n    <bs-spinner />\n  </div>\n} @else if (query()) {\n  <!-- A page-fetch failure while the grid is already resolved. Without this the catch returns an\n       empty page and a failed query is indistinguishable from one that legitimately has no rows. -->\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  }\n\n  <!--\n    One datatable, two row sources. `[data]` and `[fetch]` are mutually exclusive in\n    ng-bootstrap — binding both makes `[fetch]` win silently — so exactly one is ever non-null\n    here: `fetchFn` is left null whenever `data` is bound. See the class comment for why rows can\n    arrive from outside at all (streaming must not put a websocket in every detail page's bundle).\n  -->\n  <!--\n    The selection bar (#460, M15): the \"N selected\" chip, only while rows are selected, and part\n    of the grid rather than of a host, so the query card and the query-list page show the same\n    thing. There is deliberately no select-all (owner decision, 2026-09-29): with paged, lazy or\n    virtual-scrolled rows it could only tick the rows loaded so far. The selection survives paging\n    (#467, D19), so the chip counts every ticked row — exactly what an action receives — and says how\n    many are on other pages; its ⊗ drops them all, since the header checkbox only sees this page.\n    The bar keeps its height while empty, so ticking the first row does not push the table down\n    under the pointer.\n  -->\n  @if (selectionMode() !== 'none') {\n    <div class=\"spark-selection-bar d-flex align-items-center gap-2 mb-2\" style=\"min-height: 1.5rem\">\n      @if (selection().length) {\n        <bs-badge [type]=\"colors.primary\" class=\"spark-selection-chip\">\n          {{ selection().length }} {{ 'common.selected' | t }}\n          @if (offPageCount()) {\n            <span class=\"spark-selection-off-page\">· {{ offPageCount() }} {{ 'common.onOtherPages' | t }}</span>\n          }\n          <button type=\"button\" class=\"spark-selection-clear\"\n                  [attr.aria-label]=\"'common.clearSelection' | t\" (click)=\"clearSelection()\">\n            <spark-icon name=\"x-circle\" />\n          </button>\n        </bs-badge>\n      }\n    </div>\n  }\n\n  <!-- 'checkbox' (#467, D9): only the checkbox cell selects; a row click opens the row. -->\n  <bs-datatable\n      [selectionMode]=\"selectionMode() === 'multiple' ? 'checkbox' : 'none'\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [distincts]=\"distinctsFn\"\n      [labels]=\"datatableLabels()\"\n      (filterChange)=\"onFilterChange($event)\"\n      (rowClick)=\"onRowClick($event)\"\n      [(settings)]=\"settings\">\n    @for (col of allColumns(); track col.name) {\n      <!--\n        `canSort`/`canFilter` arrive already resolved by the server (query override → attribute →\n        true), so this only spells the polarity. `!== false` is needed for BOTH, for opposite\n        reasons: absent means capable on our wire, while the datatable's own `filterable` defaults\n        to false, unlike `sortable`.\n\n        ⚠️ `filterActive` and `filterSummary` are deliberately NOT bound. Any *bsDatatableColumn\n        input change recomputes the column set, which retires the live filter view — while the web\n        component's mount-once guard leaves the panel's nodes in place and never re-renders them.\n        Binding them to state our own panel mutates would freeze the panel the instant a value is\n        ticked, until it is closed and reopened. The cost is that a filtered column carries no\n        visual marker yet, which is worth far less than a panel that dies on first use. See #431 F7.\n      -->\n      <div *bsDatatableColumn=\"col.name; sortable: col.canSort !== false; filterable: col.canFilter !== false; label: (col.label | resolveTranslation) || col.name\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\n\n        @if (col.canFilter !== false) {\n          <ng-container *bsDatatableFilterPanel=\"let values; let ctx = ctx\">\n            <spark-column-filter-panel\n              [column]=\"col\"\n              [values]=\"values()\"\n              [ctx]=\"ctx\"\n              [filterLabel]=\"filterLabelFor(col)\" />\n          </ng-container>\n        }\n      </div>\n    }\n    <!--\n      The per-row ⋮ menu's column: no header, never sorted or filtered.\n\n      ⚠️ Only once the data columns exist. Those ship WITH the first page, so the rows reach the\n      datatable one render before the column templates do. The datatable sizes its columns ONCE,\n      from the first render that has both columns and rows, then switches to `table-layout: fixed`\n      and never measures again. If this column were already registered it would be the only one\n      measured; the data columns would share what it left over equally, and at phone width their\n      unclipped headers ran into each other. With no column at all the datatable waits.\n    -->\n    @if (rowActions().length && allColumns().length) {\n      <div *bsDatatableColumn=\"rowActionsColumn; sortable: false; filterable: false; resizable: false; label: 'common.actions' | t\">\n        <span class=\"visually-hidden\">{{ 'common.actions' | t }}</span>\n      </div>\n    }\n\n    <ng-container *bsRowTemplate=\"let item\">\n      @let row = $any(item);\n      @for (col of allColumns(); track col.name; let first = $first) {\n        <td>\n          @if (row) {\n            <!-- The first column links to the row's detail page. Two things about this are\n                 routinely misread:\n\n                 1. `cellContent` is projected INSIDE the anchor, so a custom `renderer` does NOT\n                    suppress this link — a renderer that emits its own <a> produces nested anchors\n                    (invalid HTML) rather than replacing this one.\n                 2. `canRead()` is the whole gate, and it is the rights model: `Query` without\n                    `Read` lists the rows and withholds the link. Withhold `Read` for a query\n                    whose rows no detail page can load — a Custom.* query that fabricates rows in\n                    memory, say.\n                 3. `rowRoute` replaces the DESTINATION only, never the gate: returning a route\n                    from it cannot make a row clickable that `canRead()` withheld, and returning\n                    null from it suppresses the link for that one row. -->\n            @if (first && canRead() && rowRouteFor(row); as route) {\n              <a [routerLink]=\"route\" [queryParams]=\"rowQueryParams()\" [state]=\"rowLinkState()\"\n                 (click)=\"rowClicked.emit(row)\">\n                <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n              </a>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n            }\n          } @else {\n            &nbsp;\n          }\n        </td>\n      }\n      @if (rowActions().length) {\n        <!-- The row menu: every action whose rule accepts one row, run on THIS row only. The\n             checkbox selection is left alone (runRowAction never reads or writes it). -->\n        <td class=\"spark-row-actions text-end\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n          @if (row) {\n            <button type=\"button\" cdkOverlayOrigin #rowMenuOrigin=\"cdkOverlayOrigin\" #rowMenuToggle\n                    class=\"btn btn-sm btn-link spark-row-menu-toggle\"\n                    aria-haspopup=\"menu\" [attr.aria-expanded]=\"openRowMenu() === row.id\"\n                    [attr.aria-label]=\"'common.actions' | t\" (click)=\"toggleRowMenu(row)\">\n              <spark-icon name=\"three-dots-vertical\" />\n            </button>\n            <ng-template cdkConnectedOverlay\n                         [cdkConnectedOverlayOrigin]=\"rowMenuOrigin\"\n                         [cdkConnectedOverlayOpen]=\"openRowMenu() === row.id\"\n                         [cdkConnectedOverlayPositions]=\"rowMenuPositions\"\n                         (overlayOutsideClick)=\"onRowMenuOutsideClick($event, rowMenuToggle, row.id)\"\n                         (overlayKeydown)=\"$event.key === 'Escape' && closeRowMenu(row.id)\"\n                         (detach)=\"closeRowMenu(row.id)\">\n              <bs-dropdown-menu class=\"spark-row-menu\">\n                @for (action of rowActions(); track action.name) {\n                  @let unavailable = actionUnavailableReason(action.definition);\n                  <li bsDropdownItem class=\"spark-row-action\" [attr.data-action]=\"action.name\"\n                      [class.disabled]=\"unavailable !== null\" [attr.aria-disabled]=\"unavailable !== null ? 'true' : null\"\n                      [attr.title]=\"unavailable\"\n                      (click)=\"chooseRowAction(action, row)\">\n                    {{ action.definition.label | resolveTranslation }}\n                  </li>\n                }\n              </bs-dropdown-menu>\n            </ng-template>\n          }\n        </td>\n      }\n    </ng-container>\n  </bs-datatable>\n} @else {\n  <!-- The query could not be resolved. Rendering something keeps the host's layout intact and,\n       crucially, makes the failure visible: this branch used to render nothing at all. -->\n  <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n    {{ errorMessage() || ('spark.query.unavailable' | t) }}\n  </bs-alert>\n}\n\n<ng-template #cellContent let-item let-col=\"col\">\n  <!--\n    Presentation lives in <spark-grid-cell>, shared with the AsDetail table on the PO detail page.\n    Value resolution stays here: a query row is a PersistentObject with an attribute list, and the\n    AsDetail table's rows are plain dictionaries, so only the rendering is common.\n\n    `link` is deliberately not passed. The first-column link is the grid's own rule and wraps this\n    template from outside; setting both would nest anchors.\n  -->\n  <spark-grid-cell\n      [column]=\"col\"\n      [display]=\"(col | queryCellValue:item:lookupReferenceOptions())\"\n      [rendererValue]=\"rendererValueFor(item, col)\"\n      [item]=\"item\"\n      [chips]=\"(col | queryReferenceChips:item)\" />\n</ng-template>\n",
+		template: "<!--\n  Three explicit states, in this order, and the order is load-bearing.\n\n  This template used to open with `@if (query(); as q)` wrapping EVERYTHING, and `query()` is only\n  set after loadData's awaits resolve. Three separate bugs fell out of that one line: the spinner\n  was unreachable on a first load (it rendered inside the gate, while `loading` starts true and\n  `query` starts null), a first-load failure rendered ZERO DOM — no card, no message, nothing to\n  see or report — and a failed RELOAD left the previous query's rows on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the final `@else`\n  always renders something. Do not fold these back into one gate, and do not move the spinner\n  inside the `query()` branch.\n-->\n@if (loading()) {\n  <div class=\"text-center p-3\">\n    <bs-spinner />\n  </div>\n} @else if (query()) {\n  <!-- A page-fetch failure while the grid is already resolved. Without this the catch returns an\n       empty page and a failed query is indistinguishable from one that legitimately has no rows. -->\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  }\n\n  <!--\n    One datatable, two row sources. `[data]` and `[fetch]` are mutually exclusive in\n    ng-bootstrap — binding both makes `[fetch]` win silently — so exactly one is ever non-null\n    here: `fetchFn` is left null whenever `data` is bound. A live grid still uses `[fetch]`: its pages\n    come from /spark/live instead of /execute (see the class comment).\n  -->\n  <!--\n    The selection bar (#460, M15): the \"N selected\" chip, only while rows are selected, and part\n    of the grid rather than of a host, so the query card and the query-list page show the same\n    thing. There is deliberately no select-all (owner decision, 2026-09-29): with paged, lazy or\n    virtual-scrolled rows it could only tick the rows loaded so far. The selection survives paging\n    (#467, D19), so the chip counts every ticked row — exactly what an action receives — and says how\n    many are on other pages; its ⊗ drops them all, since the header checkbox only sees this page.\n    The bar keeps its height while empty, so ticking the first row does not push the table down\n    under the pointer.\n  -->\n  @if (selectionMode() !== 'none') {\n    <div class=\"spark-selection-bar d-flex align-items-center gap-2 mb-2\" style=\"min-height: 1.5rem\">\n      @if (selection().length) {\n        <bs-badge [type]=\"colors.primary\" class=\"spark-selection-chip\">\n          {{ selection().length }} {{ 'common.selected' | t }}\n          @if (offPageCount()) {\n            <span class=\"spark-selection-off-page\">· {{ offPageCount() }} {{ 'common.onOtherPages' | t }}</span>\n          }\n          <button type=\"button\" class=\"spark-selection-clear\"\n                  [attr.aria-label]=\"'common.clearSelection' | t\" (click)=\"clearSelection()\">\n            <spark-icon name=\"x-circle\" />\n          </button>\n        </bs-badge>\n      }\n    </div>\n  }\n\n  <!-- 'checkbox' (#467, D9): only the checkbox cell selects; a row click opens the row. -->\n  <bs-datatable\n      [selectionMode]=\"selectionMode() === 'multiple' ? 'checkbox' : 'none'\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [distincts]=\"distinctsFn\"\n      [labels]=\"datatableLabels()\"\n      (filterChange)=\"onFilterChange($event)\"\n      (rowClick)=\"onRowClick($event)\"\n      [(settings)]=\"settings\">\n    @for (col of allColumns(); track col.name) {\n      <!--\n        `canSort`/`canFilter` arrive already resolved by the server (query override → attribute →\n        true), so this only spells the polarity. `!== false` is needed for BOTH, for opposite\n        reasons: absent means capable on our wire, while the datatable's own `filterable` defaults\n        to false, unlike `sortable`.\n\n        ⚠️ `filterActive` and `filterSummary` are deliberately NOT bound. Any *bsDatatableColumn\n        input change recomputes the column set, which retires the live filter view — while the web\n        component's mount-once guard leaves the panel's nodes in place and never re-renders them.\n        Binding them to state our own panel mutates would freeze the panel the instant a value is\n        ticked, until it is closed and reopened. The cost is that a filtered column carries no\n        visual marker yet, which is worth far less than a panel that dies on first use. See #431 F7.\n      -->\n      <div *bsDatatableColumn=\"col.name; sortable: col.canSort !== false; filterable: col.canFilter !== false; label: (col.label | resolveTranslation) || col.name\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\n\n        @if (col.canFilter !== false) {\n          <ng-container *bsDatatableFilterPanel=\"let values; let ctx = ctx\">\n            <spark-column-filter-panel\n              [column]=\"col\"\n              [values]=\"values()\"\n              [ctx]=\"ctx\"\n              [filterLabel]=\"filterLabelFor(col)\" />\n          </ng-container>\n        }\n      </div>\n    }\n    <!--\n      The per-row ⋮ menu's column: no header, never sorted or filtered.\n\n      ⚠️ Only once the data columns exist. Those ship WITH the first page, so the rows reach the\n      datatable one render before the column templates do. The datatable sizes its columns ONCE,\n      from the first render that has both columns and rows, then switches to `table-layout: fixed`\n      and never measures again. If this column were already registered it would be the only one\n      measured; the data columns would share what it left over equally, and at phone width their\n      unclipped headers ran into each other. With no column at all the datatable waits.\n    -->\n    @if (rowActions().length && allColumns().length) {\n      <div *bsDatatableColumn=\"rowActionsColumn; sortable: false; filterable: false; resizable: false; label: 'common.actions' | t\">\n        <span class=\"visually-hidden\">{{ 'common.actions' | t }}</span>\n      </div>\n    }\n\n    <ng-container *bsRowTemplate=\"let item\">\n      @let row = $any(item);\n      @for (col of allColumns(); track col.name; let first = $first) {\n        <td>\n          @if (row) {\n            <!-- The first column links to the row's detail page. Two things about this are\n                 routinely misread:\n\n                 1. `cellContent` is projected INSIDE the anchor, so a custom `renderer` does NOT\n                    suppress this link — a renderer that emits its own <a> produces nested anchors\n                    (invalid HTML) rather than replacing this one.\n                 2. `canRead()` is the whole gate, and it is the rights model: `Query` without\n                    `Read` lists the rows and withholds the link. Withhold `Read` for a query\n                    whose rows no detail page can load — a Custom.* query that fabricates rows in\n                    memory, say.\n                 3. `rowRoute` replaces the DESTINATION only, never the gate: returning a route\n                    from it cannot make a row clickable that `canRead()` withheld, and returning\n                    null from it suppresses the link for that one row. -->\n            @if (first && canRead() && rowRouteFor(row); as route) {\n              <a [routerLink]=\"route\" [queryParams]=\"rowQueryParams()\" [state]=\"rowLinkState()\"\n                 (click)=\"rowClicked.emit(row)\">\n                <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n              </a>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n            }\n          } @else {\n            &nbsp;\n          }\n        </td>\n      }\n      @if (rowActions().length) {\n        <!-- The row menu: every action whose rule accepts one row, run on THIS row only. The\n             checkbox selection is left alone (runRowAction never reads or writes it). -->\n        <td class=\"spark-row-actions text-end\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n          @if (row) {\n            <button type=\"button\" cdkOverlayOrigin #rowMenuOrigin=\"cdkOverlayOrigin\" #rowMenuToggle\n                    class=\"btn btn-sm btn-link spark-row-menu-toggle\"\n                    aria-haspopup=\"menu\" [attr.aria-expanded]=\"openRowMenu() === row.id\"\n                    [attr.aria-label]=\"'common.actions' | t\" (click)=\"toggleRowMenu(row)\">\n              <spark-icon name=\"three-dots-vertical\" />\n            </button>\n            <ng-template cdkConnectedOverlay\n                         [cdkConnectedOverlayOrigin]=\"rowMenuOrigin\"\n                         [cdkConnectedOverlayOpen]=\"openRowMenu() === row.id\"\n                         [cdkConnectedOverlayPositions]=\"rowMenuPositions\"\n                         (overlayOutsideClick)=\"onRowMenuOutsideClick($event, rowMenuToggle, row.id)\"\n                         (overlayKeydown)=\"$event.key === 'Escape' && closeRowMenu(row.id)\"\n                         (detach)=\"closeRowMenu(row.id)\">\n              <bs-dropdown-menu class=\"spark-row-menu\">\n                @for (action of rowActions(); track action.name) {\n                  @let unavailable = actionUnavailableReason(action.definition);\n                  <li bsDropdownItem class=\"spark-row-action\" [attr.data-action]=\"action.name\"\n                      [class.disabled]=\"unavailable !== null\" [attr.aria-disabled]=\"unavailable !== null ? 'true' : null\"\n                      [attr.title]=\"unavailable\"\n                      (click)=\"chooseRowAction(action, row)\">\n                    {{ action.definition.label | resolveTranslation }}\n                  </li>\n                }\n              </bs-dropdown-menu>\n            </ng-template>\n          }\n        </td>\n      }\n    </ng-container>\n  </bs-datatable>\n} @else {\n  <!-- The query could not be resolved. Rendering something keeps the host's layout intact and,\n       crucially, makes the failure visible: this branch used to render nothing at all. -->\n  <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n    {{ errorMessage() || ('spark.query.unavailable' | t) }}\n  </bs-alert>\n}\n\n<ng-template #cellContent let-item let-col=\"col\">\n  <!--\n    Presentation lives in <spark-grid-cell>, shared with the AsDetail table on the PO detail page.\n    Value resolution stays here: a query row is a PersistentObject with an attribute list, and the\n    AsDetail table's rows are plain dictionaries, so only the rendering is common.\n\n    `link` is deliberately not passed. The first-column link is the grid's own rule and wraps this\n    template from outside; setting both would nest anchors.\n  -->\n  <spark-grid-cell\n      [column]=\"col\"\n      [display]=\"(col | queryCellValue:item:lookupReferenceOptions())\"\n      [rendererValue]=\"rendererValueFor(item, col)\"\n      [item]=\"item\"\n      [chips]=\"(col | queryReferenceChips:item)\" />\n</ng-template>\n",
 		styles: [":host ::ng-deep tbody tr[data-selected=true] a:not(.btn),:host ::ng-deep tbody tr[data-selected=true] .spark-row-menu-toggle{color:var(--mp-datatable-row-selected-color)}:host ::ng-deep tbody tr[data-selected=true] .spark-row-menu-toggle{--bs-btn-color: var(--mp-datatable-row-selected-color);--bs-btn-hover-color: var(--mp-datatable-row-selected-color);--bs-btn-active-color: var(--mp-datatable-row-selected-color)}\n"],
 		dependencies: [
 			{
@@ -1539,7 +1701,7 @@ var SparkQueryGridComponent = class SparkQueryGridComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: SparkQueryGridComponent,
 	decorators: [{
@@ -1570,7 +1732,7 @@ i0.ɵɵngDeclareClassMetadata({
 				SparkIconComponent
 			],
 			changeDetection: ChangeDetectionStrategy.OnPush,
-			template: "<!--\n  Three explicit states, in this order, and the order is load-bearing.\n\n  This template used to open with `@if (query(); as q)` wrapping EVERYTHING, and `query()` is only\n  set after loadData's awaits resolve. Three separate bugs fell out of that one line: the spinner\n  was unreachable on a first load (it rendered inside the gate, while `loading` starts true and\n  `query` starts null), a first-load failure rendered ZERO DOM — no card, no message, nothing to\n  see or report — and a failed RELOAD left the previous query's rows on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the final `@else`\n  always renders something. Do not fold these back into one gate, and do not move the spinner\n  inside the `query()` branch.\n-->\n@if (loading()) {\n  <div class=\"text-center p-3\">\n    <bs-spinner />\n  </div>\n} @else if (query()) {\n  <!-- A page-fetch failure while the grid is already resolved. Without this the catch returns an\n       empty page and a failed query is indistinguishable from one that legitimately has no rows. -->\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  }\n\n  <!--\n    One datatable, two row sources. `[data]` and `[fetch]` are mutually exclusive in\n    ng-bootstrap — binding both makes `[fetch]` win silently — so exactly one is ever non-null\n    here: `fetchFn` is left null whenever `data` is bound. See the class comment for why rows can\n    arrive from outside at all (streaming must not put a websocket in every detail page's bundle).\n  -->\n  <!--\n    The selection bar (#460, M15): the \"N selected\" chip, only while rows are selected, and part\n    of the grid rather than of a host, so the query card and the query-list page show the same\n    thing. There is deliberately no select-all (owner decision, 2026-09-29): with paged, lazy or\n    virtual-scrolled rows it could only tick the rows loaded so far. The selection survives paging\n    (#467, D19), so the chip counts every ticked row — exactly what an action receives — and says how\n    many are on other pages; its ⊗ drops them all, since the header checkbox only sees this page.\n    The bar keeps its height while empty, so ticking the first row does not push the table down\n    under the pointer.\n  -->\n  @if (selectionMode() !== 'none') {\n    <div class=\"spark-selection-bar d-flex align-items-center gap-2 mb-2\" style=\"min-height: 1.5rem\">\n      @if (selection().length) {\n        <bs-badge [type]=\"colors.primary\" class=\"spark-selection-chip\">\n          {{ selection().length }} {{ 'common.selected' | t }}\n          @if (offPageCount()) {\n            <span class=\"spark-selection-off-page\">· {{ offPageCount() }} {{ 'common.onOtherPages' | t }}</span>\n          }\n          <button type=\"button\" class=\"spark-selection-clear\"\n                  [attr.aria-label]=\"'common.clearSelection' | t\" (click)=\"clearSelection()\">\n            <spark-icon name=\"x-circle\" />\n          </button>\n        </bs-badge>\n      }\n    </div>\n  }\n\n  <!-- 'checkbox' (#467, D9): only the checkbox cell selects; a row click opens the row. -->\n  <bs-datatable\n      [selectionMode]=\"selectionMode() === 'multiple' ? 'checkbox' : 'none'\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [distincts]=\"distinctsFn\"\n      [labels]=\"datatableLabels()\"\n      (filterChange)=\"onFilterChange($event)\"\n      (rowClick)=\"onRowClick($event)\"\n      [(settings)]=\"settings\">\n    @for (col of allColumns(); track col.name) {\n      <!--\n        `canSort`/`canFilter` arrive already resolved by the server (query override → attribute →\n        true), so this only spells the polarity. `!== false` is needed for BOTH, for opposite\n        reasons: absent means capable on our wire, while the datatable's own `filterable` defaults\n        to false, unlike `sortable`.\n\n        ⚠️ `filterActive` and `filterSummary` are deliberately NOT bound. Any *bsDatatableColumn\n        input change recomputes the column set, which retires the live filter view — while the web\n        component's mount-once guard leaves the panel's nodes in place and never re-renders them.\n        Binding them to state our own panel mutates would freeze the panel the instant a value is\n        ticked, until it is closed and reopened. The cost is that a filtered column carries no\n        visual marker yet, which is worth far less than a panel that dies on first use. See #431 F7.\n      -->\n      <div *bsDatatableColumn=\"col.name; sortable: col.canSort !== false; filterable: col.canFilter !== false; label: (col.label | resolveTranslation) || col.name\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\n\n        @if (col.canFilter !== false) {\n          <ng-container *bsDatatableFilterPanel=\"let values; let ctx = ctx\">\n            <spark-column-filter-panel\n              [column]=\"col\"\n              [values]=\"values()\"\n              [ctx]=\"ctx\"\n              [filterLabel]=\"filterLabelFor(col)\" />\n          </ng-container>\n        }\n      </div>\n    }\n    <!--\n      The per-row ⋮ menu's column: no header, never sorted or filtered.\n\n      ⚠️ Only once the data columns exist. Those ship WITH the first page, so the rows reach the\n      datatable one render before the column templates do. The datatable sizes its columns ONCE,\n      from the first render that has both columns and rows, then switches to `table-layout: fixed`\n      and never measures again. If this column were already registered it would be the only one\n      measured; the data columns would share what it left over equally, and at phone width their\n      unclipped headers ran into each other. With no column at all the datatable waits.\n    -->\n    @if (rowActions().length && allColumns().length) {\n      <div *bsDatatableColumn=\"rowActionsColumn; sortable: false; filterable: false; resizable: false; label: 'common.actions' | t\">\n        <span class=\"visually-hidden\">{{ 'common.actions' | t }}</span>\n      </div>\n    }\n\n    <ng-container *bsRowTemplate=\"let item\">\n      @let row = $any(item);\n      @for (col of allColumns(); track col.name; let first = $first) {\n        <td>\n          @if (row) {\n            <!-- The first column links to the row's detail page. Two things about this are\n                 routinely misread:\n\n                 1. `cellContent` is projected INSIDE the anchor, so a custom `renderer` does NOT\n                    suppress this link — a renderer that emits its own <a> produces nested anchors\n                    (invalid HTML) rather than replacing this one.\n                 2. `canRead()` is the whole gate, and it is the rights model: `Query` without\n                    `Read` lists the rows and withholds the link. Withhold `Read` for a query\n                    whose rows no detail page can load — a Custom.* query that fabricates rows in\n                    memory, say.\n                 3. `rowRoute` replaces the DESTINATION only, never the gate: returning a route\n                    from it cannot make a row clickable that `canRead()` withheld, and returning\n                    null from it suppresses the link for that one row. -->\n            @if (first && canRead() && rowRouteFor(row); as route) {\n              <a [routerLink]=\"route\" [queryParams]=\"rowQueryParams()\" [state]=\"rowLinkState()\"\n                 (click)=\"rowClicked.emit(row)\">\n                <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n              </a>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n            }\n          } @else {\n            &nbsp;\n          }\n        </td>\n      }\n      @if (rowActions().length) {\n        <!-- The row menu: every action whose rule accepts one row, run on THIS row only. The\n             checkbox selection is left alone (runRowAction never reads or writes it). -->\n        <td class=\"spark-row-actions text-end\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n          @if (row) {\n            <button type=\"button\" cdkOverlayOrigin #rowMenuOrigin=\"cdkOverlayOrigin\" #rowMenuToggle\n                    class=\"btn btn-sm btn-link spark-row-menu-toggle\"\n                    aria-haspopup=\"menu\" [attr.aria-expanded]=\"openRowMenu() === row.id\"\n                    [attr.aria-label]=\"'common.actions' | t\" (click)=\"toggleRowMenu(row)\">\n              <spark-icon name=\"three-dots-vertical\" />\n            </button>\n            <ng-template cdkConnectedOverlay\n                         [cdkConnectedOverlayOrigin]=\"rowMenuOrigin\"\n                         [cdkConnectedOverlayOpen]=\"openRowMenu() === row.id\"\n                         [cdkConnectedOverlayPositions]=\"rowMenuPositions\"\n                         (overlayOutsideClick)=\"onRowMenuOutsideClick($event, rowMenuToggle, row.id)\"\n                         (overlayKeydown)=\"$event.key === 'Escape' && closeRowMenu(row.id)\"\n                         (detach)=\"closeRowMenu(row.id)\">\n              <bs-dropdown-menu class=\"spark-row-menu\">\n                @for (action of rowActions(); track action.name) {\n                  @let unavailable = actionUnavailableReason(action.definition);\n                  <li bsDropdownItem class=\"spark-row-action\" [attr.data-action]=\"action.name\"\n                      [class.disabled]=\"unavailable !== null\" [attr.aria-disabled]=\"unavailable !== null ? 'true' : null\"\n                      [attr.title]=\"unavailable\"\n                      (click)=\"chooseRowAction(action, row)\">\n                    {{ action.definition.label | resolveTranslation }}\n                  </li>\n                }\n              </bs-dropdown-menu>\n            </ng-template>\n          }\n        </td>\n      }\n    </ng-container>\n  </bs-datatable>\n} @else {\n  <!-- The query could not be resolved. Rendering something keeps the host's layout intact and,\n       crucially, makes the failure visible: this branch used to render nothing at all. -->\n  <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n    {{ errorMessage() || ('spark.query.unavailable' | t) }}\n  </bs-alert>\n}\n\n<ng-template #cellContent let-item let-col=\"col\">\n  <!--\n    Presentation lives in <spark-grid-cell>, shared with the AsDetail table on the PO detail page.\n    Value resolution stays here: a query row is a PersistentObject with an attribute list, and the\n    AsDetail table's rows are plain dictionaries, so only the rendering is common.\n\n    `link` is deliberately not passed. The first-column link is the grid's own rule and wraps this\n    template from outside; setting both would nest anchors.\n  -->\n  <spark-grid-cell\n      [column]=\"col\"\n      [display]=\"(col | queryCellValue:item:lookupReferenceOptions())\"\n      [rendererValue]=\"rendererValueFor(item, col)\"\n      [item]=\"item\"\n      [chips]=\"(col | queryReferenceChips:item)\" />\n</ng-template>\n",
+			template: "<!--\n  Three explicit states, in this order, and the order is load-bearing.\n\n  This template used to open with `@if (query(); as q)` wrapping EVERYTHING, and `query()` is only\n  set after loadData's awaits resolve. Three separate bugs fell out of that one line: the spinner\n  was unreachable on a first load (it rendered inside the gate, while `loading` starts true and\n  `query` starts null), a first-load failure rendered ZERO DOM — no card, no message, nothing to\n  see or report — and a failed RELOAD left the previous query's rows on screen.\n\n  So: `loading` is checked first and outside any dependency on `query`, and the final `@else`\n  always renders something. Do not fold these back into one gate, and do not move the spinner\n  inside the `query()` branch.\n-->\n@if (loading()) {\n  <div class=\"text-center p-3\">\n    <bs-spinner />\n  </div>\n} @else if (query()) {\n  <!-- A page-fetch failure while the grid is already resolved. Without this the catch returns an\n       empty page and a failed query is indistinguishable from one that legitimately has no rows. -->\n  @if (errorMessage(); as err) {\n    <bs-alert [type]=\"colors.danger\" class=\"mb-3\">\n      {{ err }}\n    </bs-alert>\n  }\n\n  <!--\n    One datatable, two row sources. `[data]` and `[fetch]` are mutually exclusive in\n    ng-bootstrap — binding both makes `[fetch]` win silently — so exactly one is ever non-null\n    here: `fetchFn` is left null whenever `data` is bound. A live grid still uses `[fetch]`: its pages\n    come from /spark/live instead of /execute (see the class comment).\n  -->\n  <!--\n    The selection bar (#460, M15): the \"N selected\" chip, only while rows are selected, and part\n    of the grid rather than of a host, so the query card and the query-list page show the same\n    thing. There is deliberately no select-all (owner decision, 2026-09-29): with paged, lazy or\n    virtual-scrolled rows it could only tick the rows loaded so far. The selection survives paging\n    (#467, D19), so the chip counts every ticked row — exactly what an action receives — and says how\n    many are on other pages; its ⊗ drops them all, since the header checkbox only sees this page.\n    The bar keeps its height while empty, so ticking the first row does not push the table down\n    under the pointer.\n  -->\n  @if (selectionMode() !== 'none') {\n    <div class=\"spark-selection-bar d-flex align-items-center gap-2 mb-2\" style=\"min-height: 1.5rem\">\n      @if (selection().length) {\n        <bs-badge [type]=\"colors.primary\" class=\"spark-selection-chip\">\n          {{ selection().length }} {{ 'common.selected' | t }}\n          @if (offPageCount()) {\n            <span class=\"spark-selection-off-page\">· {{ offPageCount() }} {{ 'common.onOtherPages' | t }}</span>\n          }\n          <button type=\"button\" class=\"spark-selection-clear\"\n                  [attr.aria-label]=\"'common.clearSelection' | t\" (click)=\"clearSelection()\">\n            <spark-icon name=\"x-circle\" />\n          </button>\n        </bs-badge>\n      }\n    </div>\n  }\n\n  <!-- 'checkbox' (#467, D9): only the checkbox cell selects; a row click opens the row. -->\n  <bs-datatable\n      [selectionMode]=\"selectionMode() === 'multiple' ? 'checkbox' : 'none'\"\n      [(selection)]=\"selection\"\n      [virtualScroll]=\"isVirtualScrolling()\"\n      [itemSize]=\"40\"\n      [isResponsive]=\"isVirtualScrolling()\"\n      [data]=\"data()\"\n      [fetch]=\"fetchFn()\"\n      [distincts]=\"distinctsFn\"\n      [labels]=\"datatableLabels()\"\n      (filterChange)=\"onFilterChange($event)\"\n      (rowClick)=\"onRowClick($event)\"\n      [(settings)]=\"settings\">\n    @for (col of allColumns(); track col.name) {\n      <!--\n        `canSort`/`canFilter` arrive already resolved by the server (query override → attribute →\n        true), so this only spells the polarity. `!== false` is needed for BOTH, for opposite\n        reasons: absent means capable on our wire, while the datatable's own `filterable` defaults\n        to false, unlike `sortable`.\n\n        ⚠️ `filterActive` and `filterSummary` are deliberately NOT bound. Any *bsDatatableColumn\n        input change recomputes the column set, which retires the live filter view — while the web\n        component's mount-once guard leaves the panel's nodes in place and never re-renders them.\n        Binding them to state our own panel mutates would freeze the panel the instant a value is\n        ticked, until it is closed and reopened. The cost is that a filtered column carries no\n        visual marker yet, which is worth far less than a panel that dies on first use. See #431 F7.\n      -->\n      <div *bsDatatableColumn=\"col.name; sortable: col.canSort !== false; filterable: col.canFilter !== false; label: (col.label | resolveTranslation) || col.name\">\n        {{ (col.label | resolveTranslation) || col.name }}\n        <spark-attribute-description [description]=\"col.description\" />\n\n        @if (col.canFilter !== false) {\n          <ng-container *bsDatatableFilterPanel=\"let values; let ctx = ctx\">\n            <spark-column-filter-panel\n              [column]=\"col\"\n              [values]=\"values()\"\n              [ctx]=\"ctx\"\n              [filterLabel]=\"filterLabelFor(col)\" />\n          </ng-container>\n        }\n      </div>\n    }\n    <!--\n      The per-row ⋮ menu's column: no header, never sorted or filtered.\n\n      ⚠️ Only once the data columns exist. Those ship WITH the first page, so the rows reach the\n      datatable one render before the column templates do. The datatable sizes its columns ONCE,\n      from the first render that has both columns and rows, then switches to `table-layout: fixed`\n      and never measures again. If this column were already registered it would be the only one\n      measured; the data columns would share what it left over equally, and at phone width their\n      unclipped headers ran into each other. With no column at all the datatable waits.\n    -->\n    @if (rowActions().length && allColumns().length) {\n      <div *bsDatatableColumn=\"rowActionsColumn; sortable: false; filterable: false; resizable: false; label: 'common.actions' | t\">\n        <span class=\"visually-hidden\">{{ 'common.actions' | t }}</span>\n      </div>\n    }\n\n    <ng-container *bsRowTemplate=\"let item\">\n      @let row = $any(item);\n      @for (col of allColumns(); track col.name; let first = $first) {\n        <td>\n          @if (row) {\n            <!-- The first column links to the row's detail page. Two things about this are\n                 routinely misread:\n\n                 1. `cellContent` is projected INSIDE the anchor, so a custom `renderer` does NOT\n                    suppress this link — a renderer that emits its own <a> produces nested anchors\n                    (invalid HTML) rather than replacing this one.\n                 2. `canRead()` is the whole gate, and it is the rights model: `Query` without\n                    `Read` lists the rows and withholds the link. Withhold `Read` for a query\n                    whose rows no detail page can load — a Custom.* query that fabricates rows in\n                    memory, say.\n                 3. `rowRoute` replaces the DESTINATION only, never the gate: returning a route\n                    from it cannot make a row clickable that `canRead()` withheld, and returning\n                    null from it suppresses the link for that one row. -->\n            @if (first && canRead() && rowRouteFor(row); as route) {\n              <a [routerLink]=\"route\" [queryParams]=\"rowQueryParams()\" [state]=\"rowLinkState()\"\n                 (click)=\"rowClicked.emit(row)\">\n                <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n              </a>\n            } @else {\n              <ng-container *ngTemplateOutlet=\"cellContent; context: { $implicit: row, col: col }\"></ng-container>\n            }\n          } @else {\n            &nbsp;\n          }\n        </td>\n      }\n      @if (rowActions().length) {\n        <!-- The row menu: every action whose rule accepts one row, run on THIS row only. The\n             checkbox selection is left alone (runRowAction never reads or writes it). -->\n        <td class=\"spark-row-actions text-end\" (click)=\"$event.stopPropagation()\" (dblclick)=\"$event.stopPropagation()\">\n          @if (row) {\n            <button type=\"button\" cdkOverlayOrigin #rowMenuOrigin=\"cdkOverlayOrigin\" #rowMenuToggle\n                    class=\"btn btn-sm btn-link spark-row-menu-toggle\"\n                    aria-haspopup=\"menu\" [attr.aria-expanded]=\"openRowMenu() === row.id\"\n                    [attr.aria-label]=\"'common.actions' | t\" (click)=\"toggleRowMenu(row)\">\n              <spark-icon name=\"three-dots-vertical\" />\n            </button>\n            <ng-template cdkConnectedOverlay\n                         [cdkConnectedOverlayOrigin]=\"rowMenuOrigin\"\n                         [cdkConnectedOverlayOpen]=\"openRowMenu() === row.id\"\n                         [cdkConnectedOverlayPositions]=\"rowMenuPositions\"\n                         (overlayOutsideClick)=\"onRowMenuOutsideClick($event, rowMenuToggle, row.id)\"\n                         (overlayKeydown)=\"$event.key === 'Escape' && closeRowMenu(row.id)\"\n                         (detach)=\"closeRowMenu(row.id)\">\n              <bs-dropdown-menu class=\"spark-row-menu\">\n                @for (action of rowActions(); track action.name) {\n                  @let unavailable = actionUnavailableReason(action.definition);\n                  <li bsDropdownItem class=\"spark-row-action\" [attr.data-action]=\"action.name\"\n                      [class.disabled]=\"unavailable !== null\" [attr.aria-disabled]=\"unavailable !== null ? 'true' : null\"\n                      [attr.title]=\"unavailable\"\n                      (click)=\"chooseRowAction(action, row)\">\n                    {{ action.definition.label | resolveTranslation }}\n                  </li>\n                }\n              </bs-dropdown-menu>\n            </ng-template>\n          }\n        </td>\n      }\n    </ng-container>\n  </bs-datatable>\n} @else {\n  <!-- The query could not be resolved. Rendering something keeps the host's layout intact and,\n       crucially, makes the failure visible: this branch used to render nothing at all. -->\n  <bs-alert [type]=\"colors.danger\" class=\"mb-0\">\n    {{ errorMessage() || ('spark.query.unavailable' | t) }}\n  </bs-alert>\n}\n\n<ng-template #cellContent let-item let-col=\"col\">\n  <!--\n    Presentation lives in <spark-grid-cell>, shared with the AsDetail table on the PO detail page.\n    Value resolution stays here: a query row is a PersistentObject with an attribute list, and the\n    AsDetail table's rows are plain dictionaries, so only the rendering is common.\n\n    `link` is deliberately not passed. The first-column link is the grid's own rule and wraps this\n    template from outside; setting both would nest anchors.\n  -->\n  <spark-grid-cell\n      [column]=\"col\"\n      [display]=\"(col | queryCellValue:item:lookupReferenceOptions())\"\n      [rendererValue]=\"rendererValueFor(item, col)\"\n      [item]=\"item\"\n      [chips]=\"(col | queryReferenceChips:item)\" />\n</ng-template>\n",
 			styles: [":host ::ng-deep tbody tr[data-selected=true] a:not(.btn),:host ::ng-deep tbody tr[data-selected=true] .spark-row-menu-toggle{color:var(--mp-datatable-row-selected-color)}:host ::ng-deep tbody tr[data-selected=true] .spark-row-menu-toggle{--bs-btn-color: var(--mp-datatable-row-selected-color);--bs-btn-hover-color: var(--mp-datatable-row-selected-color);--bs-btn-active-color: var(--mp-datatable-row-selected-color)}\n"]
 		}]
 	}],
@@ -1616,6 +1778,14 @@ i0.ɵɵngDeclareClassMetadata({
 				required: false
 			}]
 		}],
+		live: [{
+			type: i0.Input,
+			args: [{
+				isSignal: true,
+				alias: "live",
+				required: false
+			}]
+		}],
 		search: [{
 			type: i0.Input,
 			args: [{
@@ -1790,7 +1960,7 @@ var SparkSearchBoxComponent = class SparkSearchBoxComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkSearchBoxComponent,
 		deps: [],
@@ -1798,7 +1968,7 @@ var SparkSearchBoxComponent = class SparkSearchBoxComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: SparkSearchBoxComponent,
 		isStandalone: true,
 		selector: "spark-search-box",
@@ -1918,7 +2088,7 @@ var SparkSearchBoxComponent = class SparkSearchBoxComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: SparkSearchBoxComponent,
 	decorators: [{
@@ -2045,7 +2215,7 @@ var SparkQueryCardComponent = class SparkQueryCardComponent {
 	selection = computed(() => this.grid()?.selection() ?? [], ...ngDevMode ? [{ debugName: "selection" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		ngImport: i0,
 		type: SparkQueryCardComponent,
 		deps: [],
@@ -2053,7 +2223,7 @@ var SparkQueryCardComponent = class SparkQueryCardComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.2",
 		type: SparkQueryCardComponent,
 		isStandalone: true,
 		selector: "spark-query-card",
@@ -2246,6 +2416,7 @@ var SparkQueryCardComponent = class SparkQueryCardComponent {
 					"parentType",
 					"presetFilters",
 					"data",
+					"live",
 					"search",
 					"columns",
 					"reloadToken",
@@ -2293,7 +2464,7 @@ var SparkQueryCardComponent = class SparkQueryCardComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.2",
 	ngImport: i0,
 	type: SparkQueryCardComponent,
 	decorators: [{