pict-section-recordset 1.9.6 → 1.10.0

package/source/views/list/RecordSet-List.js

@@ -8,6 +8,7 @@ const viewRecordList = require('./RecordSet-List-RecordList.js');
 const viewRecordListHeader = require('./RecordSet-List-RecordListHeader.js');
 const viewRecordListEntry = require('./RecordSet-List-RecordListEntry.js');
 const viewPaginationBottom = require('./RecordSet-List-PaginationBottom.js');
+const viewColumnChooser = require('./RecordSet-List-ColumnChooser.js');
 
 /** @type {Record<string, any>} */
 const _DEFAULT_CONFIGURATION__List = (
@@ -32,10 +33,18 @@ const _DEFAULT_CONFIGURATION__List = (
 		AutoSolveOrdinal: 0,
 
 		CSS: /*css*/`
-	.prsp-list-loading { display: flex; align-items: center; justify-content: center; min-height: 240px; width: 100%; }
-	.prsp-list-loading-inner { display: inline-flex; align-items: center; gap: 0.6em; color: var(--theme-color-text-muted, #64748b); font-size: 1.05rem; }
+	.prsp-list-loading { width: 100%; padding: 0.25rem 0 0.5rem; }
+	.prsp-list-loading-inner { display: inline-flex; align-items: center; gap: 0.55em; color: var(--theme-color-text-muted, #64748b); font-size: 1rem; padding: 0.5rem 0.25rem 0.7rem; }
 	.prsp-list-spinner { display: inline-flex; animation: prsp-list-spin 0.9s linear infinite; }
 	@keyframes prsp-list-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
+	/* Skeleton ghost rows: a few light, theme-colored bars that fill the loading area so the preserved
+	   row height doesn't read as a white void. A bottom fade blends the last rows into the page. */
+	.prsp-list-skeleton { position: relative; animation: prsp-list-skeleton-pulse 1.8s ease-in-out infinite; }
+	@keyframes prsp-list-skeleton-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.7; } }
+	.prsp-list-skeleton-row { height: 2.6rem; margin: 0 0 0.7rem; border-radius: 8px; background: var(--theme-color-background-tertiary, #eceef2); }
+	.prsp-list-skeleton-row:nth-child(4n) { width: 94%; }
+	.prsp-list-skeleton-row:nth-child(5n) { width: 97%; }
+	.prsp-list-skeleton-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 4.5rem; background: linear-gradient(to bottom, transparent, var(--theme-color-background-primary, #fff)); pointer-events: none; }
 	`,
 		CSSPriority: 500,
 
@@ -51,6 +60,7 @@ const _DEFAULT_CONFIGURATION__List = (
 		<section id="PRSP_Filters_Container">
 			{~FV:PRSP-Filters:List~}
 		</section>
+		<div id="PRSP_ColumnChooser_Container">{~V:PRSP-List-ColumnChooser~}</div>
 		<div id="PRSP_PaginationTop_Container">{~V:PRSP-List-PaginationTop~}</div>
 		<div id="PRSP_RecordList_Container">{~V:PRSP-List-RecordList~}</div>
 		<div id="PRSP_PaginationBottom_Container">{~V:PRSP-List-PaginationBottom~}</div>
@@ -67,13 +77,21 @@ const _DEFAULT_CONFIGURATION__List = (
 				{
 					Hash: 'PRSP-List-LoadingShell',
 					Template: /*html*/`
-	<section id="PRSP_List_Loading" class="prsp-list-loading">
+	<div id="PRSP_List_Loading" class="prsp-list-loading">
 		<div class="prsp-list-loading-inner">
 			<span class="prsp-list-spinner" aria-hidden="true">{~I:Refresh~}</span>
 			<span class="prsp-list-loading-label">Loading…</span>
 		</div>
-	</section>
+		<div class="prsp-list-skeleton" aria-hidden="true">
+			{~TS:PRSP-List-Skeleton-Row:Record.SkeletonRows~}
+			<div class="prsp-list-skeleton-fade"></div>
+		</div>
+	</div>
 	`
+				},
+				{
+					Hash: 'PRSP-List-Skeleton-Row',
+					Template: /*html*/`<div class="prsp-list-skeleton-row"></div>`
 				}
 			],
 
@@ -104,13 +122,20 @@ class viewRecordSetList extends libPictRecordSetRecordView
 			recordList: null,
 			recordListHeader: null,
 			recordListEntry: null,
-			paginationBottom: null
+			paginationBottom: null,
+			columnChooser: null
 		};
 
 		// Identity (`RecordSet::FilterString::FilterExperience`) of the list currently painted into the DOM.
 		// When a route only changes the page (Offset/PageSize) and this still matches, we re-render just the
 		// rows + pagination instead of the whole view — see handleRecordSetListRoute / _paintRecordList.
 		this._renderedListIdentity = null;
+
+		// The last fully-composed list data (carrying the pristine ColumnCandidates) and the arguments of
+		// the last render call — together they let a column-visibility toggle repaint the rows from data
+		// already in hand (or, when a Lite fetch is missing the column, rerun the same render to refetch).
+		this._lastRecordListData = null;
+		this._lastListRenderArgs = null;
 	}
 
 	handleRecordSetListRoute(pRoutePayload)
@@ -195,19 +220,27 @@ class viewRecordSetList extends libPictRecordSetRecordView
 			const tmpRowsElements = this.pict.ContentAssignment.getElement('#PRSP_RecordList_Container');
 			const tmpRowsContainerPresent = tmpRowsElements.length > 0;
 			const tmpDestination = tmpRowsContainerPresent ? '#PRSP_RecordList_Container' : pRecordListData.RenderDestination;
+			// Fill roughly the visible viewport with ghost rows (each skeleton row occupies ~53px), capped to
+			// the preserved height so a short list doesn't over-fill, and clamped to a sane range.
+			const tmpViewportHeight = (typeof window !== 'undefined' && window.innerHeight) ? window.innerHeight : 800;
+			let tmpFillHeight = tmpViewportHeight + 200;
 			if (tmpRowsContainerPresent)
 			{
-				// Pin the rows area to its current height before swapping in the (short) spinner, so the page
-				// doesn't collapse and yank the content below it — pagination, the page's footer/colored fill —
-				// up into the fold and back. The floor is released once the real rows render (see _paintRecordList).
+				// Pin the rows area to its current height before swapping in the spinner, so the page doesn't
+				// collapse and yank the content below it — pagination, the page's footer/colored fill — up into
+				// the fold and back. The floor is released once the real rows render (see _paintRecordList).
 				const tmpCurrentHeight = tmpRowsElements[0].offsetHeight;
 				if (tmpCurrentHeight > 0)
 				{
 					tmpRowsElements[0].style.minHeight = `${ tmpCurrentHeight }px`;
+					tmpFillHeight = Math.min(tmpCurrentHeight, tmpFillHeight);
 				}
 			}
+			const tmpSkeletonRowCount = Math.max(6, Math.min(60, Math.ceil(tmpFillHeight / 53)));
 			this.pict.CSSMap.injectCSS();
-			this.pict.ContentAssignment.assignContent(tmpDestination, this.pict.parseTemplateByHash('PRSP-List-LoadingShell', pRecordListData));
+			// Render the spinner + enough skeleton ghost rows to fill the visible area (so no white void shows).
+			const tmpLoadingShellData = { SkeletonRows: new Array(tmpSkeletonRowCount).fill(0) };
+			this.pict.ContentAssignment.assignContent(tmpDestination, this.pict.parseTemplateByHash('PRSP-List-LoadingShell', tmpLoadingShellData));
 		}
 		catch (pError)
 		{
@@ -216,13 +249,19 @@ class viewRecordSetList extends libPictRecordSetRecordView
 		}
 	}
 
-	dynamicallyGenerateColumns(pRecordListData)
+	/**
+	 * The schema columns that never become list columns automatically: the entity's own
+	 * identity pair plus the audit stamps. (Hosts that want one of these in the column
+	 * chooser declare it as a curated column, optionally with DefaultHidden.)
+	 *
+	 * @param {string} pEntity - The entity name (for the ID/GUID identity columns)
+	 * @return {Array<string>} The excluded column names.
+	 */
+	_getExcludedSchemaColumns(pEntity)
 	{
-		pRecordListData.TableCells = [];
-		const tmpEntity = pRecordListData.RecordSetConfiguration.Entity;
-		this.excludedByDefaultCells = [
-			'ID' + tmpEntity,
-			'GUID' + tmpEntity,
+		return [
+			'ID' + pEntity,
+			'GUID' + pEntity,
 			'CreateDate',
 			'CreatingIDUser',
 			'DeleteDate',
@@ -231,6 +270,13 @@ class viewRecordSetList extends libPictRecordSetRecordView
 			'UpdateDate',
 			'UpdatingIDUser',
 		];
+	}
+
+	dynamicallyGenerateColumns(pRecordListData)
+	{
+		pRecordListData.TableCells = [];
+		const tmpEntity = pRecordListData.RecordSetConfiguration.Entity;
+		this.excludedByDefaultCells = this._getExcludedSchemaColumns(tmpEntity);
 
 		const tmpSchema = pRecordListData.RecordSchema;
 		const tmpProperties = tmpSchema?.properties;
@@ -255,6 +301,190 @@ class viewRecordSetList extends libPictRecordSetRecordView
 		return pRecordListData;
 	}
 
+	/**
+	 * Map column name -> Meadow column Type from the entity schema, when available. The schema
+	 * endpoint nests the canonical column array at MeadowSchema.MeadowSchema.Schema (with a
+	 * legacy flat MeadowSchema.Schema fallback). Returns null when neither is present (e.g.
+	 * non-Meadow providers) so callers can skip type-based exclusions.
+	 *
+	 * @param {Record<string, any>} pRecordSchema - The schema from getRecordSchema()
+	 * @return {Record<string, string>|null} Column name -> Type map, or null.
+	 */
+	_getMeadowColumnTypes(pRecordSchema)
+	{
+		const tmpSchemaColumns = pRecordSchema?.MeadowSchema?.MeadowSchema?.Schema || pRecordSchema?.MeadowSchema?.Schema;
+		if (!Array.isArray(tmpSchemaColumns) || tmpSchemaColumns.length < 1)
+		{
+			return null;
+		}
+		/** @type {Record<string, string>} */
+		const tmpColumnTypes = {};
+		for (const tmpColumn of tmpSchemaColumns)
+		{
+			if (tmpColumn && tmpColumn.Column)
+			{
+				tmpColumnTypes[tmpColumn.Column] = tmpColumn.Type;
+			}
+		}
+		return tmpColumnTypes;
+	}
+
+	/**
+	 * Whether a column candidate is effectively visible: an explicit user override wins,
+	 * otherwise the candidate's default (visible unless DefaultHidden).
+	 *
+	 * @param {Record<string, any>} pCandidate - A ColumnCandidates entry
+	 * @param {Record<string, boolean>} pOverrides - The per-recordset override map
+	 * @return {boolean}
+	 */
+	_effectiveColumnVisibility(pCandidate, pOverrides)
+	{
+		if (pOverrides && (pCandidate.Key in pOverrides))
+		{
+			return (pOverrides[pCandidate.Key] === true);
+		}
+		return (pCandidate.DefaultHidden !== true);
+	}
+
+	/**
+	 * Compute the visible TableCells for a paint from the pristine candidate list + the user's
+	 * current overrides. Cells are per-paint shallow copies so host hooks can mutate them without
+	 * bleeding into the candidates. An override set that hides everything falls back to the
+	 * default-visible set (a fully empty table is a confusing dead end).
+	 *
+	 * @param {Array<Record<string, any>>} pCandidates - The pristine ColumnCandidates
+	 * @param {string} pRecordSet - The record set (for the override lookup)
+	 * @return {Array<Record<string, any>>} The visible cells, in candidate order.
+	 */
+	_computeVisibleTableCells(pCandidates, pRecordSet)
+	{
+		const tmpColumnProvider = this.pict.providers.ColumnDataProvider;
+		const tmpOverrides = tmpColumnProvider ? tmpColumnProvider.getColumnVisibilityOverrides(pRecordSet, 'List') : {};
+		let tmpVisibleCells = pCandidates
+			.filter((pCandidate) => this._effectiveColumnVisibility(pCandidate, tmpOverrides))
+			.map((pCell) => Object.assign({}, pCell));
+		if (tmpVisibleCells.length < 1)
+		{
+			this.log.warn(`RecordSetList: column visibility overrides for [${pRecordSet}] hid every column; rendering the default-visible set instead.`);
+			tmpVisibleCells = pCandidates
+				.filter((pCandidate) => pCandidate.DefaultHidden !== true)
+				.map((pCell) => Object.assign({}, pCell));
+		}
+		return tmpVisibleCells;
+	}
+
+	/**
+	 * Compose the column-chooser candidate pool and reduce TableCells to the visible subset.
+	 *
+	 * No-op unless the recordset opts in with RecordSetListColumnChooser: true — the flag off
+	 * leaves TableCells exactly as the existing paths computed it (including the manifest's
+	 * shared array reference).
+	 *
+	 * Candidates are two tiers, in order:
+	 *  - Curated: the host-declared columns (manifest Descriptors or RecordSetListColumns),
+	 *    shallow-copied (the shared manifest TableCells entries are never mutated), default
+	 *    visible unless the column/descriptor declares DefaultHidden: true.
+	 *  - Schema: remaining scalar entity columns (identity/audit fields and blob Text/JSON
+	 *    columns excluded), default hidden, rendered via the generic ProcessCell template
+	 *    (entity-reference ID* columns resolve names exactly like dynamic columns do).
+	 *
+	 * The pristine candidates ride on pRecordListData.ColumnCandidates (module-owned — host
+	 * hooks must not mutate it); TableCells becomes per-paint copies of the visible subset.
+	 *
+	 * @param {Record<string, any>} pRecordListData - The list data (TableCells already computed)
+	 * @return {Record<string, any>} The same list data, candidates composed.
+	 */
+	_composeColumnCandidates(pRecordListData)
+	{
+		// Always an array (empty = render nothing): a missing address would make the chooser
+		// button's {~TS:~} iterate the record object's own keys instead of rendering nothing.
+		pRecordListData.ColumnChooserSlot = [];
+		const tmpConfig = pRecordListData.RecordSetConfiguration;
+		if (!tmpConfig || tmpConfig.RecordSetListColumnChooser !== true)
+		{
+			return pRecordListData;
+		}
+
+		// Curated tier: shallow copies of whatever the host declared, flagged with source + default.
+		const tmpCandidates = (pRecordListData.TableCells || []).map((pCell) =>
+			Object.assign({}, pCell, { Source: 'Curated', DefaultHidden: (pCell.DefaultHidden === true) }));
+		const tmpCuratedKeys = {};
+		for (const tmpCell of tmpCandidates)
+		{
+			tmpCuratedKeys[tmpCell.Key] = true;
+		}
+
+		// Schema tier: every remaining scalar entity column, default hidden.
+		const tmpExcludedColumns = this._getExcludedSchemaColumns(tmpConfig.Entity);
+		const tmpProperties = pRecordListData.RecordSchema?.properties;
+		const tmpMeadowColumnTypes = this._getMeadowColumnTypes(pRecordListData.RecordSchema);
+		const tmpBlobTypes = { 'Text': true, 'JSON': true };
+		const tmpSchemaCandidates = [];
+		for (const tmpColumn in tmpProperties)
+		{
+			if (!tmpProperties.hasOwnProperty(tmpColumn) || tmpCuratedKeys[tmpColumn] || tmpExcludedColumns.includes(tmpColumn))
+			{
+				continue;
+			}
+			// When the Meadow schema is available, only offer real non-blob columns — a JSON-schema-only
+			// property is not fetchable by a Lite projection, and blob columns are why Lite exists.
+			if (tmpMeadowColumnTypes && (!(tmpColumn in tmpMeadowColumnTypes) || tmpBlobTypes[tmpMeadowColumnTypes[tmpColumn]]))
+			{
+				continue;
+			}
+			tmpSchemaCandidates.push(
+				{
+					Key: tmpColumn,
+					DisplayName: tmpProperties[tmpColumn].title || tmpColumn,
+					ManifestHash: 'Default',
+					PictDashboard: { ValueTemplate: '{~ProcessCell:Record.Data.Key~}' },
+					Source: 'Schema',
+					DefaultHidden: true,
+				});
+		}
+		tmpSchemaCandidates.sort((pA, pB) => String(pA.DisplayName).localeCompare(String(pB.DisplayName)));
+
+		// Audit tier: the identity pair + audit stamps, with friendly labels, trailing the schema
+		// tier. Default hidden; the create/update/delete user references resolve names via the same
+		// ProcessCell path as any other entity-reference column. (Pair with the show-deleted filter
+		// — RecordSetListShowDeletedFilter — to make the three Deleted* columns meaningful.)
+		const tmpAuditColumnLabels =
+		{
+			[`ID${tmpConfig.Entity}`]: 'ID',
+			[`GUID${tmpConfig.Entity}`]: 'GUID',
+			'CreateDate': 'Created',
+			'CreatingIDUser': 'Created by',
+			'UpdateDate': 'Updated',
+			'UpdatingIDUser': 'Updated by',
+			'Deleted': 'Deleted',
+			'DeleteDate': 'Deleted on',
+			'DeletingIDUser': 'Deleted by',
+		};
+		const tmpAuditCandidates = [];
+		for (const tmpColumn of Object.keys(tmpAuditColumnLabels))
+		{
+			if (!tmpProperties || !tmpProperties.hasOwnProperty(tmpColumn) || tmpCuratedKeys[tmpColumn])
+			{
+				continue;
+			}
+			tmpAuditCandidates.push(
+				{
+					Key: tmpColumn,
+					DisplayName: tmpAuditColumnLabels[tmpColumn],
+					ManifestHash: 'Default',
+					PictDashboard: { ValueTemplate: '{~ProcessCell:Record.Data.Key~}' },
+					Source: 'Audit',
+					DefaultHidden: true,
+				});
+		}
+
+		pRecordListData.ColumnCandidates = tmpCandidates.concat(tmpSchemaCandidates, tmpAuditCandidates);
+		pRecordListData.TableCells = this._computeVisibleTableCells(pRecordListData.ColumnCandidates, pRecordListData.RecordSet);
+		// One-or-zero-element array driving the chooser button render (the {~TS:~} conditional trick).
+		pRecordListData.ColumnChooserSlot = [ { RecordSet: pRecordListData.RecordSet } ];
+		return pRecordListData;
+	}
+
 	/**
 	 * @param {Record<string, any>} pRecordSetConfiguration
 	 * @param {string} pProviderHash
@@ -275,6 +505,10 @@ class viewRecordSetList extends libPictRecordSetRecordView
 			return;
 		}
 
+		// Remember how this list was rendered so a column-visibility change can rerun the exact same
+		// render (the manifest delegation below overwrites this with its own, which is what we want).
+		this._lastListRenderArgs = { Method: 'renderList', Args: [ pRecordSetConfiguration, pProviderHash, pFilterString, pSerializedFilterExperience, pOffset, pPageSize ] };
+
 		if (pRecordSetConfiguration.RecordSetListManifestOnly)
 		{
 			const tmpManifestHash = pRecordSetConfiguration.RecordSetListDefaultManifest || pRecordSetConfiguration.RecordSetListManifests?.[0];
@@ -502,6 +736,8 @@ class viewRecordSetList extends libPictRecordSetRecordView
 		{
 			this.dynamicallyGenerateColumns(tmpRecordListData);
 		}
+		this._composeColumnCandidates(tmpRecordListData);
+		this._lastRecordListData = tmpRecordListData;
 		tmpRecordListData = this.onBeforeRenderList(tmpRecordListData);
 
 		this._paintRecordList(tmpRecordListData, pBodyOnly);
@@ -533,6 +769,11 @@ class viewRecordSetList extends libPictRecordSetRecordView
 			return;
 		}
 
+		// Remember how this list was rendered so a column-visibility change can rerun the exact same
+		// render. When renderList delegated here this overwrite wins — a rerun skips re-resolving the
+		// manifest — and hosts that call renderListFromManifest directly are covered the same way.
+		this._lastListRenderArgs = { Method: 'renderListFromManifest', Args: [ pManifest, pRecordSetConfiguration, pProviderHash, pFilterString, pSerializedFilterExperience, pOffset, pPageSize ] };
+
 		let tmpTitle = pRecordSetConfiguration.Title || pRecordSetConfiguration.RecordSet;
 		if (pManifest && pManifest.TitleTemplate)
 		{
@@ -750,6 +991,8 @@ class viewRecordSetList extends libPictRecordSetRecordView
 			}
 		}
 
+		this._composeColumnCandidates(tmpRecordListData);
+		this._lastRecordListData = tmpRecordListData;
 		tmpRecordListData = this.onBeforeRenderList(tmpRecordListData);
 
 		this.pict.providers.DynamicRecordsetSolver.solveDashboard(pManifest, tmpRecordListData.Records.Records);
@@ -815,6 +1058,136 @@ class viewRecordSetList extends libPictRecordSetRecordView
 			}.bind(this));
 	}
 
+	/**
+	 * Set a column's visibility for the currently rendered list (called by the column chooser).
+	 *
+	 * Persists the override, then repaints the rows + pagination body-only from the data already
+	 * in hand — except when a Lite-fetched list is showing a schema-tier column whose values were
+	 * never fetched, in which case the same render is rerun so the provider widens the projection.
+	 *
+	 * @param {string} pRecordSet - The record set the column belongs to (stale-chooser guard)
+	 * @param {string} pKey - The column key
+	 * @param {boolean} pVisible - Whether the column should be visible
+	 * @return {boolean} The column's resulting visibility.
+	 */
+	setColumnVisibility(pRecordSet, pKey, pVisible)
+	{
+		const tmpListData = this._lastRecordListData;
+		if (!tmpListData || tmpListData.RecordSet !== pRecordSet || !Array.isArray(tmpListData.ColumnCandidates))
+		{
+			this.log.warn(`RecordSetList: setColumnVisibility for [${pRecordSet}.${pKey}] ignored — that list is not the one currently rendered.`);
+			return false;
+		}
+		const tmpCandidate = tmpListData.ColumnCandidates.find((pCandidate) => pCandidate.Key === pKey);
+		if (!tmpCandidate)
+		{
+			this.log.warn(`RecordSetList: setColumnVisibility for unknown column [${pKey}] on [${pRecordSet}] ignored.`);
+			return false;
+		}
+		const tmpColumnProvider = this.pict.providers.ColumnDataProvider;
+		if (!tmpColumnProvider)
+		{
+			return this._effectiveColumnVisibility(tmpCandidate, {});
+		}
+		// Keep at least one column visible — an all-hidden table is a confusing dead end.
+		if (pVisible !== true)
+		{
+			const tmpOverrides = tmpColumnProvider.getColumnVisibilityOverrides(pRecordSet, 'List');
+			const tmpVisibleCount = tmpListData.ColumnCandidates.filter((pCandidate) => this._effectiveColumnVisibility(pCandidate, tmpOverrides)).length;
+			if ((tmpVisibleCount <= 1) && this._effectiveColumnVisibility(tmpCandidate, tmpOverrides))
+			{
+				this.log.warn(`RecordSetList: refusing to hide the last visible column [${pKey}] on [${pRecordSet}].`);
+				return true;
+			}
+		}
+		tmpColumnProvider.setColumnVisibilityOverride(pRecordSet, 'List', pKey, (pVisible === true));
+
+		// Lite projections omit unrequested columns entirely, so a newly shown schema- or audit-tier
+		// column with no data in the fetched records needs one refetch (the provider reads the override
+		// map at fetch time and widens the projection). Curated/manifest columns are always fetched or
+		// solved, and schema/audit keys are flat — a first-record key check is sound. (The identity pair,
+		// CreatingIDUser, and UpdateDate ride free in every Lite record, so they pass the key check.)
+		const tmpRecords = (tmpListData.Records && Array.isArray(tmpListData.Records.Records)) ? tmpListData.Records.Records : [];
+		const tmpNeedsRefetch = (pVisible === true)
+			&& (tmpCandidate.Source !== 'Curated')
+			&& (tmpListData.RecordSetConfiguration && tmpListData.RecordSetConfiguration.RecordSetListLiteFetch === true)
+			&& (tmpRecords.length > 0)
+			&& !(pKey in tmpRecords[0]);
+		if (tmpNeedsRefetch)
+		{
+			this._rerunLastListRender();
+		}
+		else
+		{
+			this._repaintWithColumnState();
+		}
+		return (pVisible === true);
+	}
+
+	/**
+	 * Clear every column-visibility override for the currently rendered list and repaint with the
+	 * defaults (called by the column chooser's Reset). Never needs a refetch: resetting only
+	 * restores curated columns (always fetched) and hides schema extras.
+	 *
+	 * @param {string} pRecordSet - The record set to reset (stale-chooser guard)
+	 * @return {boolean} True when the reset happened.
+	 */
+	resetColumnVisibility(pRecordSet)
+	{
+		const tmpListData = this._lastRecordListData;
+		if (!tmpListData || tmpListData.RecordSet !== pRecordSet)
+		{
+			this.log.warn(`RecordSetList: resetColumnVisibility for [${pRecordSet}] ignored — that list is not the one currently rendered.`);
+			return false;
+		}
+		const tmpColumnProvider = this.pict.providers.ColumnDataProvider;
+		if (tmpColumnProvider)
+		{
+			tmpColumnProvider.clearColumnVisibilityOverrides(pRecordSet, 'List');
+		}
+		this._repaintWithColumnState();
+		return true;
+	}
+
+	/**
+	 * Repaint the rows + pagination (body-only) from the last composed list data, with TableCells
+	 * recomputed from the pristine candidates + current overrides. onBeforeRenderList is re-invoked
+	 * — it is the documented seam where hosts append custom cells, and rebuilding TableCells from
+	 * candidates each paint means hook mutations apply exactly once per paint. (Hosts that decorate
+	 * Records in the hook must keep that decoration idempotent; the hook already re-runs on every
+	 * page change.) No loading shell: the data is already in hand, so the swap is immediate.
+	 *
+	 * @return {void}
+	 */
+	_repaintWithColumnState()
+	{
+		const tmpSourceData = this._lastRecordListData;
+		if (!tmpSourceData || !Array.isArray(tmpSourceData.ColumnCandidates))
+		{
+			return;
+		}
+		let tmpPaintData = Object.assign({}, tmpSourceData);
+		tmpPaintData.TableCells = this._computeVisibleTableCells(tmpSourceData.ColumnCandidates, tmpSourceData.RecordSet);
+		tmpPaintData = this.onBeforeRenderList(tmpPaintData);
+		this._paintRecordList(tmpPaintData, true);
+	}
+
+	/**
+	 * Rerun the last list render with the same arguments (body-only — the list shell and filters
+	 * are already on screen). Used when a column toggle needs a refetch under Lite.
+	 *
+	 * @return {Promise<void>|undefined}
+	 */
+	_rerunLastListRender()
+	{
+		if (!this._lastListRenderArgs)
+		{
+			return;
+		}
+		const tmpArgs = this._lastListRenderArgs.Args.concat([ true ]);
+		return this[this._lastListRenderArgs.Method](...tmpArgs);
+	}
+
 	onInitialize()
 	{
 		this.childViews.headerList = this.pict.addView('PRSP-List-HeaderList', viewHeaderList.default_configuration, viewHeaderList);
@@ -825,6 +1198,7 @@ class viewRecordSetList extends libPictRecordSetRecordView
 		this.childViews.recordListHeader = this.pict.addView('PRSP-List-RecordListHeader', viewRecordListHeader.default_configuration, viewRecordListHeader);
 		this.childViews.recordListEntry = this.pict.addView('PRSP-List-RecordListEntry', viewRecordListEntry.default_configuration, viewRecordListEntry);
 		this.childViews.paginationBottom = this.pict.addView('PRSP-List-PaginationBottom', viewPaginationBottom.default_configuration, viewPaginationBottom);
+		this.childViews.columnChooser = this.pict.addView('PRSP-List-ColumnChooser', viewColumnChooser.default_configuration, viewColumnChooser);
 
 		// Initialize the subviews
 		this.childViews.headerList.initialize();
@@ -834,6 +1208,7 @@ class viewRecordSetList extends libPictRecordSetRecordView
 		this.childViews.recordListHeader.initialize();
 		this.childViews.recordListEntry.initialize();
 		this.childViews.paginationBottom.initialize();
+		this.childViews.columnChooser.initialize();
 
 		return super.onInitialize();
 	}

package/source/views/read/RecordSet-Read.js

@@ -29,7 +29,12 @@ const _DEFAULT_CONFIGURATION__Read = (
 		AutoSolveOrdinal: 0,
 
 		CSS: /*css*/`
-			.prsp-audit-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
+			/* Soft-deleted record banner (the ViewDeleted route) — quiet alarm, theme-token driven. */
+		.prsp-read-deleted-banner { display: flex; align-items: center; gap: 0.5rem; margin: 0 0 0.85rem; padding: 0.55rem 0.85rem;
+			border: 1px solid var(--theme-color-status-error, #c0504d); border-radius: 8px; font-size: 0.92rem;
+			color: var(--theme-color-status-error, #c0504d);
+			background: color-mix(in srgb, var(--theme-color-status-error, #c0504d) 8%, transparent); }
+		.prsp-audit-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin: 0 0 1rem; }
 			.prsp-audit-line { display: inline-flex; align-items: center; gap: 0.4rem; color: var(--theme-color-text-muted, #6b7686); font-size: 0.85rem; }
 			.prsp-audit-line .pict-icon { font-size: 0.8rem; }
 			.prsp-audit-line strong { color: var(--theme-color-text-secondary, #45505f); font-weight: 600; }
@@ -256,12 +261,15 @@ const _DEFAULT_CONFIGURATION__Read = (
 				{
 					Hash: 'PRSP-Read-Link-URL-Template',
 					// TODO: Double payload pattern...
-					Template: `#/PSRS/{~D:Record.Payload.Payload.RecordSet~}/View/{~DVBK:Record.Payload.Data:Record.Payload.Payload.GUIDAddress~}`
+					// Soft-deleted rows (visible via the show-deleted filter) route to ViewDeleted, whose
+					// lookup explicitly includes deleted records — a plain View would find nothing.
+					Template: `#/PSRS/{~D:Record.Payload.Payload.RecordSet~}/View{~NE:Record.Payload.Data.Deleted^Deleted~}/{~DVBK:Record.Payload.Data:Record.Payload.Payload.GUIDAddress~}`
 				},
 				// --- Record audit header (themeable; apps brand via --theme-color-* tokens) ---
 				{
 					Hash: 'PRSP-Read-RecordAuditHeader-Template',
 					Template: /*html*/`
+						{~TS:PRSP-Read-DeletedBanner-Template:AppData.PRSP_RecordAudit.DeletedBannerSlot~}
 						<div class="prsp-audit-header">
 							<div class="prsp-audit-activity">{~TS:PRSP-Read-RecordAudit-Line-Template:AppData.PRSP_RecordAudit.ActivitySlot~}</div>
 							<div class="prsp-audit-anchor">
@@ -299,6 +307,16 @@ const _DEFAULT_CONFIGURATION__Read = (
 					Hash: 'PRSP-Read-RecordAudit-Deleted-Template',
 					Template: /*html*/`<dt>Deleted</dt><dd class="is-deleted">{~DateFormat:Record.Date^MMM D, YYYY - h:mm A~} <small>by {~E:User^Record.UserID^PRSP-Read-RecordAudit-UserName-Template~}</small></dd>`
 				},
+				{
+					// Soft-deleted record banner (the ViewDeleted route, or a record deleted out from
+					// under a normal View). The one-or-zero-element DeletedBannerSlot drives it.
+					Hash: 'PRSP-Read-DeletedBanner-Template',
+					Template: /*html*/`<div class="prsp-read-deleted-banner">{~I:Warning~} This record has been deleted{~TIfAbs:PRSP-Read-DeletedBanner-Date-Template:Record:Record.HasDate^TRUE^~}.</div>`
+				},
+				{
+					Hash: 'PRSP-Read-DeletedBanner-Date-Template',
+					Template: /*html*/` on {~DateFormat:Record.Date^MMM D, YYYY - h:mm A~}`
+				},
 			],
 
 		Renderables:
@@ -404,8 +422,35 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 		}
 
 		this.action = 'View';
+		this.viewingDeletedRecord = false;
+		const tmpProviderConfiguration = this.pict.PictSectionRecordSet.recordSetProviderConfigurations[pRoutePayload.data.RecordSet];
+		this.layoutType = tmpProviderConfiguration?.ReadLayout || 'Basic';
+		const tmpProviderHash = `RSP-Provider-${pRoutePayload.data.RecordSet}`;
+
+		tmpProviderConfiguration.RoutePayload = pRoutePayload;
+		tmpProviderConfiguration.RecordSet = pRoutePayload.data.RecordSet;
+		tmpProviderConfiguration.GUIDRecord = pRoutePayload.data.GUIDRecord;
+
+		return this.renderRead(tmpProviderConfiguration, tmpProviderHash, pRoutePayload.data.GUIDRecord);
+	}
+
+	/**
+	 * The deleted-record read route (`/PSRS/:RecordSet/ViewDeleted/:GUIDRecord`): identical to the
+	 * View route except the record lookup explicitly includes soft-deleted rows (a normal View of a
+	 * deleted record finds nothing — delete tracking filters it out — and renders broken). The flag
+	 * also rides the read data as ViewingDeletedRecord, which drives the deleted banner.
+	 */
+	handleRecordSetReadDeletedRoute(pRoutePayload)
+	{
+		if (typeof(pRoutePayload) != 'object')
+		{
+			throw new Error(`Pict RecordSet Read view route handler called with invalid route payload.`);
+		}
+
+		this.action = 'View';
+		this.viewingDeletedRecord = true;
 		const tmpProviderConfiguration = this.pict.PictSectionRecordSet.recordSetProviderConfigurations[pRoutePayload.data.RecordSet];
-		this.layoutType = tmpProviderConfiguration?.ReadLayout || 'Basic'; 
+		this.layoutType = tmpProviderConfiguration?.ReadLayout || 'Basic';
 		const tmpProviderHash = `RSP-Provider-${pRoutePayload.data.RecordSet}`;
 
 		tmpProviderConfiguration.RoutePayload = pRoutePayload;
@@ -423,8 +468,9 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 		}
 
 		this.action = 'Edit';
+		this.viewingDeletedRecord = false;
 		const tmpProviderConfiguration = this.pict.PictSectionRecordSet.recordSetProviderConfigurations[pRoutePayload.data.RecordSet];
-		this.layoutType = tmpProviderConfiguration?.ReadLayout || 'Basic'; 
+		this.layoutType = tmpProviderConfiguration?.ReadLayout || 'Basic';
 		const tmpProviderHash = `RSP-Provider-${pRoutePayload.data.RecordSet}`;
 
 		tmpProviderConfiguration.RoutePayload = pRoutePayload;
@@ -437,6 +483,7 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 	addRoutes(pPictRouter)
 	{
 		pPictRouter.addRoute('/PSRS/:RecordSet/View/:GUIDRecord', this.handleRecordSetReadRoute.bind(this));
+		pPictRouter.addRoute('/PSRS/:RecordSet/ViewDeleted/:GUIDRecord', this.handleRecordSetReadDeletedRoute.bind(this));
 		pPictRouter.addRoute('/PSRS/:RecordSet/Edit/:GUIDRecord', this.handleRecordSetEditRoute.bind(this));
 		return true;
 	}
@@ -507,7 +554,10 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 			ActivitySlot: tmpActivitySlot,
 			CreatedSlot: tmpHasCreate ? [{ Date: pRecord.CreateDate, UserID: pRecord.CreatingIDUser }] : [],
 			UpdatedSlot: tmpHasUpdate ? [{ Date: pRecord.UpdateDate, UserID: pRecord.UpdatingIDUser }] : [],
-			DeletedSlot: tmpDeleted ? [{ Date: pRecord.DeleteDate, UserID: pRecord.DeletingIDUser }] : []
+			DeletedSlot: tmpDeleted ? [{ Date: pRecord.DeleteDate, UserID: pRecord.DeletingIDUser }] : [],
+			// The ViewDeleted route's banner: present whenever the record is soft-deleted (whether the
+			// user arrived via ViewDeleted or the record was deleted out from under a normal View).
+			DeletedBannerSlot: (!!pRecord.Deleted) ? [{ Date: pRecord.DeleteDate, UserID: pRecord.DeletingIDUser, HasDate: this._validAuditDate(pRecord.DeleteDate) }] : []
 		};
 	}
 
@@ -753,8 +803,9 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 		// TODO: This should be coming from the schema but that can come after we discuss how we deal with default routing
 		tmpRecordReadData.GUIDAddress = this.pict.providers[pProviderHash].getGUIDField();
 
-		tmpRecordReadData.Record = await this.pict.providers[pProviderHash].getRecordByGUID(pRecordGUID);
+		tmpRecordReadData.Record = await this.pict.providers[pProviderHash].getRecordByGUID(pRecordGUID, this.viewingDeletedRecord === true);
 		tmpRecordReadData.RecordSchema = await this.pict.providers[pProviderHash].getRecordSchema();
+		tmpRecordReadData.ViewingDeletedRecord = (this.viewingDeletedRecord === true);
 		this.pict.AppData[`${ tmpRecordReadData.RecordSet }Details`] = tmpRecordReadData.Record;
 
 		// Build the audit header state (first-class activity line + the Details modal) for this record.
@@ -847,6 +898,14 @@ class viewRecordSetRead extends libPictRecordSetRecordView
 					document.getElementById('PRSP-Read-SaveButton').classList.remove('record-button-bar-hidden');
 					document.getElementById('PRSP-Read-CancelButton').classList.remove('record-button-bar-hidden');
 				}
+				else if (this.viewingDeletedRecord === true)
+				{
+					// A deleted record can't be edited (the Edit route's lookup excludes deleted rows) —
+					// the ViewDeleted page is read-only.
+					document.getElementById('PRSP-Read-EditButton').classList.add('record-button-bar-hidden');
+					document.getElementById('PRSP-Read-SaveButton').classList.add('record-button-bar-hidden');
+					document.getElementById('PRSP-Read-CancelButton').classList.add('record-button-bar-hidden');
+				}
 				else
 				{
 					document.getElementById('PRSP-Read-EditButton').classList.remove('record-button-bar-hidden');