pict-section-recordset 1.4.0 → 1.6.0

package/README.md

@@ -11,6 +11,36 @@ The only thing that's really required for this to operate is a Record/Record
 Set provider... and given a Meadow Endpoint, the `/1.0/Entity/Schema` endpoint
 can be used to programmatically create a functional provider.
 
+## Quick Filters
+
+A curated, one-interaction filter bar at the top of the filter drawer — the handful of filters people reach for most often (fuzzy-search the title, "added in this range", "added by …"), pre-wired so there's no "Add filter → pick a field → pick a clause type" hunt. Each control writes a real filter clause, so it serializes, applies, and clears like anything in the full list.
+
+**Clever by default.** With no configuration the bar is derived from the entity schema:
+
+| Field present | Quick control |
+|---|---|
+| `Title` (else `Name`) | fuzzy text |
+| `CreateDate` / `UpdateDate` | date range |
+| `CreatingIDUser` / `UpdatingIDUser` | entity picker (the related entity) |
+
+**Curated by config.** Set `QuickFilters` on the RecordSet config to control which filters appear, their labels, and their order. Entries are a field name, or an object for a custom label / explicit clause:
+
+```javascript
+{
+    "RecordSet": "Book",
+    "RecordSetMeadowEntity": "Book",
+    "QuickFilters":
+    [
+        "Title",
+        "Genre",
+        { "Field": "CreateDate", "Label": "Added" },
+        { "Field": "CreatingIDUser", "Label": "Added by" }
+    ]
+}
+```
+
+The control type is inferred from the field's clause (text for a string match, a from/to pair for a date range, a [pict-section-picker](https://github.com/fable-retold/pict-section-picker) for an entity reference). A quick clause lives in the same filter state as every other clause (tagged so the full clause list doesn't show it twice), and is removed when its value is cleared.
+
 ## Related Packages
 
 - [pict](https://github.com/fable-retold/pict) - MVC application framework

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pict-section-recordset",
-  "version": "1.4.0",
+  "version": "1.6.0",
   "description": "Pict dynamic record set management views",
   "main": "source/Pict-Section-RecordSet.js",
   "files": [

package/source/providers/RecordSet-RecordProvider-Base.js

@@ -368,6 +368,251 @@ class RecordSetProviderBase extends libPictProvider
 		return tmpClauses;
 	}
 
+	// --- Quick Filters -----------------------------------------------------------------------------
+	// A curated, one-interaction set of filters surfaced at the top of the drawer (fuzzy-search Title,
+	// Created range, Created-by, …) so common filtering skips the "Add filter → pick field → pick type"
+	// hunt. Each quick filter reuses a real clause descriptor from the field's AvailableClauses; its live
+	// clause lives in the same FilterClauses array (tagged `QuickFilter:true`, keyed by `QuickFilterKey`)
+	// so it serializes / applies / clears like any other clause — the drawer's clause list just skips it.
+
+	/**
+	 * Resolve the quick-filter definitions for this record set: the host's `QuickFilters` config if
+	 * present, else clever defaults derived from the schema. Each definition is resolved to a concrete
+	 * clause descriptor (selected from the field's `AvailableClauses`) so quick filters never invent a
+	 * parallel clause path.
+	 *
+	 * @return {Array<{Field:string, Label:string, Control:string, ClauseKey:string}>}
+	 */
+	getQuickFilterDefinitions()
+	{
+		const tmpEntries = Array.isArray(this.options.QuickFilters) ? this.options.QuickFilters : this._deriveDefaultQuickFilters();
+		const tmpDefinitions = [];
+		for (let i = 0; i < tmpEntries.length; i++)
+		{
+			const tmpEntry = (typeof tmpEntries[i] === 'string') ? { Field: tmpEntries[i] } : (tmpEntries[i] || {});
+			const tmpDefinition = this._resolveQuickFilterDefinition(tmpEntry);
+			if (tmpDefinition) { tmpDefinitions.push(tmpDefinition); }
+		}
+		return tmpDefinitions;
+	}
+
+	/**
+	 * Clever defaults (zero config): the common things people filter on, detected by canonical Meadow
+	 * column names on the fetched schema. Primary text (Title→Name), the audit date ranges, the audit
+	 * user references. Absent `_Schema` (non-Meadow provider) → no defaults.
+	 *
+	 * @return {Array<{Field:string, Label?:string}>}
+	 */
+	_deriveDefaultQuickFilters()
+	{
+		const tmpProperties = (this._Schema && this._Schema.properties) || null;
+		if (!tmpProperties) { return []; }
+		const fHas = (pField) => Object.prototype.hasOwnProperty.call(tmpProperties, pField);
+		const tmpDefaults = [];
+		// `RequireControl` pins a default to its intended control: a "Created" default is only useful as
+		// a date range, a "Created by" only as an entity picker. If the field can't offer that (e.g. a
+		// schema that types its dates as plain strings), the default is dropped rather than degrading to
+		// an odd text-search-a-timestamp. Host-configured QuickFilters carry no RequireControl, so they
+		// take whatever clause the field offers.
+		if (fHas('Title')) { tmpDefaults.push({ Field: 'Title' }); }
+		else if (fHas('Name')) { tmpDefaults.push({ Field: 'Name' }); }
+		if (fHas('CreateDate')) { tmpDefaults.push({ Field: 'CreateDate', Label: 'Created', RequireControl: 'daterange' }); }
+		if (fHas('UpdateDate')) { tmpDefaults.push({ Field: 'UpdateDate', Label: 'Updated', RequireControl: 'daterange' }); }
+		if (fHas('CreatingIDUser')) { tmpDefaults.push({ Field: 'CreatingIDUser', Label: 'Created by', RequireControl: 'entity' }); }
+		if (fHas('UpdatingIDUser')) { tmpDefaults.push({ Field: 'UpdatingIDUser', Label: 'Updated by', RequireControl: 'entity' }); }
+		return tmpDefaults;
+	}
+
+	/**
+	 * Resolve one quick-filter config entry to a renderable definition: pick the clause (explicit
+	 * `ClauseKey`, else the best for a quick filter) from the field's AvailableClauses + classify it to a
+	 * control type. Returns null when the field has no usable clause.
+	 *
+	 * @param {Record<string, any>} pEntry @return {{Field:string, Label:string, Control:string, ClauseKey:string}|null}
+	 */
+	_resolveQuickFilterDefinition(pEntry)
+	{
+		if (!pEntry || !pEntry.Field) { return null; }
+		const tmpFieldSchema = this.getFilterClauseSchemaForKey(pEntry.Field);
+		const tmpAvailableClauses = tmpFieldSchema && Array.isArray(tmpFieldSchema.AvailableClauses) ? tmpFieldSchema.AvailableClauses : null;
+		if (!tmpAvailableClauses || tmpAvailableClauses.length < 1) { return null; }
+		const tmpClause = pEntry.ClauseKey
+			? tmpAvailableClauses.find((pClause) => pClause.ClauseKey === pEntry.ClauseKey)
+			: this._pickQuickClause(tmpAvailableClauses);
+		if (!tmpClause) { return null; }
+		const tmpControl = this._controlForClauseType(tmpClause.Type);
+		if (!tmpControl) { return null; }
+		// A default that demands a specific control (e.g. date range) is dropped when the field can't offer it.
+		if (pEntry.RequireControl && tmpControl !== pEntry.RequireControl) { return null; }
+		return {
+			Field: pEntry.Field,
+			Label: pEntry.Label || tmpFieldSchema.DisplayName || pEntry.Field,
+			Control: tmpControl,
+			ClauseKey: tmpClause.ClauseKey,
+		};
+	}
+
+	/**
+	 * Choose the clause a quick filter should drive for a field: an entity selected-value, else a fuzzy
+	 * string match, else a range — i.e. the simplest one-interaction clause the field offers.
+	 *
+	 * @param {Array<Record<string, any>>} pAvailableClauses @return {Record<string, any>|undefined}
+	 */
+	_pickQuickClause(pAvailableClauses)
+	{
+		return pAvailableClauses.find((pClause) => pClause.Type === 'InternalJoinSelectedValue' || pClause.Type === 'InternalJoinSelectedValueList')
+			|| pAvailableClauses.find((pClause) => pClause.Type === 'StringMatch' && pClause.ExactMatch === false)
+			|| pAvailableClauses.find((pClause) => pClause.Type === 'DateRange')
+			|| pAvailableClauses.find((pClause) => pClause.Type === 'NumericRange')
+			|| pAvailableClauses[0];
+	}
+
+	/**
+	 * Map a clause Type to the quick-bar control that drives it.
+	 * @param {string} pType @return {string|null}
+	 */
+	_controlForClauseType(pType)
+	{
+		switch (pType)
+		{
+			case 'StringMatch': return 'text';
+			case 'DateRange': return 'daterange';
+			case 'InternalJoinSelectedValue':
+			case 'InternalJoinSelectedValueList': return 'entity';
+			default: return null;
+		}
+	}
+
+	/** @param {string} pField @return {any} The current value of a field's quick-filter clause, or ''. */
+	getQuickFilterClauseValue(pField)
+	{
+		const tmpClause = this.getFilterClauses().find((pClause) => pClause.QuickFilterKey === `Quick-${pField}`);
+		return tmpClause ? tmpClause.Value : '';
+	}
+
+	/**
+	 * Upsert (or, when the value is empty, remove) a field's quick-filter clause with a scalar value.
+	 * Creates the clause from the field's descriptor on first use, tagged so it renders in the quick bar
+	 * and serializes/applies like any clause.
+	 *
+	 * @param {string} pField @param {string} pClauseKey @param {any} pValue
+	 */
+	upsertQuickFilterClauseValue(pField, pClauseKey, pValue)
+	{
+		const tmpClauses = this.getFilterClauses();
+		const tmpQuickFilterKey = `Quick-${pField}`;
+		const tmpExistingIndex = tmpClauses.findIndex((pClause) => pClause.QuickFilterKey === tmpQuickFilterKey);
+		const tmpEmpty = (pValue === undefined || pValue === null || pValue === '');
+		if (tmpEmpty)
+		{
+			if (tmpExistingIndex >= 0) { tmpClauses.splice(tmpExistingIndex, 1); }
+			return;
+		}
+		if (tmpExistingIndex >= 0)
+		{
+			tmpClauses[tmpExistingIndex].Value = pValue;
+			return;
+		}
+		const tmpClause = this._createQuickFilterClause(pField, pClauseKey, tmpQuickFilterKey);
+		if (!tmpClause) { return; }
+		tmpClause.Value = pValue;
+		tmpClauses.push(tmpClause);
+	}
+
+	/** @param {string} pField @return {{Start:any, End:any}} The current DateRange quick-filter bounds. */
+	getQuickFilterDateRangeValue(pField)
+	{
+		const tmpClause = this.getFilterClauses().find((pClause) => pClause.QuickFilterKey === `Quick-${pField}`);
+		const tmpValues = (tmpClause && tmpClause.Values && typeof tmpClause.Values === 'object' && !Array.isArray(tmpClause.Values)) ? tmpClause.Values : {};
+		return { Start: tmpValues.Start || '', End: tmpValues.End || '' };
+	}
+
+	/**
+	 * Set one bound of a field's DateRange quick-filter clause (create on first use, remove when BOTH
+	 * bounds are empty). Bounds live at `clause.Values.Start` / `.End` (the DateRange contract).
+	 *
+	 * @param {string} pField @param {string} pClauseKey @param {'start'|'end'} pWhich @param {any} pValue
+	 */
+	upsertQuickFilterDateRange(pField, pClauseKey, pWhich, pValue)
+	{
+		const tmpClauses = this.getFilterClauses();
+		const tmpQuickFilterKey = `Quick-${pField}`;
+		let tmpClause = tmpClauses.find((pClause) => pClause.QuickFilterKey === tmpQuickFilterKey);
+		const tmpValue = (pValue === undefined || pValue === null) ? '' : pValue;
+		if (!tmpClause)
+		{
+			if (tmpValue === '') { return; }
+			tmpClause = this._createQuickFilterClause(pField, pClauseKey, tmpQuickFilterKey);
+			if (!tmpClause) { return; }
+			tmpClause.Values = {};
+			tmpClauses.push(tmpClause);
+		}
+		if (!tmpClause.Values || typeof tmpClause.Values !== 'object' || Array.isArray(tmpClause.Values)) { tmpClause.Values = {}; }
+		if (pWhich === 'start') { tmpClause.Values.Start = tmpValue; }
+		else { tmpClause.Values.End = tmpValue; }
+		const fEmpty = (pVal) => (pVal === undefined || pVal === null || pVal === '');
+		if (fEmpty(tmpClause.Values.Start) && fEmpty(tmpClause.Values.End))
+		{
+			const tmpIndex = tmpClauses.findIndex((pClause) => pClause.QuickFilterKey === tmpQuickFilterKey);
+			if (tmpIndex >= 0) { tmpClauses.splice(tmpIndex, 1); }
+		}
+	}
+
+	/** @param {string} pField @return {Array<any>} The current entity quick-filter selected value(s). */
+	getQuickFilterEntityValue(pField)
+	{
+		const tmpClause = this.getFilterClauses().find((pClause) => pClause.QuickFilterKey === `Quick-${pField}`);
+		return (tmpClause && Array.isArray(tmpClause.Values)) ? tmpClause.Values : [];
+	}
+
+	/**
+	 * Set a field's entity quick-filter clause to the picked value(s) (create on first use, remove when
+	 * empty). Selected ids live at `clause.Values` (the entity-reference contract).
+	 *
+	 * @param {string} pField @param {string} pClauseKey @param {any} pValue scalar or array
+	 */
+	upsertQuickFilterEntity(pField, pClauseKey, pValue)
+	{
+		const tmpClauses = this.getFilterClauses();
+		const tmpQuickFilterKey = `Quick-${pField}`;
+		const tmpArray = (Array.isArray(pValue) ? pValue : ((pValue === undefined || pValue === null || pValue === '') ? [] : [ pValue ]))
+			.filter((pVal) => pVal !== undefined && pVal !== null && pVal !== '');
+		const tmpIndex = tmpClauses.findIndex((pClause) => pClause.QuickFilterKey === tmpQuickFilterKey);
+		if (tmpArray.length === 0)
+		{
+			if (tmpIndex >= 0) { tmpClauses.splice(tmpIndex, 1); }
+			return;
+		}
+		if (tmpIndex >= 0) { tmpClauses[tmpIndex].Values = tmpArray; return; }
+		const tmpClause = this._createQuickFilterClause(pField, pClauseKey, tmpQuickFilterKey);
+		if (!tmpClause) { return; }
+		tmpClause.Values = tmpArray;
+		tmpClauses.push(tmpClause);
+	}
+
+	/**
+	 * Clone a field's clause descriptor into a fresh, tagged quick-filter clause (no value set yet), or
+	 * null when the descriptor is missing. Shared by the text / date / entity upserts.
+	 *
+	 * @param {string} pField @param {string} pClauseKey @param {string} pQuickFilterKey
+	 * @return {Record<string, any>|null}
+	 */
+	_createQuickFilterClause(pField, pClauseKey, pQuickFilterKey)
+	{
+		const tmpDescriptor = this.getFilterClauseSchemaForKey(pField)?.AvailableClauses?.find?.((pClause) => pClause.ClauseKey === pClauseKey);
+		if (!tmpDescriptor)
+		{
+			this.pict.log.error(`RecordSetProviderBase quick filter: no clause schema for field ${pField} / clause ${pClauseKey}.`);
+			return null;
+		}
+		const tmpClause = JSON.parse(JSON.stringify(tmpDescriptor));
+		tmpClause.Hash = `${pField}-${pClauseKey}-${this.pict.getUUID()}`;
+		tmpClause.Label = tmpClause.Label || tmpClause.DisplayName;
+		tmpClause.QuickFilter = true;
+		tmpClause.QuickFilterKey = pQuickFilterKey;
+		return tmpClause;
+	}
+
 	/**
 	 * @param {string} pSpecificFilterClauseHash - The hash of the specific filter clause to move.
 	 * @param {number} pOrdinal - The ordinal position to move the filter clause to.

package/source/providers/RecordSet-RecordProvider-MeadowEndpoints.js

@@ -517,6 +517,7 @@ class MeadowEndpointsRecordSetProvider extends libRecordSetProviderBase
 					case 'datetime':
 					case 'createdate':
 					case 'updatedate':
+					case 'deletedate':
 						tmpFieldFilterClauses.push({ FilterKey: pSchemaField, ClauseKey: `${pSchemaField}_Match_Exact`, Label: `${tmpFieldHumanName} Exact Match`, DisplayName: `Exact Match`, Type: 'DateMatch', FilterByColumn: pSchemaField, ExactMatch: true , Ordinal: tmpFieldFilterClauses.length + 1 });
 						tmpFieldFilterClauses.push({ FilterKey: pSchemaField, ClauseKey: `${pSchemaField}_Match_Fuzzy`, Label: `${tmpFieldHumanName} Partial Match`, DisplayName: `Partial Match`, Type: 'DateMatch', FilterByColumn: pSchemaField, ExactMatch: false , Ordinal: tmpFieldFilterClauses.length + 1 });
 						tmpRangeClause = { FilterKey: pSchemaField, ClauseKey: `${pSchemaField}_Range`, Label: `${tmpFieldHumanName} In Range`, DisplayName: `In Range`, Type: 'DateRange', FilterByColumn: pSchemaField , Ordinal: tmpFieldFilterClauses.length + 1 };
@@ -745,7 +746,12 @@ class MeadowEndpointsRecordSetProvider extends libRecordSetProviderBase
 			}
 			++tmpOrdinal;
 			const tmpColumn = tmpProperties[tmpSchemaField];
-			const tmpMeadowSchemaField = tmpSchema.MeadowSchema?.Schema?.find?.((f) => f.Column === tmpSchemaField);
+			// The Meadow schema endpoint nests its canonical column array (the one carrying each column's
+			// semantic Type — CreateDate/UpdateDate/CreateIDUser/… — which is what distinguishes a date
+			// column from a plain string; the JSON-schema `type` flattens both to "string"). Read the
+			// nested path, falling back to the legacy flat path for older endpoints.
+			const tmpMeadowSchemaArray = tmpSchema.MeadowSchema?.MeadowSchema?.Schema || tmpSchema.MeadowSchema?.Schema;
+			const tmpMeadowSchemaField = Array.isArray(tmpMeadowSchemaArray) ? tmpMeadowSchemaArray.find((f) => f.Column === tmpSchemaField) : undefined;
 			let tmpFieldFilterSchema = this._FilterSchema[tmpSchemaField];
 			if (!tmpFieldFilterSchema)
 			{

package/source/templates/Pict-Template-FilterInstanceViews.js

@@ -74,6 +74,10 @@ class PictTemplateFilterInstanceViewInstruction extends libPictTemplate
 
 	_getViewForFilterClause(pClause)
 	{
+		// Quick-filter clauses are surfaced in the Quick Filters bar (RecordSet-Filters._renderQuickFilters),
+		// not the drawer's clause list — skip them here so they aren't rendered twice. Both the sync and
+		// async render loops treat a null view as "skip this clause".
+		if (pClause && pClause.QuickFilter) { return null; }
 		let tmpViewHash = `PRSP-FilterType-${pClause.Type}`;
 		const tmpCustomViewHash = `${tmpViewHash}-${pClause.CustomFilterViewHash}`;
 		if (tmpCustomViewHash in this.pict.views)

package/source/views/RecordSet-Filters.js

@@ -66,6 +66,25 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 .prsp-filters-experiences { flex: 0 1 auto; min-width: 0; }
 .prsp-filters-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 0.5rem; }
 
+/* Quick Filters — a curated, one-interaction bar at the top of the drawer (above the clause list).
+   Painted post-render into #PRSP_QuickFilters; hidden via :empty when the record set has none. */
+.prsp-quickfilters { display: flex; align-items: center; flex-wrap: wrap; gap: 0.55rem 0.9rem;
+	margin-bottom: 0.7rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--theme-color-border-light, #e8ebf0); }
+.prsp-quickfilters:empty { display: none; }
+.prsp-quickfilters-label { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
+	color: var(--theme-color-text-muted, #6b7686); }
+.prsp-quickfilter { display: inline-flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
+.prsp-quickfilter-name { font-size: 0.72rem; font-weight: 600; color: var(--theme-color-text-secondary, #45505f); }
+.prsp-quickfilter-input { font: inherit; font-size: 0.9rem; width: 13rem; max-width: 100%; padding: 0.4rem 0.7rem; border-radius: 8px;
+	border: 1px solid var(--theme-color-border-default, #d7dce3); background: var(--theme-color-background-primary, #fff); color: var(--theme-color-text-primary, #1f2733); }
+.prsp-quickfilter-input:focus { outline: none; border-color: var(--theme-color-brand-primary, #156dd1);
+	box-shadow: 0 0 0 3px color-mix(in srgb, var(--theme-color-brand-primary, #156dd1) 16%, transparent); }
+.prsp-quickfilter-daterange { display: inline-flex; align-items: center; gap: 0.35rem; }
+.prsp-quickfilter-date { width: 9.5rem; }
+.prsp-quickfilter-dash { color: var(--theme-color-text-muted, #6b7686); }
+/* Entity quick control: the pict-section-picker mounts into this host (its own .pps chrome themes it). */
+.prsp-quickfilter-entityhost { display: inline-block; width: 14rem; max-width: 100%; vertical-align: middle; }
+
 /* Module-owned "Add filter" popover (replaces the old native <select> pickers). */
 /* Fixed (viewport-anchored) + JS-positioned on open, so no ancestor overflow:hidden — the filter card,
    the slide-out drawer — can clip it, whatever the host's layout. */
@@ -114,6 +133,9 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 		</form>
 		<div class="prsp-filters-drawer" id="PRSP_Filter_Drawer">
 			<div class="prsp-filters-drawer-inner">
+				<!-- Quick Filters: a curated, one-interaction bar painted post-render into this host
+				     (empty when the record set has no quick filters → CSS :empty hides it). -->
+				<div class="prsp-quickfilters" id="PRSP_QuickFilters"></div>
 				<div id="PRSP_Filter_Instances" class="prsp-filters-clauses" onkeydown="if (event.key === 'Enter' &amp;&amp; !event.target.closest('.pps')) { event.preventDefault(); _Pict.views['PRSP-Filters'].handleSearch(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}'); }">
 					{~FIV:Record~}
 				</div>
@@ -235,6 +257,59 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 		<span>{~D:Record.DisplayName~}</span>
 	</button>
 	<!-- DefaultPackage end view template: [PRSP-AddFilter-Clause] -->
+`
+		},
+		{
+			// Quick Filters bar contents (painted into #PRSP_QuickFilters post-render). A small label +
+			// one compact control per definition; each control drives a real, tagged clause.
+			Hash: 'PRSP-QuickFilters-Bar',
+			Template: /*html*/`
+		<span class="prsp-quickfilters-label">Quick filters</span>
+		{~TS:PRSP-QuickFilter-Item:Record.Filters~}
+`
+		},
+		{
+			// One quick filter: a name + exactly one control, chosen by the single-element-array slot
+			// (text / date range / entity picker) populated for this item's control type.
+			Hash: 'PRSP-QuickFilter-Item',
+			Template: /*html*/`
+		<div class="prsp-quickfilter">
+			<span class="prsp-quickfilter-name">{~D:Record.Label~}</span>
+			{~TS:PRSP-QuickFilter-Text:Record.TextSlot~}
+			{~TS:PRSP-QuickFilter-Date:Record.DateSlot~}
+			{~TS:PRSP-QuickFilter-Entity:Record.EntitySlot~}
+		</div>
+`
+		},
+		{
+			// Text control (fuzzy match) — commits on blur / Enter (never per-keystroke, so the
+			// re-render that an apply triggers can't steal focus mid-type).
+			Hash: 'PRSP-QuickFilter-Text',
+			Template: /*html*/`
+		<input class="prsp-quickfilter-input" type="text" value="{~D:Record.Value~}" placeholder="{~D:Record.Placeholder~}" autocomplete="off"
+			onkeydown="if (event.key === 'Enter') { event.preventDefault(); this.blur(); }"
+			onchange="_Pict.views['PRSP-Filters'].applyQuickFilterText('{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}', '{~D:Record.Field~}', '{~D:Record.ClauseKey~}', this.value)">
+`
+		},
+		{
+			// Date-range control — a from/to pair driving one DateRange clause (Values.Start / .End).
+			Hash: 'PRSP-QuickFilter-Date',
+			Template: /*html*/`
+		<span class="prsp-quickfilter-daterange">
+			<input type="date" class="prsp-quickfilter-input prsp-quickfilter-date" value="{~D:Record.StartValue~}" aria-label="{~D:Record.Label~} from"
+				onchange="_Pict.views['PRSP-Filters'].applyQuickFilterDate('{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}', '{~D:Record.Field~}', '{~D:Record.ClauseKey~}', 'start', this.value)">
+			<span class="prsp-quickfilter-dash">–</span>
+			<input type="date" class="prsp-quickfilter-input prsp-quickfilter-date" value="{~D:Record.EndValue~}" aria-label="{~D:Record.Label~} to"
+				onchange="_Pict.views['PRSP-Filters'].applyQuickFilterDate('{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}', '{~D:Record.Field~}', '{~D:Record.ClauseKey~}', 'end', this.value)">
+		</span>
+`
+		},
+		{
+			// Entity control — a pict-section-picker mounts into this host (post-render, in
+			// _mountQuickFilterEntity), so the quick filter reuses the real entity picker.
+			Hash: 'PRSP-QuickFilter-Entity',
+			Template: /*html*/`
+		<span class="prsp-quickfilter-entityhost" id="{~D:Record.HostID~}"></span>
 `
 		},
 	],
@@ -527,6 +602,137 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		if (tmpInput) { tmpInput.value = this._searchTermFromURL(); }
 	}
 
+	/**
+	 * Paint the Quick Filters bar into #PRSP_QuickFilters from the record set's quick-filter definitions
+	 * (host config or clever defaults), each control seeded with its clause's current value. Phase 1
+	 * renders the text controls; date/entity controls follow. Empty → the bar's :empty CSS hides it.
+	 *
+	 * @param {string} pRecordSet @param {string} pViewContext
+	 */
+	_renderQuickFilters(pRecordSet, pViewContext)
+	{
+		if (!document.getElementById('PRSP_QuickFilters')) { return; }
+		const tmpProvider = this.pict.providers['RSP-Provider-' + pRecordSet];
+		if (!tmpProvider || typeof tmpProvider.getQuickFilterDefinitions !== 'function')
+		{
+			this.pict.ContentAssignment.assignContent('#PRSP_QuickFilters', '');
+			return;
+		}
+		// Build one item per definition, populating exactly one control slot (text / date / entity).
+		const tmpEntityMounts = [];
+		const tmpItems = tmpProvider.getQuickFilterDefinitions().map((pDefinition) =>
+		{
+			const tmpBase = { Field: pDefinition.Field, ClauseKey: pDefinition.ClauseKey, Label: pDefinition.Label, RecordSet: pRecordSet, ViewContext: pViewContext };
+			const tmpItem = { Label: pDefinition.Label, TextSlot: [], DateSlot: [], EntitySlot: [] };
+			if (pDefinition.Control === 'text')
+			{
+				tmpItem.TextSlot = [ Object.assign({}, tmpBase, { Value: tmpProvider.getQuickFilterClauseValue(pDefinition.Field), Placeholder: `Search ${pDefinition.Label}…` }) ];
+			}
+			else if (pDefinition.Control === 'daterange')
+			{
+				const tmpRange = tmpProvider.getQuickFilterDateRangeValue(pDefinition.Field);
+				tmpItem.DateSlot = [ Object.assign({}, tmpBase, { StartValue: tmpRange.Start, EndValue: tmpRange.End }) ];
+			}
+			else if (pDefinition.Control === 'entity')
+			{
+				const tmpHostID = `PRSP_QuickEntity_${pRecordSet}_${pDefinition.Field}`;
+				tmpItem.EntitySlot = [ Object.assign({}, tmpBase, { HostID: tmpHostID }) ];
+				tmpEntityMounts.push(Object.assign({}, tmpBase, { HostID: tmpHostID }));
+			}
+			return tmpItem;
+		});
+		const tmpHTML = (tmpItems.length > 0) ? this.pict.parseTemplateByHash('PRSP-QuickFilters-Bar', { Filters: tmpItems }) : '';
+		this.pict.ContentAssignment.assignContent('#PRSP_QuickFilters', tmpHTML);
+		// Entity controls: mount (or re-mount) a picker into each host after the wholesale re-render.
+		tmpEntityMounts.forEach((pMount) => this._mountQuickFilterEntity(pRecordSet, pViewContext, pMount));
+	}
+
+	/**
+	 * Mount (idempotently) a pict-section-picker into a quick-filter entity host, configured from the
+	 * field's entity clause descriptor (RemoteTable / search columns / value column), single-select.
+	 * On change it upserts the clause + applies. Re-runs after each render (the bar repaints wholesale),
+	 * mirroring the form adapter's re-mount pattern. No-op if the picker module isn't registered.
+	 *
+	 * @param {string} pRecordSet @param {string} pViewContext @param {Record<string, any>} pMount
+	 */
+	_mountQuickFilterEntity(pRecordSet, pViewContext, pMount)
+	{
+		if (!document.getElementById(pMount.HostID)) { return; }
+		const tmpPickerProvider = this.pict.providers['Pict-Section-Picker'];
+		const tmpProvider = this.pict.providers['RSP-Provider-' + pRecordSet];
+		if (!tmpPickerProvider || typeof tmpPickerProvider.createEntityPicker !== 'function' || !tmpProvider) { return; }
+		const tmpDescriptor = tmpProvider.getFilterClauseSchemaForKey(pMount.Field)?.AvailableClauses?.find?.((pClause) => pClause.ClauseKey === pMount.ClauseKey);
+		if (!tmpDescriptor || !tmpDescriptor.RemoteTable) { return; }
+		const tmpSearchFields = Array.isArray(tmpDescriptor.ExternalFilterByColumns) && tmpDescriptor.ExternalFilterByColumns.length > 0 ? tmpDescriptor.ExternalFilterByColumns : [ 'Name' ];
+		const tmpView = tmpPickerProvider.createEntityPicker(`Quick-Picker-${pRecordSet}-${pMount.Field}`,
+		{
+			DestinationAddress: `#${pMount.HostID}`,
+			// Quick filters stay single-select for a fast pick (the full drawer entity filter can be multi).
+			Mode: 'single',
+			Entity: tmpDescriptor.RemoteTable,
+			ValueField: tmpDescriptor.JoinExternalConnectionColumn || `ID${tmpDescriptor.RemoteTable}`,
+			SearchFields: tmpSearchFields,
+			TextField: tmpSearchFields[0],
+			Placeholder: `Select ${pMount.Label}…`,
+			OnChange: (pValue) => this.applyQuickFilterEntity(pRecordSet, pViewContext, pMount.Field, pMount.ClauseKey, pValue),
+		});
+		if (!tmpView) { return; }
+		tmpView.render();
+		const tmpCurrent = (typeof tmpProvider.getQuickFilterEntityValue === 'function') ? tmpProvider.getQuickFilterEntityValue(pMount.Field) : [];
+		tmpView.setValue((Array.isArray(tmpCurrent) && tmpCurrent.length > 0) ? tmpCurrent[0] : '');
+	}
+
+	/**
+	 * Apply a text quick filter: upsert (or clear) its tagged clause, then run the standard search +
+	 * serialize path. Commits on blur / Enter (not per-keystroke) so the re-render never steals focus.
+	 *
+	 * @param {string} pRecordSet @param {string} pViewContext @param {string} pField @param {string} pClauseKey @param {string} pValue
+	 */
+	applyQuickFilterText(pRecordSet, pViewContext, pField, pClauseKey, pValue)
+	{
+		this.bumpRenderEpoch();
+		const tmpProvider = this.pict.providers['RSP-Provider-' + pRecordSet];
+		if (tmpProvider && typeof tmpProvider.upsertQuickFilterClauseValue === 'function')
+		{
+			tmpProvider.upsertQuickFilterClauseValue(pField, pClauseKey, (pValue === undefined || pValue === null) ? '' : String(pValue).trim());
+		}
+		this.handleSearch(null, pRecordSet, pViewContext);
+	}
+
+	/**
+	 * Apply a date-range quick filter: set one bound (`start`/`end`) of the field's DateRange clause
+	 * (removed when both bounds clear), then run the search.
+	 *
+	 * @param {string} pRecordSet @param {string} pViewContext @param {string} pField @param {string} pClauseKey @param {'start'|'end'} pWhich @param {string} pValue
+	 */
+	applyQuickFilterDate(pRecordSet, pViewContext, pField, pClauseKey, pWhich, pValue)
+	{
+		this.bumpRenderEpoch();
+		const tmpProvider = this.pict.providers['RSP-Provider-' + pRecordSet];
+		if (tmpProvider && typeof tmpProvider.upsertQuickFilterDateRange === 'function')
+		{
+			tmpProvider.upsertQuickFilterDateRange(pField, pClauseKey, pWhich, (pValue === undefined || pValue === null) ? '' : pValue);
+		}
+		this.handleSearch(null, pRecordSet, pViewContext);
+	}
+
+	/**
+	 * Apply an entity quick filter: set the field's entity clause to the picked value (removed when
+	 * cleared), then run the search. Called from the quick-bar picker's OnChange.
+	 *
+	 * @param {string} pRecordSet @param {string} pViewContext @param {string} pField @param {string} pClauseKey @param {any} pValue
+	 */
+	applyQuickFilterEntity(pRecordSet, pViewContext, pField, pClauseKey, pValue)
+	{
+		this.bumpRenderEpoch();
+		const tmpProvider = this.pict.providers['RSP-Provider-' + pRecordSet];
+		if (tmpProvider && typeof tmpProvider.upsertQuickFilterEntity === 'function')
+		{
+			tmpProvider.upsertQuickFilterEntity(pField, pClauseKey, pValue);
+		}
+		this.handleSearch(null, pRecordSet, pViewContext);
+	}
+
 	/**
 	 * @param {Event} pEvent - The DOM event that triggered the search
 	 * @param {string} pRecordSet - The record set being filtered
@@ -921,6 +1127,7 @@ class ViewRecordSetSUBSETFilters extends libPictView
 			if (tmpFilterRecordSet)
 			{
 				this._paintFilterControls(tmpFilterRecordSet);
+					this._renderQuickFilters(tmpFilterRecordSet, tmpFilterViewContext);
 				// (Re)render the experiences dropdown only when its container is empty — i.e. on
 				// a fresh filter render — not on every sub-render (add-filter dropdown, etc.).
 				const tmpExpContainer = document.getElementById('FilterPersistenceView-Container');

package/source/views/filters/RecordSet-Filter-EntityReference-Base.js

@@ -158,6 +158,19 @@ class ViewRecordSetSUBSETFilterEntityReferenceBase extends ViewRecordSetSUBSETFi
 				|| pRecord.ExternalFilterByColumns || (pRecord.ExternalFilterByColumn ? [ pRecord.ExternalFilterByColumn ] : [ 'Name' ]);
 			pRecord.ClauseDescriptor.PictForm.ValueArrayAddress = pRecord.ClauseValuesAddress;
 			pRecord.ClauseDescriptor.PictForm.GetContextScopeFilter = () => this.getContextScopeFilter(this.getInformaryScopedValue(pRecord.ClauseAddress) || pRecord);
+			// JoinEntity compound display (host opt-in on the clause): show each searched row joined to a
+			// parent entity's field — e.g. a LineItem disambiguated by its Project. The picker fetch-then-
+			// merges the join (Meadow can't join in one read). Forwarded straight through; no-op when unset.
+			if (pRecord.JoinEntity || pRecord.ClauseDescriptor.PictForm.JoinEntity)
+			{
+				const tmpPF = pRecord.ClauseDescriptor.PictForm;
+				tmpPF.JoinEntity = tmpPF.JoinEntity || pRecord.JoinEntity;
+				tmpPF.JoinField = tmpPF.JoinField || pRecord.JoinField;
+				tmpPF.JoinEntityValueField = tmpPF.JoinEntityValueField || pRecord.JoinEntityValueField;
+				tmpPF.JoinEntityDisplayField = tmpPF.JoinEntityDisplayField || pRecord.JoinEntityDisplayField;
+				if (tmpPF.JoinEntityFirst === undefined && pRecord.JoinEntityFirst !== undefined) { tmpPF.JoinEntityFirst = pRecord.JoinEntityFirst; }
+				if (tmpPF.JoinSeparator === undefined && pRecord.JoinSeparator !== undefined) { tmpPF.JoinSeparator = pRecord.JoinSeparator; }
+			}
 			// Saved-filter seeding: mirror the live clause's Values array into the csv `.StringArrayValue`
 			// the input reads, so a reloaded/persisted filter shows its current selections on render.
 			const tmpLiveClause = this.getInformaryScopedValue(pRecord.ClauseAddress);