@mmlogic/components 0.5.13 → 0.5.15

package/dist/collection/components/memo/mrd-memo-view/mrd-memo-view.css

@@ -0,0 +1,108 @@
+@charset "UTF-8";
+:host {
+  display: block;
+}
+
+.mrd-memo-view {
+  max-width: 720px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--mrd-space-3);
+}
+.mrd-memo-view__header {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: var(--mrd-space-3);
+}
+.mrd-memo-view__title {
+  font-size: var(--mrd-font-size-2xl);
+  font-weight: var(--mrd-font-weight-bold);
+  color: var(--mrd-color-neutral-900);
+  letter-spacing: -0.02em;
+  margin: 0;
+}
+.mrd-memo-view__important {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-warning);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.mrd-memo-view__important svg {
+  width: 0.875rem;
+  height: 0.875rem;
+}
+.mrd-memo-view__meta {
+  display: flex;
+  align-items: center;
+  gap: var(--mrd-space-2);
+  font-size: var(--mrd-font-size-sm);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-memo-view__meta-author {
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: inherit;
+  font-weight: var(--mrd-font-weight-medium);
+  color: var(--mrd-color-neutral-500);
+  cursor: pointer;
+}
+.mrd-memo-view__meta-author:hover {
+  color: var(--mrd-color-primary);
+  text-decoration: underline;
+}
+.mrd-memo-view__meta-date::before {
+  content: "·";
+  margin-right: var(--mrd-space-2);
+}
+.mrd-memo-view__meta-author + .mrd-memo-view__meta-date::before {
+  content: "·";
+}
+.mrd-memo-view__labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--mrd-space-2);
+}
+.mrd-memo-view__badge {
+  display: inline-flex;
+  align-items: center;
+  height: 1.375rem;
+  padding: 0 var(--mrd-space-2);
+  border-radius: var(--mrd-border-radius-full, 999px);
+  font-size: var(--mrd-font-size-xs);
+  font-weight: var(--mrd-font-weight-medium);
+}
+.mrd-memo-view__badge--plain {
+  background: var(--mrd-color-neutral-100);
+  color: var(--mrd-color-neutral-600);
+}
+.mrd-memo-view__container-link {
+  align-self: flex-start;
+  background: none;
+  border: none;
+  padding: 0;
+  font-family: var(--mrd-font-family);
+  font-size: var(--mrd-font-size-sm);
+  font-weight: var(--mrd-font-weight-semibold);
+  color: var(--mrd-color-primary);
+  cursor: pointer;
+}
+.mrd-memo-view__container-link:hover {
+  text-decoration: underline;
+}
+.mrd-memo-view__divider {
+  height: var(--mrd-border-width);
+  background: var(--mrd-color-neutral-200);
+}
+.mrd-memo-view__body {
+  font-size: var(--mrd-font-size-base);
+  color: var(--mrd-color-neutral-800);
+  line-height: var(--mrd-line-height-relaxed);
+  word-break: break-word;
+}

package/dist/collection/components/memo/mrd-memo-view/mrd-memo-view.js

@@ -0,0 +1,204 @@
+import { Host, h } from "@stencil/core";
+import DOMPurify from "dompurify";
+import { t } from "../../../utils/i18n";
+import { formatDateTime } from "../../../utils/format";
+/**
+ * Archetype-driven single-memo view. Given a `commons.memo` binding and a data
+ * record, renders the memo the way a note should read: the title and body are
+ * the prominent content, author and timestamp sit below as a subtle metadata
+ * line — not the other way around.
+ */
+export class MrdMemoView {
+    constructor() {
+        /** The data record from the /data endpoint. Fields keyed by name; relations under `_links`. */
+        this.data = {};
+        this.locale = navigator.language;
+        /** listItems of the FIELD bound to the `labels` slot, resolved by mrd-layout-section
+         *  from its own items array (archetype metadata does not publish listItems), so the
+         *  label badges get a real label/color instead of the raw stored key. */
+        this.labelsListItems = null;
+    }
+    /** Value of a value-slot: reads data[field] via the slot→field map. */
+    slotValue(slot) {
+        var _a, _b;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        return this.data[field];
+    }
+    /** Relation link for a relation-slot: reads data._links[field]. */
+    slotLink(slot) {
+        var _a, _b, _c, _d;
+        const field = (_b = (_a = this.archetype) === null || _a === void 0 ? void 0 : _a.slots) === null || _b === void 0 ? void 0 : _b[slot];
+        if (!field)
+            return undefined;
+        const links = ((_d = (_c = this.data) === null || _c === void 0 ? void 0 : _c._links) !== null && _d !== void 0 ? _d : {});
+        return links[field];
+    }
+    renderAuthor() {
+        const link = this.slotLink('author');
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("button", { type: "button", class: "mrd-memo-view__meta-author", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, link.name));
+    }
+    renderContainer() {
+        const link = this.slotLink('container');
+        if (!(link === null || link === void 0 ? void 0 : link.href) || !link.name)
+            return null;
+        return (h("button", { type: "button", class: "mrd-memo-view__container-link", onClick: () => this.mrdNavigate.emit({ href: link.href, label: link.name }) }, link.name));
+    }
+    renderLabels() {
+        const raw = this.slotValue('labels');
+        const keys = Array.isArray(raw) ? raw.map(String) : (raw != null && raw !== '' ? [String(raw)] : []);
+        if (!keys.length)
+            return null;
+        return (h("div", { class: "mrd-memo-view__labels" }, keys.map(key => {
+            var _a, _b;
+            const listItem = ((_a = this.labelsListItems) !== null && _a !== void 0 ? _a : []).find(li => li.key === key);
+            const label = (_b = listItem === null || listItem === void 0 ? void 0 : listItem.label) !== null && _b !== void 0 ? _b : key;
+            if ((listItem === null || listItem === void 0 ? void 0 : listItem.color) && (listItem === null || listItem === void 0 ? void 0 : listItem.backgroundColor)) {
+                return (h("span", { key: key, class: "mrd-memo-view__badge", style: { color: listItem.color, backgroundColor: listItem.backgroundColor } }, label));
+            }
+            return h("span", { key: key, class: "mrd-memo-view__badge mrd-memo-view__badge--plain" }, label);
+        })));
+    }
+    renderBody() {
+        const bodyRaw = this.slotValue('body');
+        if (bodyRaw == null || bodyRaw === '')
+            return null;
+        return h("div", { class: "mrd-memo-view__body", innerHTML: DOMPurify.sanitize(String(bodyRaw)) });
+    }
+    render() {
+        const titleRaw = this.slotValue('title');
+        const title = titleRaw != null && titleRaw !== '' ? String(titleRaw) : null;
+        const dateRaw = this.slotValue('date');
+        const important = !!this.slotValue('important');
+        return (h(Host, { key: '4d8ed14c54449fbcfddc94a34dcfb220338f8bba' }, h("div", { key: '0e0456277715607580e5373ada10706db1067c7d', class: "mrd-memo-view" }, h("div", { key: 'd5c548617eca9a99eb34409b2082be025cfce2f4', class: "mrd-memo-view__header" }, title && h("h1", { key: '2ecd2eae3f8fdba310679515aa2fe76e02f0c2b2', class: "mrd-memo-view__title" }, title), important && (h("span", { key: 'e5e8284310ab6040f1677bc1241d04d65784c2da', class: "mrd-memo-view__important", title: t('memo_important', this.locale) }, h("svg", { key: 'babe987244b384330533721276b5392c9fe72c5a', viewBox: "0 0 24 24", fill: "currentColor", "aria-hidden": "true" }, h("path", { key: '511956710ae8e440328f9e477551ba1c2d478f1a', d: "M12 2l2.9 6.26L22 9.27l-5 4.87L18.18 21 12 17.27 5.82 21 7 14.14l-5-4.87 7.1-1.01z" })), t('memo_important', this.locale)))), h("div", { key: '41c25e5376d94078debaf62121b8bdf400511d16', class: "mrd-memo-view__meta" }, this.renderAuthor(), dateRaw != null && dateRaw !== '' && (h("span", { key: 'caff8047249745ca98da77b374438e58d150ad7f', class: "mrd-memo-view__meta-date" }, formatDateTime(dateRaw, this.locale)))), this.renderLabels(), this.renderContainer(), h("div", { key: 'bfa4c55458ea19fb920338df9478006b1883e606', class: "mrd-memo-view__divider" }), this.renderBody())));
+    }
+    static get is() { return "mrd-memo-view"; }
+    static get encapsulation() { return "scoped"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["mrd-memo-view.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["mrd-memo-view.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "archetype": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientArchetype",
+                    "resolved": "ClientArchetype",
+                    "references": {
+                        "ClientArchetype": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientArchetype",
+                            "referenceLocation": "ClientArchetype"
+                        }
+                    }
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Resolved `commons.memo` binding: slot name \u2192 concrete field/relation name."
+                },
+                "getter": false,
+                "setter": false
+            },
+            "data": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "Record<string, unknown>",
+                    "resolved": "string | unknown",
+                    "references": {
+                        "Record": {
+                            "location": "global",
+                            "id": "global::Record"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The data record from the /data endpoint. Fields keyed by name; relations under `_links`."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "{}"
+            },
+            "locale": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "locale",
+                "defaultValue": "navigator.language"
+            },
+            "labelsListItems": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ClientListValue[] | null",
+                    "resolved": "ClientListValue[] | null",
+                    "references": {
+                        "ClientListValue": {
+                            "location": "import",
+                            "path": "../../../types/client-layout",
+                            "id": "src/types/client-layout.ts::ClientListValue",
+                            "referenceLocation": "ClientListValue"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "listItems of the FIELD bound to the `labels` slot, resolved by mrd-layout-section\nfrom its own items array (archetype metadata does not publish listItems), so the\nlabel badges get a real label/color instead of the raw stored key."
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "null"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "mrdNavigate",
+                "name": "mrdNavigate",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Navigate to the author or the container. Host resolves the href and routes."
+                },
+                "complexType": {
+                    "original": "{ href?: string; label: string }",
+                    "resolved": "{ href?: string | undefined; label: string; }",
+                    "references": {}
+                }
+            }];
+    }
+}

package/dist/collection/components/merge/mrd-merge-view/mrd-merge-view.js

@@ -121,14 +121,14 @@ export class MrdMergeView {
         var _a, _b;
         let stepContent;
         if (this.step === 'search') {
-            stepContent = (h(MergeSearchStep, { key: '3adb36fb46aa7260641a46a2cf27cc0ef320876f', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
+            stepContent = (h(MergeSearchStep, { key: '88ddac4f8f60a736bc6bc898b553e24771023b82', locale: this.locale, searchQuery: this.searchQuery, searchResults: this.searchResults, isLoading: this.isLoading, onSearchInput: this.handleSearchInput, onSelect: this.handleSelect }));
         }
         else {
             const diff = diffFields(this.fields, this.currentRecord, this.candidate);
             const bLabel = candidateLabel(this.candidate);
             stepContent = this.step === 'compare' ? (h(MergeCompareStep, { locale: this.locale, currentLabel: this.currentLabel, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, recordA: this.currentRecord, recordB: (_a = this.candidate) !== null && _a !== void 0 ? _a : {}, resolutions: this.resolutions, openHistoryKey: this.openHistoryKey, onResolve: this.handleResolve, onToggleHistory: this.handleToggleHistory, onChangeCandidate: this.handleChangeCandidate, onContinue: this.handleContinue })) : (h(MergeConfirmStep, { locale: this.locale, candidateLabel: bLabel, conflicts: diff.conflicts, autoFilled: diff.autoFilled, resolutions: this.resolutions, recordB: (_b = this.candidate) !== null && _b !== void 0 ? _b : {}, openHistoryKey: this.openHistoryKey, onToggleHistory: this.handleToggleHistory, onBack: this.handleBack, onConfirm: this.handleConfirm }));
         }
-        return (h(Host, { key: 'e33a6d66a220b28cc9533da78dc274e2d7ec5c4a' }, h("div", { key: 'b5fb1390d86192f9f6f15e3ccb89e2d21d9c7c8b', class: "mrd-merge-view" }, stepContent)));
+        return (h(Host, { key: '3606faba4c86ae1d981b7c40e4f1cb9cde19cf50' }, h("div", { key: '9605009fec0a7c79a5cd32141d930ea04e5efaad', class: "mrd-merge-view" }, stepContent)));
     }
     static get is() { return "mrd-merge-view"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/table/mrd-table/mrd-table.css

@@ -321,6 +321,42 @@
   pointer-events: none;
   z-index: 10;
 }
+.mrd-table__search-box {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--mrd-space-1);
+  height: 2rem;
+  padding: 0 var(--mrd-space-2);
+  border: 1px solid var(--mrd-border-color-focus, var(--mrd-color-primary));
+  border-radius: var(--mrd-border-radius);
+  background: var(--mrd-color-white, #fff);
+  box-shadow: var(--mrd-shadow-focus, none);
+  color: var(--mrd-color-neutral-400);
+}
+.mrd-table__search-input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-size: var(--mrd-font-size-sm);
+  font-family: var(--mrd-font-family);
+  color: var(--mrd-color-neutral-800);
+  width: 12rem;
+}
+.mrd-table__search-clear {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: none;
+  padding: 0;
+  cursor: pointer;
+  color: var(--mrd-color-neutral-400);
+  font-size: var(--mrd-font-size-xs);
+  line-height: 1;
+}
+.mrd-table__search-clear:hover {
+  color: var(--mrd-color-neutral-700);
+}
 .mrd-table__create-picker-wrap {
   position: relative;
 }

package/dist/collection/components/table/mrd-table/mrd-table.js

@@ -1,7 +1,7 @@
 import { h, Host, writeTask } from "@stencil/core";
 import { t } from "../../../utils/i18n";
-import { buildListPath } from "../../../utils/query-params";
-import { TEXT_TYPES, NON_INTERACTIVE_TYPES, parseDefaultSort, buildSortParam, buildTableQueryParams, buildAggregationQs, filterHasValue, normalizeDatetimeFilter, datetimeFilterToDisplay, } from "./table-query";
+import { buildCreateActionDetail, buildListPath } from "../../../utils/query-params";
+import { TEXT_TYPES, NON_INTERACTIVE_TYPES, SEARCH_DEBOUNCE_MS, parseDefaultSort, buildSortParam, buildTableQueryParams, buildAggregationQs, filterHasValue, normalizeDatetimeFilter, datetimeFilterToDisplay, } from "./table-query";
 import { FilterIcon, TableCell, TotalsRow, TextblockModal, JsonModal, Toolbar } from "./table-parts";
 import { FilterPopup } from "./table-filter-popup";
 import { REQUEST_DEBOUNCE_MS, REQUEST_TIMEOUT_MS, MAX_RETRY_ATTEMPTS, visibleCount, computeWindow, pageRange, getRowFromPages, computeEffectiveTotal, isTotalKnownFromPages, getStalePages, } from "./virtual-scroll";
@@ -27,6 +27,17 @@ export class MrdTable {
         this.keydownHandler = null;
         this.createPickerClickHandler = null;
         this.viewPopoverClickHandler = null;
+        /** Debounce timer for the free-text search box — separate from debounceTimer
+         *  (pending-page requests), since typing and scrolling debounce independently. */
+        this.searchDebounceTimer = null;
+        /** The rendered search <input>, captured so it can be focused the instant it mounts. */
+        this.searchInputEl = null;
+        /** Set by toggleSearch() when the box just expanded; consumed and cleared in componentDidRender(). */
+        this.searchNeedsFocus = false;
+        /** Column filters stashed by stashFiltersForSearch() while the search box is open — the
+         *  backend can't combine `q` with column filters. Restored by restoreFiltersAfterSearch()
+         *  on close, unless the user applied a fresh filter of their own in the meantime. */
+        this.stashedFilters = null;
         /** Watches the host for gaining a box (e.g. its tab pane being shown) — see componentDidLoad. */
         this.resizeObserver = null;
         /** Guards against scheduling more than one column-width measurement per freeze. */
@@ -81,6 +92,10 @@ export class MrdTable {
         this.sortDir = 'asc';
         /** Active filters keyed by field name. */
         this.activeFilters = new Map();
+        /** True while the toolbar's magnifying glass is expanded into the search input. */
+        this.searchOpen = false;
+        /** Current free-text search query — sent as `q` on every mrdLoadPage/aggregations request. */
+        this.searchQuery = '';
         /** Field name of the currently open filter popup (null = closed). */
         this.openFilterCol = null;
         /** Filter state being edited in the open popup. */
@@ -134,6 +149,11 @@ export class MrdTable {
         this.colWidthMeasureScheduled = false;
         this.colWidthsUserSet = false;
         this.fixedContentMeasured = false;
+        // A new item is a different table (possibly not even a VIEW any more) — a leftover
+        // query from the old one should not silently keep filtering it.
+        this.searchOpen = false;
+        this.searchQuery = '';
+        this.stashedFilters = null;
     }
     // ── Lifecycle ──────────────────────────────────────────────────────────────
     componentWillLoad() {
@@ -241,7 +261,12 @@ export class MrdTable {
         if (pageNumber === 0 && this.aggregationsPending) {
             this.aggregationsPending = false;
             const hasAggColumns = this.columns.some(c => c.type === 'FIELD' && c.aggregate);
-            if (!isLastPage || hasAggColumns) {
+            // The aggregations endpoint doesn't support the `q` free-text param, so a request
+            // sent while searching would silently return unfiltered totals. Leave aggregations
+            // (and aggregationsTotal) at null instead — TotalsRow already renders nothing when
+            // aggregations is null, so the totals row just disappears for the duration of the
+            // search rather than showing numbers that don't match the filtered rows.
+            if (!this.searchQuery && (!isLastPage || hasAggColumns)) {
                 this.emitLoadAggregations();
             }
         }
@@ -280,10 +305,18 @@ export class MrdTable {
             document.removeEventListener('click', this.viewPopoverClickHandler);
             this.viewPopoverClickHandler = null;
         }
+        if (this.searchDebounceTimer !== null) {
+            clearTimeout(this.searchDebounceTimer);
+            this.searchDebounceTimer = null;
+        }
     }
     componentDidRender() {
         this.freezeColWidths();
         this.growToFixedContent();
+        if (this.searchNeedsFocus && this.searchInputEl) {
+            this.searchInputEl.focus();
+            this.searchNeedsFocus = false;
+        }
     }
     /** Freeze the column widths once the first data page has rendered.
      *
@@ -574,16 +607,19 @@ export class MrdTable {
         });
     }
     buildActionDetail(action, basicType) {
-        var _a, _b, _c;
+        var _a;
         if (action === 'export') {
             return { action, path: this.buildExcelPath(), qs: this.buildQueryParams(0) };
         }
         if (action === 'create') {
             const v = this.allViews[this.activeViewIdx];
-            const parentPath = ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW'
-                ? `/${(_b = v === null || v === void 0 ? void 0 : v.fromClass) !== null && _b !== void 0 ? _b : ''}/${this.parentId}`
-                : null;
-            return Object.assign({ action, dataClass: (_c = v === null || v === void 0 ? void 0 : v.dataClass) !== null && _c !== void 0 ? _c : '', parentPath }, (basicType ? { basicType } : {}));
+            return buildCreateActionDetail({
+                isRelatedView: ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'RELATED_VIEW',
+                fromClass: v === null || v === void 0 ? void 0 : v.fromClass,
+                parentId: this.parentId,
+                dataClass: v === null || v === void 0 ? void 0 : v.dataClass,
+                basicType,
+            });
         }
         return { action };
     }
@@ -602,7 +638,13 @@ export class MrdTable {
             dataClass: v.dataClass,
         });
     }
-    /** Build query params for a page request from current sort, view filters, filterClass and active column filters. */
+    /** Build query params for a page request from current sort, view filters, filterClass and active column filters.
+     *
+     *  `q` and column filters are mutually exclusive on the backend — combining them breaks
+     *  the search. stashFiltersForSearch() already empties activeFilters for the duration of
+     *  a search, but this guard is the actual guarantee: even if a filter is applied through
+     *  a column header while the search box is still open (before the query is cleared),
+     *  activeFilters is dropped from the request rather than sent alongside `q`. */
     buildQueryParams(page) {
         var _a;
         const v = this.allViews[this.activeViewIdx];
@@ -611,7 +653,8 @@ export class MrdTable {
             sort: this.sortParam(),
             filterClass: v === null || v === void 0 ? void 0 : v.filterClass,
             viewFilters: (_a = v === null || v === void 0 ? void 0 : v.view) === null || _a === void 0 ? void 0 : _a.filter,
-            activeFilters: this.activeFilters.values(),
+            activeFilters: this.searchQuery ? [] : this.activeFilters.values(),
+            query: this.searchQuery,
         });
     }
     /** True when the table is in paginated / virtual-scroll mode rather than driven by the
@@ -917,6 +960,18 @@ export class MrdTable {
         const current = (_b = (_a = this.pendingFilter) === null || _a === void 0 ? void 0 : _a.values) !== null && _b !== void 0 ? _b : [];
         this.pendingFilter = Object.assign(Object.assign({}, this.pendingFilter), { values: checked ? [...current, key] : current.filter(k => k !== key) });
     }
+    /** Common reload after activeFilters or searchQuery changed: drop stale aggregations
+     *  (the next setPage(0) re-requests them, guarded against `q` in setPage() itself) and
+     *  re-fetch page 0. Shared by the filter popup, clear-all, and free-text search. */
+    reloadAfterQueryChange() {
+        this.aggregations = null;
+        this.aggregationsTotal = null;
+        this.aggregationsPending = true;
+        if (this.isPaginated) {
+            this.resetPages();
+            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        }
+    }
     applyFilter() {
         const f = this.pendingFilter;
         if (!(f === null || f === void 0 ? void 0 : f.field)) {
@@ -933,13 +988,7 @@ export class MrdTable {
         }
         this.activeFilters = next;
         this.closeFilterPopup();
-        this.aggregations = null;
-        this.aggregationsTotal = null;
-        this.aggregationsPending = true;
-        if (this.isPaginated) {
-            this.resetPages();
-            this.emitPagesForWindow(this.renderStart, this.renderEnd);
-        }
+        this.reloadAfterQueryChange();
     }
     clearFilter() {
         const name = this.openFilterCol;
@@ -948,23 +997,80 @@ export class MrdTable {
             next.delete(name);
         this.activeFilters = next;
         this.closeFilterPopup();
-        this.aggregations = null;
-        this.aggregationsTotal = null;
-        this.aggregationsPending = true;
-        if (this.isPaginated) {
-            this.resetPages();
-            this.emitPagesForWindow(this.renderStart, this.renderEnd);
-        }
+        this.reloadAfterQueryChange();
     }
     clearAllFilters() {
         this.activeFilters = new Map();
-        this.aggregations = null;
-        this.aggregationsTotal = null;
-        this.aggregationsPending = true;
-        if (this.isPaginated) {
-            this.resetPages();
-            this.emitPagesForWindow(this.renderStart, this.renderEnd);
+        this.reloadAfterQueryChange();
+    }
+    // ── Free-text search ───────────────────────────────────────────────────────
+    /** Search is a VIEW-only affordance — a RELATED_VIEW table is already scoped to
+     *  its parent record, so a free-text box there would invite confusion about what
+     *  it searches across. */
+    get searchEnabled() {
+        var _a;
+        return ((_a = this.item) === null || _a === void 0 ? void 0 : _a.type) === 'VIEW';
+    }
+    toggleSearch() {
+        if (this.searchOpen) {
+            this.closeSearch();
+        }
+        else {
+            this.searchOpen = true;
+            this.searchNeedsFocus = true;
+            this.stashFiltersForSearch();
+        }
+    }
+    /** Collapses the box back to the icon. Clearing a non-empty query and restoring any
+     *  stashed filters can each independently require a reload — reloadAfterQueryChange()
+     *  is called at most once here regardless of how many of the two actually changed. */
+    closeSearch() {
+        this.searchOpen = false;
+        if (this.searchDebounceTimer !== null) {
+            clearTimeout(this.searchDebounceTimer);
+            this.searchDebounceTimer = null;
         }
+        const hadQuery = this.searchQuery !== '';
+        this.searchQuery = '';
+        const filtersRestored = this.restoreFiltersAfterSearch();
+        if (hadQuery || filtersRestored)
+            this.reloadAfterQueryChange();
+    }
+    handleSearchInput(value) {
+        this.searchQuery = value;
+        if (this.searchDebounceTimer !== null)
+            clearTimeout(this.searchDebounceTimer);
+        this.searchDebounceTimer = setTimeout(() => this.applySearch(), SEARCH_DEBOUNCE_MS);
+    }
+    /** Reloads from page 0 with the current searchQuery, same reset as applyFilter(). */
+    applySearch() {
+        this.searchDebounceTimer = null;
+        this.reloadAfterQueryChange();
+    }
+    /** Column filters and the free-text `q` param are mutually exclusive on the backend —
+     *  sending both breaks the search. Opening the search box stashes any active filters
+     *  and clears them (the header filter icons and the clear-all button disappear along
+     *  with activeFilters, so there is nothing extra to hide) and reloads unfiltered. */
+    stashFiltersForSearch() {
+        if (this.activeFilters.size === 0)
+            return;
+        this.stashedFilters = this.activeFilters;
+        this.activeFilters = new Map();
+        this.reloadAfterQueryChange();
+    }
+    /** Restores filters stashed by stashFiltersForSearch(), unless the user applied a fresh
+     *  filter of their own while the search box was open — that explicit choice wins over
+     *  reinstating the old one. Returns whether activeFilters actually changed, so the
+     *  caller can decide whether a reload is needed. */
+    restoreFiltersAfterSearch() {
+        if (!this.stashedFilters)
+            return false;
+        const stashed = this.stashedFilters;
+        this.stashedFilters = null;
+        if (this.activeFilters.size > 0)
+            return false;
+        this.activeFilters = stashed;
+        return true;
     }
     // ── View switcher ──────────────────────────────────────────────────────────
     handleViewSwitch(targetIdx) {
@@ -975,6 +1081,9 @@ export class MrdTable {
         this.activeViewIdx = targetIdx;
         this.applyDefaultSort((_b = (_a = target.view) === null || _a === void 0 ? void 0 : _a.defaultSort) !== null && _b !== void 0 ? _b : '');
         this.activeFilters = new Map();
+        this.searchOpen = false;
+        this.searchQuery = '';
+        this.stashedFilters = null;
         this.init();
     }
     toggleViewPopover(e) {
@@ -997,7 +1106,7 @@ export class MrdTable {
     // ── Render: toolbar ────────────────────────────────────────────────────────
     renderToolbar() {
         var _a;
-        return (h(Toolbar, { locale: this.locale, filterCount: this.activeFilters.size, actions: this.tableActions, views: this.allViews, activeViewIdx: this.activeViewIdx, viewPopoverOpen: this.viewPopoverOpen, createPickerOpen: this.createPickerOpen, createTypes: (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes, readOnly: this.readOnly, cb: {
+        return (h(Toolbar, { locale: this.locale, filterCount: this.activeFilters.size, actions: this.tableActions, views: this.allViews, activeViewIdx: this.activeViewIdx, viewPopoverOpen: this.viewPopoverOpen, createPickerOpen: this.createPickerOpen, createTypes: (_a = this.item) === null || _a === void 0 ? void 0 : _a.createTypes, readOnly: this.readOnly, searchEnabled: this.searchEnabled, searchOpen: this.searchOpen, searchQuery: this.searchQuery, cb: {
                 onClearAllFilters: () => this.clearAllFilters(),
                 onViewSwitch: idx => this.handleViewSwitch(idx),
                 onToggleViewPopover: e => this.toggleViewPopover(e),
@@ -1008,6 +1117,10 @@ export class MrdTable {
                     this.closeCreatePicker();
                 },
                 onAction: action => this.mrdAction.emit(this.buildActionDetail(action)),
+                onToggleSearch: () => this.toggleSearch(),
+                onSearchInput: value => this.handleSearchInput(value),
+                onCloseSearch: () => this.closeSearch(),
+                onSearchInputRef: el => (this.searchInputEl = el !== null && el !== void 0 ? el : null),
             } }));
     }
     // ── Render: filter popup ───────────────────────────────────────────────────
@@ -1378,6 +1491,8 @@ export class MrdTable {
             "sortField": {},
             "sortDir": {},
             "activeFilters": {},
+            "searchOpen": {},
+            "searchQuery": {},
             "openFilterCol": {},
             "pendingFilter": {},
             "popupPos": {},