pict-section-recordset 1.1.0 → 1.3.0

package/package.json

@@ -1,8 +1,12 @@
 {
   "name": "pict-section-recordset",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "Pict dynamic record set management views",
   "main": "source/Pict-Section-RecordSet.js",
+  "files": [
+    "source",
+    "types"
+  ],
   "directories": {
     "test": "test"
   },

package/source/views/RecordSet-Filters.js

@@ -58,12 +58,36 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 .prsp-filters-drawer-inner { overflow: hidden; min-height: 0; }
 .prsp-filters.drawer-open .prsp-filters-drawer-inner { margin-top: 0.6rem; padding: 0.95rem 1.1rem;
 	border: 1px solid var(--theme-color-border-light, #e8ebf0); border-radius: 10px; background: var(--theme-color-background-panel, #fff); }
-.prsp-filters-add { margin: 0.4rem 0 0.2rem; }
+.prsp-filters-add { position: relative; margin: 0.4rem 0 0.2rem; }
+.prsp-addfilter-trigger { display: inline-flex; align-items: center; gap: 0.35rem; }
 /* Drawer footer: filter experience on the left, Clear/Reset/Apply on the right. */
 .prsp-filters-footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap;
 	margin-top: 0.85rem; padding-top: 0.75rem; border-top: 1px solid var(--theme-color-border-light, #e8ebf0); }
 .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; }
+
+/* Module-owned "Add filter" popover (replaces the old native <select> pickers). */
+.prsp-addfilter-pop { position: absolute; z-index: 30; top: calc(100% + 0.35rem); left: 0; min-width: 250px; max-width: 340px; display: none; }
+.prsp-addfilter-pop.open { display: block; }
+.prsp-addfilter-panel { background: var(--theme-color-background-panel, #fff); border: 1px solid var(--theme-color-border-default, #d7dce3);
+	border-radius: 10px; box-shadow: 0 10px 28px rgba(17, 24, 39, 0.14); overflow: hidden; }
+.prsp-addfilter-search { display: flex; align-items: center; gap: 0.4rem; padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--theme-color-border-light, #e8ebf0); }
+.prsp-addfilter-search-ic { display: inline-flex; color: var(--theme-color-text-muted, #6b7686); font-size: 0.9rem; }
+.prsp-addfilter-search input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 0.9rem; border: none; outline: none; background: transparent; color: var(--theme-color-text-primary, #1f2733); }
+.prsp-addfilter-list { max-height: 280px; overflow-y: auto; }
+.prsp-addfilter-empty { padding: 0.7rem 0.8rem; color: var(--theme-color-text-muted, #6b7686); font-size: 0.86rem; }
+.prsp-addfilter-field { border-bottom: 1px solid var(--theme-color-border-light, #eef1f5); }
+.prsp-addfilter-field:last-child { border-bottom: none; }
+.prsp-addfilter-field-btn { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%;
+	font: inherit; font-size: 0.9rem; text-align: left; cursor: pointer; padding: 0.5rem 0.75rem; border: none; background: transparent; color: var(--theme-color-text-primary, #1f2733); }
+.prsp-addfilter-field-btn:hover { background: var(--theme-color-background-tertiary, #eceef2); }
+.prsp-addfilter-chev { display: inline-flex; flex: 0 0 auto; color: var(--theme-color-text-muted, #6b7686); font-size: 0.85rem; transition: transform 0.15s ease; }
+.prsp-addfilter-field.is-expanded .prsp-addfilter-chev { transform: rotate(90deg); }
+.prsp-addfilter-clauses { display: flex; flex-direction: column; }
+.prsp-addfilter-clause { display: flex; align-items: center; gap: 0.4rem; width: 100%; text-align: left; cursor: pointer;
+	font: inherit; font-size: 0.85rem; padding: 0.4rem 0.8rem 0.4rem 1.6rem; border: none; background: transparent; color: var(--theme-color-text-secondary, #45505f); }
+.prsp-addfilter-clause:hover { background: color-mix(in srgb, var(--theme-color-brand-primary, #156dd1) 10%, transparent); color: var(--theme-color-brand-primary, #156dd1); }
+.prsp-addfilter-clause-ic { display: inline-flex; font-size: 0.8rem; }
 `,
 	CSSPriority: 500,
 
@@ -149,54 +173,62 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 			Template: /*html*/`
 	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Fieldset] -->
 	<div class="prsp-filters-add">
-		<button type="button" class="prsp-filters-btn-text" id="PRSP_Filter_Button_Add" title="Add a new filter clause" onclick="_Pict.views['PRSP-Filters'].selectFilterToAdd(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">+ Add filter</button>
-		<div id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown"></div>
+		<button type="button" class="prsp-filters-btn-text prsp-addfilter-trigger" id="PRSP_Filter_Button_Add" title="Add a new filter clause" onclick="_Pict.views['PRSP-Filters'].toggleAddFilterPopover(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}')">{~I:Plus~} Add filter</button>
+		<div class="prsp-addfilter-pop" id="PRSP_AddFilter_Popover"></div>
 	</div>
 	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Fieldset] -->
 `
 		},
 		{
-			Hash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown',
+			Hash: 'PRSP-AddFilter-Popover',
 			Template: /*html*/`
-	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Dropdown] -->
-	<div>
-		<select id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Select" data-i-view-context="{~D:Record.ViewContext~}" onchange="event.preventDefault(); _Pict.views['PRSP-Filters'].render('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown', undefined,
-		{
-			ViewContext: '{~D:Record.ViewContext~}',
-			RecordSet: event.target.querySelector('option:checked').getAttribute('data-i-recordset'),
-			FilterKey: event.target.querySelector('option:checked').getAttribute('data-i-filter-key'),
-			AvailableClauses: _Pict.providers[\`RSP-Provider-\${event.target.querySelector('option:checked').getAttribute('data-i-recordset')}\`].getFilterClauseSchemaForKey(event.target.querySelector('option:checked').getAttribute('data-i-filter-key')).AvailableClauses,
-		});">
-			{~TS:PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry:Scope.getFilterSchema()~}
-		</select>
-		<div id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown">
+	<!-- DefaultPackage pict view template: [PRSP-AddFilter-Popover] -->
+	<div class="prsp-addfilter-panel">
+		<div class="prsp-addfilter-search">
+			<span class="prsp-addfilter-search-ic">{~I:Search~}</span>
+			<input type="text" id="PRSP_AddFilter_Search" placeholder="Search filters…" autocomplete="off" value="{~D:AppData.PRSPAddFilter.Search~}" oninput="_Pict.views['PRSP-Filters'].searchAddFilter(this.value)" onkeydown="if (event.key === 'Escape') { event.preventDefault(); _Pict.views['PRSP-Filters'].closeAddFilterPopover(); }">
+		</div>
+		<div class="prsp-addfilter-list" id="PRSP_AddFilter_List">
+			{~T:PRSP-AddFilter-List~}
 		</div>
 	</div>
-	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Dropdown] -->
+	<!-- DefaultPackage end view template: [PRSP-AddFilter-Popover] -->
 `
 		},
 		{
-			Hash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown',
+			Hash: 'PRSP-AddFilter-List',
 			Template: /*html*/`
-	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown] -->
-	<select id="PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown-Select">
-		{~TS:PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry:Record.AvailableClauses~}
-	</select>
-	<button type="button" id="PRSP_Filter_Button_ConfirmAdd" onclick="_Pict.views['PRSP-Filters'].addFilter(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}',
-		document.getElementById('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown').querySelector('option:checked').getAttribute('data-i-filter-key'),
-		document.getElementById('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown').querySelector('option:checked').getAttribute('data-i-clause-key'),
-	)">Add Filter</button>
-	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown] -->
+	<!-- DefaultPackage pict view template: [PRSP-AddFilter-List] -->
+	{~TS:PRSP-AddFilter-Field:AppData.PRSPAddFilter.Fields~}
+	{~NE:AppData.PRSPAddFilter.IsEmpty^<div class="prsp-addfilter-empty">No filters found.</div>~}
+	<!-- DefaultPackage end view template: [PRSP-AddFilter-List] -->
 `
 		},
 		{
-			Hash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry',
+			Hash: 'PRSP-AddFilter-Field',
 			Template: /*html*/`
-	<!-- DefaultPackage pict view template: [PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry] -->
-	<option value="{~D:Record.FilterKey~}|{~D:Record.ClauseKey~}" data-i-recordset="{~D:Record.RecordSet~}" data-i-filter-key="{~D:Record.FilterKey~}" data-i-clause-key="{~D:Record.ClauseKey~}">
-		{~D:Record.DisplayName~}
-	</option>
-	<!-- DefaultPackage end view template:	[PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Entry] -->
+	<!-- DefaultPackage pict view template: [PRSP-AddFilter-Field] -->
+	<div class="prsp-addfilter-field {~D:Record.ExpandedClass~}">
+		<button type="button" class="prsp-addfilter-field-btn" onclick="_Pict.views['PRSP-Filters'].toggleAddFilterField('{~D:Record.FilterKey~}')">
+			<span class="prsp-addfilter-field-name">{~D:Record.DisplayName~}</span>
+			<span class="prsp-addfilter-chev">{~I:ChevronRight~}</span>
+		</button>
+		<div class="prsp-addfilter-clauses">
+			{~TS:PRSP-AddFilter-Clause:Record.ClausesToShow~}
+		</div>
+	</div>
+	<!-- DefaultPackage end view template: [PRSP-AddFilter-Field] -->
+`
+		},
+		{
+			Hash: 'PRSP-AddFilter-Clause',
+			Template: /*html*/`
+	<!-- DefaultPackage pict view template: [PRSP-AddFilter-Clause] -->
+	<button type="button" class="prsp-addfilter-clause" onclick="_Pict.views['PRSP-Filters'].addFilter(event, '{~D:AppData.PRSPAddFilter.RecordSet~}', '{~D:AppData.PRSPAddFilter.ViewContext~}', '{~D:Record.FilterKey~}', '{~D:Record.ClauseKey~}')">
+		<span class="prsp-addfilter-clause-ic">{~I:Plus~}</span>
+		<span>{~D:Record.DisplayName~}</span>
+	</button>
+	<!-- DefaultPackage end view template: [PRSP-AddFilter-Clause] -->
 `
 		},
 	],
@@ -210,15 +242,15 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 			RenderMethod: 'replace'
 		},
 		{
-			RenderableHash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown',
-			TemplateHash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown',
-			ContentDestinationAddress: '#PRSP-SUBSET-Filters-Template-AddFilter-Dropdown',
+			RenderableHash: 'PRSP_AddFilter_Popover',
+			TemplateHash: 'PRSP-AddFilter-Popover',
+			ContentDestinationAddress: '#PRSP_AddFilter_Popover',
 			RenderMethod: 'replace',
 		},
 		{
-			RenderableHash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown',
-			TemplateHash: 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown',
-			ContentDestinationAddress: '#PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown',
+			RenderableHash: 'PRSP_AddFilter_List',
+			TemplateHash: 'PRSP-AddFilter-List',
+			ContentDestinationAddress: '#PRSP_AddFilter_List',
 			RenderMethod: 'replace',
 		},
 	],
@@ -315,6 +347,15 @@ class ViewRecordSetSUBSETFilters extends libPictView
 		// stale callback doesn't clobber DOM that now belongs to a different
 		// filter experience.
 		this._renderEpoch = 0;
+		// Add-filter popover state (module-owned, replaces the old native <select> pickers).
+		this._addFilterOpen = false;
+		this._addFilterRecordSet = null;
+		this._addFilterViewContext = null;
+		this._addFilterSearch = '';
+		this._addFilterExpandedKey = null;
+		// FilterKeys to hide from the add-filter popover (e.g. internal/audit columns). Host apps
+		// set this; it is merged with a per-record-set config `FilterFieldBlacklist`.
+		this.filterFieldBlacklist = [];
 	}
 
 	/**
@@ -617,12 +658,96 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	 * @param {string} pRecordSet - The record set being filtered
 	 * @param {string} pViewContext - The view context for the filter (ex. List, Dashboard)
 	 */
-	selectFilterToAdd(pEvent, pRecordSet, pViewContext)
+	toggleAddFilterPopover(pEvent, pRecordSet, pViewContext)
 	{
-		if (pEvent) pEvent.preventDefault();
-		//const tmpRecordsetProvider = this.pict.providers['RSP-Provider-' + pRecordSet];
-		//this.pict.log.info(`Selecting filter to add for record set: ${pRecordSet} in view context: ${pViewContext}`, tmpRecordsetProvider.getFilterSchema())
-		this.renderWithScope(this.pict.providers[`RSP-Provider-${pRecordSet}`], 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown', undefined, { RecordSet: pRecordSet, ViewContext: pViewContext });
+		if (pEvent) { pEvent.preventDefault(); }
+		if (this._addFilterOpen)
+		{
+			return this.closeAddFilterPopover();
+		}
+		this._addFilterOpen = true;
+		this._addFilterRecordSet = pRecordSet;
+		this._addFilterViewContext = pViewContext;
+		this._addFilterSearch = '';
+		this._addFilterExpandedKey = null;
+		this._buildAddFilterFields(pRecordSet);
+		this.render('PRSP_AddFilter_Popover', undefined, { RecordSet: pRecordSet, ViewContext: pViewContext });
+		this._paintAddFilterOpenState();
+	}
+
+	/** Close the add-filter popover. */
+	closeAddFilterPopover()
+	{
+		this._addFilterOpen = false;
+		this._addFilterExpandedKey = null;
+		this._paintAddFilterOpenState();
+	}
+
+	/**
+	 * Filter the add-filter field list by a search term, re-rendering only the list so the
+	 * search input keeps focus.
+	 * @param {string} pValue - The search term.
+	 */
+	searchAddFilter(pValue)
+	{
+		this._addFilterSearch = pValue || '';
+		this._buildAddFilterFields(this._addFilterRecordSet);
+		this.render('PRSP_AddFilter_List', undefined, { RecordSet: this._addFilterRecordSet, ViewContext: this._addFilterViewContext });
+	}
+
+	/**
+	 * Expand or collapse a field's available clauses in the add-filter popover.
+	 * @param {string} pFilterKey - The field whose clauses to toggle.
+	 */
+	toggleAddFilterField(pFilterKey)
+	{
+		this._addFilterExpandedKey = (this._addFilterExpandedKey === pFilterKey) ? null : pFilterKey;
+		this._buildAddFilterFields(this._addFilterRecordSet);
+		this.render('PRSP_AddFilter_List', undefined, { RecordSet: this._addFilterRecordSet, ViewContext: this._addFilterViewContext });
+	}
+
+	/**
+	 * (Re)build the add-filter popover's field list into AppData from the record set's filter
+	 * schema, honouring the current search term and the expanded field.
+	 * @param {string} pRecordSet - The record set whose filter schema to read.
+	 */
+	_buildAddFilterFields(pRecordSet)
+	{
+		const tmpProvider = this.pict.providers[`RSP-Provider-${pRecordSet}`];
+		const tmpSchema = (tmpProvider && typeof tmpProvider.getFilterSchema === 'function') ? tmpProvider.getFilterSchema() : {};
+		const tmpRecordSetConfig = this.pict.PictSectionRecordSet?.recordSetProviderConfigurations?.[pRecordSet] || {};
+		const tmpBlacklist = [].concat(this.filterFieldBlacklist || [], Array.isArray(tmpRecordSetConfig.FilterFieldBlacklist) ? tmpRecordSetConfig.FilterFieldBlacklist : []);
+		const tmpSearch = (this._addFilterSearch || '').toLowerCase();
+		const tmpFields = Object.values(tmpSchema)
+			.filter((pField) => Array.isArray(pField.AvailableClauses) && pField.AvailableClauses.length > 0)
+			.filter((pField) => !tmpBlacklist.includes(pField.FilterKey))
+			.filter((pField) => !tmpSearch || String(pField.DisplayName || pField.FilterKey).toLowerCase().includes(tmpSearch))
+			.sort((pA, pB) => String(pA.DisplayName || pA.FilterKey).localeCompare(String(pB.DisplayName || pB.FilterKey)))
+			.map((pField) =>
+			{
+				const tmpExpanded = (pField.FilterKey === this._addFilterExpandedKey);
+				return {
+					FilterKey: pField.FilterKey,
+					DisplayName: pField.DisplayName || pField.FilterKey,
+					ExpandedClass: tmpExpanded ? 'is-expanded' : '',
+					ClausesToShow: tmpExpanded ? pField.AvailableClauses : [],
+				};
+			});
+		this.pict.AppData.PRSPAddFilter =
+		{
+			RecordSet: pRecordSet,
+			ViewContext: this._addFilterViewContext,
+			Search: this._addFilterSearch || '',
+			IsEmpty: tmpFields.length === 0,
+			Fields: tmpFields,
+		};
+	}
+
+	/** Reflect the add-filter popover's open/closed state on its container element. */
+	_paintAddFilterOpenState()
+	{
+		const tmpPopover = document.getElementById('PRSP_AddFilter_Popover');
+		if (tmpPopover) { tmpPopover.classList.toggle('open', !!this._addFilterOpen); }
 	}
 
 	/**
@@ -681,11 +806,29 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	 */
 	onBeforeRender(pRenderable)
 	{
+		// Re-assert ONLY the consolidated-control chrome (the wrapper, search row, filter toggle +
+		// Search button, the Filter Experiences container, and Clear/Reset/Apply) so the module owns
+		// that markup. Deliberately NOT the add-filter dropdown or per-clause templates: host apps
+		// (e.g. Headlight) layer their own styled add-filter popover and clause UI on top, and
+		// re-asserting those clobbers them — re-exposing bare native <select> dropdowns and a dead
+		// remove button. Those host overrides register at init and must survive each re-render.
+		const tmpChromeTemplateHashes =
+		[
+			'PRSP-SUBSET-Filters-Template',
+			'PRSP-SUBSET-Filters-Template-Input-Fieldset',
+			'PRSP-SUBSET-Filters-Template-Button-Fieldset',
+			'PRSP-SUBSET-Filters-Template-ManageFilters-Fieldset',
+			'PRSP-SUBSET-Filters-Template-DrawerActions-Fieldset'
+		];
 		if (this.pict.TemplateProvider && Array.isArray(_DEFAULT_CONFIGURATION_SUBSET_Filter.Templates))
 		{
-			for (const tmpTemplate of _DEFAULT_CONFIGURATION_SUBSET_Filter.Templates)
+			for (const tmpTemplateHash of tmpChromeTemplateHashes)
 			{
-				this.pict.TemplateProvider.addTemplate(tmpTemplate.Hash, tmpTemplate.Template);
+				const tmpTemplate = _DEFAULT_CONFIGURATION_SUBSET_Filter.Templates.find((pTemplate) => pTemplate.Hash === tmpTemplateHash);
+				if (tmpTemplate)
+				{
+					this.pict.TemplateProvider.addTemplate(tmpTemplate.Hash, tmpTemplate.Template);
+				}
 			}
 		}
 		return super.onBeforeRender(pRenderable);
@@ -698,34 +841,15 @@ class ViewRecordSetSUBSETFilters extends libPictView
 	onAfterRender(pRenderable)
 	{
 		const res = super.onAfterRender(pRenderable);
-		if (pRenderable?.RenderableHash === 'PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown')
+		// Add-filter popover sub-renders (the panel + its list) only repaint that widget — skip the
+		// heavy post-render pass below and just keep the open/closed class in sync.
+		if (pRenderable?.RenderableHash === 'PRSP_AddFilter_Popover' || pRenderable?.RenderableHash === 'PRSP_AddFilter_List')
 		{
-			return;
-		}
-		const tmpRecord = { };
-		const tmpSelect = document.getElementById('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Select');
-		if (tmpSelect)
-		{
-			const tmpActiveOption = document.getElementById('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-Select')?.querySelector('option:checked');
-			const tmpRecordSet = tmpActiveOption?.getAttribute('data-i-recordset');
-			const tmpFilterKey = tmpActiveOption?.getAttribute('data-i-filter-key');
-			const tmpViewContext = tmpSelect?.getAttribute('data-i-view-context');
-			if (tmpRecordSet && tmpFilterKey)
-			{
-				const tmpProvider = this.pict.providers[`RSP-Provider-${tmpRecordSet}`];
-				if (tmpProvider)
-				{
-					tmpRecord.RecordSet = tmpRecordSet;
-					tmpRecord.FilterKey = tmpFilterKey;
-					tmpRecord.ViewContext = tmpViewContext;
-					tmpRecord.AvailableClauses = tmpProvider.getFilterClauseSchemaForKey(tmpFilterKey).AvailableClauses;
-					if (Array.isArray(tmpRecord.AvailableClauses))
-					{
-						this.render('PRSP-SUBSET-Filters-Template-AddFilter-Dropdown-AddFilterClauseDropdown', undefined, tmpRecord, pRenderable);
-					}
-				}
-			}
+			this._paintAddFilterOpenState();
+			return res;
 		}
+		// Any full re-render rebuilds the add-filter slot, so the popover is closed — reset its state.
+		this._addFilterOpen = false;
 		this.onMarshalToView();
 
 		// NOTE: This is where we ensure the filter experience is applied after a render.

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

@@ -20,7 +20,49 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 	AutoSolveWithApp: false,
 	AutoSolveOrdinal: 0,
 
-	CSS: false,
+	// Themeable filter-clause chrome. Every filter type renders through the shared
+	// PRSP-Filter-Base-Template wrapper below (each type only plugs in its own value
+	// input via getFilterFormTemplate()), so styling it here themes every clause for
+	// every host app. This view (PRSP-FilterType-Base) is always constructed, and
+	// pict-view registers a view's CSS into the global cascade at construction, so
+	// these rules apply to all clauses regardless of which type rendered them.
+	//
+	// Host apps brand by defining the --theme-color-* tokens; the hardcoded values are
+	// sensible fallbacks. CSS-first: native <select>s are de-nativized with
+	// appearance:none + a custom chevron rather than swapped for a combobox widget
+	// (that is a later upgrade with cross-browser quirks of its own).
+	CSS: /*css*/`
+.prsp-filters-clauses { display: flex; flex-direction: column; gap: 0.5rem; }
+
+.prsp-filter { display: flex; align-items: flex-end; gap: 0.5rem; }
+.prsp-filter *, .prsp-filter *::before, .prsp-filter *::after { box-sizing: border-box; }
+.prsp-filter-body { flex: 1 1 auto; min-width: 0; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem 0.75rem; }
+
+/* Inputs rendered by pict-section-form inside a clause. Match the consolidated
+   control's search box so clauses stop looking like bare native controls. */
+.prsp-filter label { font: inherit; font-size: 0.78rem; font-weight: 600; display: block;
+	margin: 0 0 0.2rem; color: var(--theme-color-text-secondary, #45505f); }
+.prsp-filter input, .prsp-filter select, .prsp-filter textarea { font: inherit; font-size: 0.92rem; width: 100%;
+	padding: 0.45rem 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-filter input:focus, .prsp-filter select:focus, .prsp-filter textarea: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); }
+/* De-nativize the <select>: drop the platform arrow, add a themed chevron + room for it. */
+.prsp-filter select { appearance: none; -webkit-appearance: none; -moz-appearance: none; cursor: pointer;
+	padding-right: 1.9rem;
+	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7686' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
+	background-repeat: no-repeat; background-position: right 0.6rem center; background-size: 1.05em; }
+
+/* Remove (trash) control — one per clause, inherited by every filter type. */
+.prsp-filter-remove { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
+	width: 2.05rem; height: 2.05rem; padding: 0; cursor: pointer; line-height: 1;
+	border-radius: 8px; border: 1px solid var(--theme-color-border-default, #d7dce3);
+	background: var(--theme-color-background-primary, #fff); color: var(--theme-color-text-muted, #6b7686); }
+.prsp-filter-remove:hover { border-color: var(--theme-color-status-error, #d64545); color: var(--theme-color-status-error, #d64545);
+	background: color-mix(in srgb, var(--theme-color-status-error, #d64545) 12%, transparent); }
+.prsp-filter-remove .pict-icon { font-size: 1.05rem; }
+`,
 	CSSPriority: 500,
 
 	Manifests: {},
@@ -38,16 +80,21 @@ const _DEFAULT_CONFIGURATION_SUBSET_Filter =
 `
 		},
 		{
+			// The shared clause wrapper for every filter type. The type view plugs its own
+			// value input in via getFilterFormTemplate(); the themed remove control is
+			// inherited here (calls the base removeClause() method, reached through the
+			// always-registered PRSP-FilterType-<Type> view) so no host app re-implements one.
 			Hash: 'PRSP-Filter-Base-Template',
 			Template: /*html*/`
 	<!-- DefaultPackage pict view template: [PRSP-Filter-Base-Template] -->
-	<div id="PRSP_Filter_Container_{~D:Record.Hash~}">
-		<button type="button"
-			onclick="_Pict.views['PRSP-Filters'].removeFilter(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}', '{~D:Record.Hash~}');"
-			>
-			-
+	<div class="prsp-filter" id="PRSP_Filter_Container_{~D:Record.Hash~}" data-i-filter-hash="{~D:Record.Hash~}">
+		<div class="prsp-filter-body">
+			{~TBR:Context[0].getFilterFormTemplate()~}
+		</div>
+		<button type="button" class="prsp-filter-remove" title="Remove this filter" aria-label="Remove this filter"
+			onclick="_Pict.views['PRSP-FilterType-{~D:Record.Type~}'].removeClause(event, '{~D:Record.RecordSet~}', '{~D:Record.ViewContext~}', '{~D:Record.Hash~}');">
+			{~I:Trash~}
 		</button>
-		{~TBR:Context[0].getFilterFormTemplate()~}
 	</div>
 	<!-- DefaultPackage end view template:	[PRSP-Filter-Base-Template] -->
 `
@@ -99,6 +146,38 @@ class ViewRecordSetSUBSETFilterBase extends libPictView
 		return 'PRSP-Filter-Base-Form';
 	}
 
+	/**
+	 * Remove this filter clause from its record set and re-render the filter control.
+	 *
+	 * Lives on the base view so every filter type inherits a single, themeable remove
+	 * affordance and no host application has to re-implement one. Delegates to the
+	 * consolidated control view (the canonical re-render path) and falls back to the
+	 * record-set provider directly if that view is somehow unavailable.
+	 *
+	 * @param {Event} pEvent - The DOM event that triggered the removal.
+	 * @param {string} pRecordSet - The record set being filtered.
+	 * @param {string} pViewContext - The view context for the filter (e.g. List, Dashboard).
+	 * @param {string} pHash - The hash of the specific filter clause to remove.
+	 */
+	removeClause(pEvent, pRecordSet, pViewContext, pHash)
+	{
+		if (pEvent)
+		{
+			pEvent.preventDefault();
+		}
+		const tmpFiltersView = this.pict.views['PRSP-Filters'];
+		if (tmpFiltersView && typeof tmpFiltersView.removeFilter === 'function')
+		{
+			return tmpFiltersView.removeFilter(pEvent, pRecordSet, pViewContext, pHash);
+		}
+		// Fallback: the consolidated control view isn't present, so remove directly.
+		const tmpProvider = this.pict.providers[`RSP-Provider-${pRecordSet}`];
+		if (tmpProvider && typeof tmpProvider.removeFilterClause === 'function')
+		{
+			tmpProvider.removeFilterClause(pHash);
+		}
+	}
+
 	/**
 	 * @return {string} - The prefix for the informary address.
 	 */
@@ -121,4 +200,3 @@ class ViewRecordSetSUBSETFilterBase extends libPictView
 module.exports = ViewRecordSetSUBSETFilterBase;
 
 module.exports.default_configuration = _DEFAULT_CONFIGURATION_SUBSET_Filter;
-