@aglyn/shared-ui-jsx 1.0.0-beta.199 → 1.0.0-beta.201

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aglyn/shared-ui-jsx",
-  "version": "1.0.0-beta.199",
+  "version": "1.0.0-beta.201",
   "license": "Apache-2.0",
   "homepage": "https://aglyn.com",
   "repository": {
@@ -25,10 +25,10 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@aglyn/shared-data-mdi": "1.0.0-beta.199",
-    "@aglyn/shared-ui-theme": "1.0.0-beta.199",
-    "@aglyn/shared-util-tools": "1.0.0-beta.199",
-    "@aglyn/shared-util-vendor": "1.0.0-beta.199",
+    "@aglyn/shared-data-mdi": "1.0.0-beta.201",
+    "@aglyn/shared-ui-theme": "1.0.0-beta.201",
+    "@aglyn/shared-util-tools": "1.0.0-beta.201",
+    "@aglyn/shared-util-vendor": "1.0.0-beta.201",
     "@mdi/js": "^7.4.47",
     "@swc/helpers": "0.5.23",
     "change-case": "^5.4.4",

package/src/lib/components/list-filter-chips.component.d.ts

@@ -14,8 +14,8 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { type ListFilterField } from '../const/list-filter';
-import type { ListFilterClause, ListFilterOption } from '../const/list-grid-filter';
+import type { ListFilterField } from '../const/list-filter';
+import { type ListFilterClause, type ListFilterOption } from '../const/list-grid-filter';
 export interface ListFilterChipsProps {
     /** The list's grammar — every field a clause may name. */
     fields: readonly ListFilterField[];

package/src/lib/components/list-filter-chips.component.js

@@ -16,18 +16,7 @@
  */ 'use client';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Chip, Stack, Tooltip } from "@mui/material";
-import { listFilterOperatorLabel } from "../const/list-filter.js";
-/** Operators that carry no value. */ const VALUELESS = new Set([
-    'isEmpty',
-    'isNotEmpty'
-]);
-/** Operators that take several values, comma-joined the way the grammar splits them. */ const MULTI = new Set([
-    'isAnyOf'
-]);
-const dayLabel = (raw)=>{
-    const at = new Date(raw);
-    return Number.isNaN(at.getTime()) ? raw : at.toLocaleDateString();
-};
+import { listFilterClauseSentence } from "../const/list-grid-filter.js";
 /**
  * Every clause a list is narrowed by, as chips over the grid (AGL-2617,
  * AGL-3313; shared since AGL-3317).
@@ -41,22 +30,11 @@ const dayLabel = (raw)=>{
  * narrow the loaded rows, the served one is marked.
  */ export function ListFilterChips(props) {
     const { fields, headers, clauses, onChange, options = {}, servedField = null, marksServed = props.servedField !== undefined, disabled = false } = props;
-    const header = (column)=>{
-        var _headers_column;
-        return (_headers_column = headers[column]) != null ? _headers_column : column;
-    };
-    /** How a clause reads: its header, its operator, and its value by label. */ const sentence = (clause)=>{
-        var _clause_label;
-        const field = fields.find((entry)=>entry.column === clause.field);
-        const choices = options[clause.field];
-        const named = (value)=>{
-            var _ref;
-            var _choices_find;
-            return (_ref = choices == null ? void 0 : (_choices_find = choices.find((option)=>option.value === value)) == null ? void 0 : _choices_find.label) != null ? _ref : value;
-        };
-        const value = VALUELESS.has(clause.op) ? '' : MULTI.has(clause.op) ? clause.value.split(',').map((entry)=>entry.trim()).filter(Boolean).map(named).join(', ') : (_clause_label = clause.label) != null ? _clause_label : (field == null ? void 0 : field.kind) === 'date' ? dayLabel(clause.value) : named(clause.value);
-        return `${header(clause.field)} ${listFilterOperatorLabel(clause.op)}${value ? ` ${value}` : ''}`;
-    };
+    /** How a clause reads — the one wording the notices use too. */ const sentence = (clause)=>listFilterClauseSentence(clause, {
+            fields,
+            headers,
+            options
+        });
     if (!clauses.length) return null;
     return /*#__PURE__*/ _jsx(Stack, {
         direction: "row",

package/src/lib/components/list-filter-chips.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/list-filter-chips.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { Chip, Stack, Tooltip } from '@mui/material'\nimport { type ListFilterField, listFilterOperatorLabel } from '../const/list-filter'\nimport type { ListFilterClause, ListFilterOption } from '../const/list-grid-filter'\n\nexport interface ListFilterChipsProps {\n  /** The list's grammar — every field a clause may name. */\n  fields: readonly ListFilterField[]\n  /** How a field reads on a chip; a field without one reads as its column. */\n  headers: Readonly<Record<string, string>>\n  clauses: readonly ListFilterClause[]\n  onChange: (clauses: ListFilterClause[]) => void\n  /** Choices per field, so a chip names a picked value by its label. */\n  options?: Readonly<Record<string, readonly ListFilterOption[]>>\n  /**\n   * The field the query is serving, marked so the reader knows which reached\n   * everything. Omitted on a list whose every clause narrows the same rows.\n   */\n  servedField?: string | null\n  /**\n   * Whether chips carry the served / loaded-window distinction at all.\n   * Defaults to whether `servedField` was passed: a list that answers every\n   * clause over the same rows has nothing to distinguish.\n   */\n  marksServed?: boolean\n  disabled?: boolean\n}\n\n/** Operators that carry no value. */\nconst VALUELESS = new Set(['isEmpty', 'isNotEmpty'])\n/** Operators that take several values, comma-joined the way the grammar splits them. */\nconst MULTI = new Set(['isAnyOf'])\n\nconst dayLabel = (raw: string): string => {\n  const at = new Date(raw)\n  return Number.isNaN(at.getTime()) ? raw : at.toLocaleDateString()\n}\n\n/**\n * Every clause a list is narrowed by, as chips over the grid (AGL-2617,\n * AGL-3313; shared since AGL-3317).\n *\n * The clauses are ADDED through the grid's own Filters panel; this bar is\n * what shows the SET. The free DataGrid's panel holds one item at a time\n * and a saved view holds several, so without it a list narrowed by two\n * fields would show one of the two and hide the other. Each\n * chip reads as a sentence — \"Owner is Dana\", \"Created on or after 1 Jan\"\n * — and removes its clause; where some clauses reach the query and others\n * narrow the loaded rows, the served one is marked.\n */\nexport function ListFilterChips(props: ListFilterChipsProps) {\n  const {\n    fields,\n    headers,\n    clauses,\n    onChange,\n    options = {},\n    servedField = null,\n    marksServed = props.servedField !== undefined,\n    disabled = false,\n  } = props\n  const header = (column: string) => headers[column] ?? column\n\n  /** How a clause reads: its header, its operator, and its value by label. */\n  const sentence = (clause: ListFilterClause): string => {\n    const field = fields.find((entry) => entry.column === clause.field)\n    const choices = options[clause.field]\n    const named = (value: string) =>\n      choices?.find((option) => option.value === value)?.label ?? value\n    const value = VALUELESS.has(clause.op)\n      ? ''\n      : MULTI.has(clause.op)\n        ? clause.value\n            .split(',')\n            .map((entry) => entry.trim())\n            .filter(Boolean)\n            .map(named)\n            .join(', ')\n        : clause.label ?? (field?.kind === 'date' ? dayLabel(clause.value) : named(clause.value))\n    return `${header(clause.field)} ${listFilterOperatorLabel(clause.op)}${value ? ` ${value}` : ''}`\n  }\n\n  if (!clauses.length) return null\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={1}\n      useFlexGap\n      sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n      role=\"list\"\n      aria-label=\"Filters\"\n    >\n      {clauses.map((clause, index) => {\n        const served = marksServed && servedField !== null && clause.field === servedField\n        const key = `${clause.field}-${clause.op}-${index}`\n        const chip = (\n          <Chip\n            key={key}\n            role=\"listitem\"\n            size=\"small\"\n            variant={served ? 'filled' : 'outlined'}\n            color={served ? 'primary' : 'default'}\n            label={sentence(clause)}\n            disabled={disabled}\n            onDelete={() => onChange(clauses.filter((_entry, at) => at !== index))}\n          />\n        )\n        return marksServed ? (\n          <Tooltip\n            key={key}\n            title={served ? 'Searched across every record' : 'Narrows the records already loaded'}\n          >\n            {chip}\n          </Tooltip>\n        ) : (\n          chip\n        )\n      })}\n    </Stack>\n  )\n}\nListFilterChips.displayName = 'ListFilterChips'\n\nexport default ListFilterChips\n"],"names":["Chip","Stack","Tooltip","listFilterOperatorLabel","VALUELESS","Set","MULTI","dayLabel","raw","at","Date","Number","isNaN","getTime","toLocaleDateString","ListFilterChips","props","fields","headers","clauses","onChange","options","servedField","marksServed","undefined","disabled","header","column","sentence","clause","field","find","entry","choices","named","value","option","label","has","op","split","map","trim","filter","Boolean","join","kind","length","direction","spacing","useFlexGap","sx","alignItems","flexWrap","role","aria-label","index","served","key","chip","size","variant","color","onDelete","_entry","title","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/list-filter-chips.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { Chip, Stack, Tooltip } from '@mui/material'\nimport type { ListFilterField } from '../const/list-filter'\nimport {\n  type ListFilterClause,\n  type ListFilterOption,\n  listFilterClauseSentence,\n} from '../const/list-grid-filter'\n\nexport interface ListFilterChipsProps {\n  /** The list's grammar — every field a clause may name. */\n  fields: readonly ListFilterField[]\n  /** How a field reads on a chip; a field without one reads as its column. */\n  headers: Readonly<Record<string, string>>\n  clauses: readonly ListFilterClause[]\n  onChange: (clauses: ListFilterClause[]) => void\n  /** Choices per field, so a chip names a picked value by its label. */\n  options?: Readonly<Record<string, readonly ListFilterOption[]>>\n  /**\n   * The field the query is serving, marked so the reader knows which reached\n   * everything. Omitted on a list whose every clause narrows the same rows.\n   */\n  servedField?: string | null\n  /**\n   * Whether chips carry the served / loaded-window distinction at all.\n   * Defaults to whether `servedField` was passed: a list that answers every\n   * clause over the same rows has nothing to distinguish.\n   */\n  marksServed?: boolean\n  disabled?: boolean\n}\n\n/**\n * Every clause a list is narrowed by, as chips over the grid (AGL-2617,\n * AGL-3313; shared since AGL-3317).\n *\n * The clauses are ADDED through the grid's own Filters panel; this bar is\n * what shows the SET. The free DataGrid's panel holds one item at a time\n * and a saved view holds several, so without it a list narrowed by two\n * fields would show one of the two and hide the other. Each\n * chip reads as a sentence — \"Owner is Dana\", \"Created on or after 1 Jan\"\n * — and removes its clause; where some clauses reach the query and others\n * narrow the loaded rows, the served one is marked.\n */\nexport function ListFilterChips(props: ListFilterChipsProps) {\n  const {\n    fields,\n    headers,\n    clauses,\n    onChange,\n    options = {},\n    servedField = null,\n    marksServed = props.servedField !== undefined,\n    disabled = false,\n  } = props\n  /** How a clause reads — the one wording the notices use too. */\n  const sentence = (clause: ListFilterClause): string =>\n    listFilterClauseSentence(clause, { fields, headers, options })\n\n  if (!clauses.length) return null\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={1}\n      useFlexGap\n      sx={{ alignItems: 'center', flexWrap: 'wrap' }}\n      role=\"list\"\n      aria-label=\"Filters\"\n    >\n      {clauses.map((clause, index) => {\n        const served = marksServed && servedField !== null && clause.field === servedField\n        const key = `${clause.field}-${clause.op}-${index}`\n        const chip = (\n          <Chip\n            key={key}\n            role=\"listitem\"\n            size=\"small\"\n            variant={served ? 'filled' : 'outlined'}\n            color={served ? 'primary' : 'default'}\n            label={sentence(clause)}\n            disabled={disabled}\n            onDelete={() => onChange(clauses.filter((_entry, at) => at !== index))}\n          />\n        )\n        return marksServed ? (\n          <Tooltip\n            key={key}\n            title={served ? 'Searched across every record' : 'Narrows the records already loaded'}\n          >\n            {chip}\n          </Tooltip>\n        ) : (\n          chip\n        )\n      })}\n    </Stack>\n  )\n}\nListFilterChips.displayName = 'ListFilterChips'\n\nexport default ListFilterChips\n"],"names":["Chip","Stack","Tooltip","listFilterClauseSentence","ListFilterChips","props","fields","headers","clauses","onChange","options","servedField","marksServed","undefined","disabled","sentence","clause","length","direction","spacing","useFlexGap","sx","alignItems","flexWrap","role","aria-label","map","index","served","field","key","op","chip","size","variant","color","label","onDelete","filter","_entry","at","title","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SAASA,IAAI,EAAEC,KAAK,EAAEC,OAAO,QAAQ,gBAAe;AAEpD,SAGEC,wBAAwB,QACnB,+BAA2B;AAyBlC;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EACJC,MAAM,EACNC,OAAO,EACPC,OAAO,EACPC,QAAQ,EACRC,UAAU,CAAC,CAAC,EACZC,cAAc,IAAI,EAClBC,cAAcP,MAAMM,WAAW,KAAKE,SAAS,EAC7CC,WAAW,KAAK,EACjB,GAAGT;IACJ,8DAA8D,GAC9D,MAAMU,WAAW,CAACC,SAChBb,yBAAyBa,QAAQ;YAAEV;YAAQC;YAASG;QAAQ;IAE9D,IAAI,CAACF,QAAQS,MAAM,EAAE,OAAO;IAC5B,qBACE,KAAChB;QACCiB,WAAU;QACVC,SAAS;QACTC,UAAU;QACVC,IAAI;YAAEC,YAAY;YAAUC,UAAU;QAAO;QAC7CC,MAAK;QACLC,cAAW;kBAEVjB,QAAQkB,GAAG,CAAC,CAACV,QAAQW;YACpB,MAAMC,SAAShB,eAAeD,gBAAgB,QAAQK,OAAOa,KAAK,KAAKlB;YACvE,MAAMmB,MAAM,GAAGd,OAAOa,KAAK,CAAC,CAAC,EAAEb,OAAOe,EAAE,CAAC,CAAC,EAAEJ,OAAO;YACnD,MAAMK,qBACJ,KAAChC;gBAECwB,MAAK;gBACLS,MAAK;gBACLC,SAASN,SAAS,WAAW;gBAC7BO,OAAOP,SAAS,YAAY;gBAC5BQ,OAAOrB,SAASC;gBAChBF,UAAUA;gBACVuB,UAAU,IAAM5B,SAASD,QAAQ8B,MAAM,CAAC,CAACC,QAAQC,KAAOA,OAAOb;eAP1DG;YAUT,OAAOlB,4BACL,KAACV;gBAECuC,OAAOb,SAAS,iCAAiC;0BAEhDI;eAHIF,OAMPE;QAEJ;;AAGN;AACA5B,gBAAgBsC,WAAW,GAAG;AAE9B,eAAetC,gBAAe"}

package/src/lib/components/list-filter-toolbar.component.d.ts

@@ -0,0 +1,56 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { type ListFilterField } from '../const/list-filter';
+import { type ListFilterClause, type ListFilterOption } from '../const/list-grid-filter';
+export interface ListFilterToolbarProps {
+    /** The list's grammar — every field the Filters panel may name. */
+    fields: readonly ListFilterField[];
+    /** How a field reads in the panel and on its chip. */
+    headers: Readonly<Record<string, string>>;
+    /** Choices per field, for a field whose value is picked rather than typed. */
+    options?: Readonly<Record<string, readonly ListFilterOption[]>>;
+    clauses: readonly ListFilterClause[];
+    onChange: (clauses: ListFilterClause[]) => void;
+    /** The quick search. Absent, the list offers no search box. */
+    search?: {
+        words: readonly string[];
+        onChange: (words: string[]) => void;
+        placeholder?: string;
+    };
+    disabled?: boolean;
+}
+/**
+ * THE LIST TOOLBAR, FOR A LIST THAT IS NOT A TABLE (AGL-3321).
+ *
+ * A table's search box and Filters panel are the grid's own toolbar. A list
+ * drawn as cards, tiles or a feed has no grid, and must not become one to get
+ * them — its presentation is not the filter's to change. This is the same two
+ * controls over any presentation: a search box whose words the list puts on
+ * its query, and a Filters button whose panel adds one clause per field, in
+ * the same grammar (`ListFilterField`) and the same clause shape
+ * (`ListFilterClause`) the grid's panel produces. The clauses in force show
+ * as `ListFilterChips` beside it, and what the query could not take as
+ * `ListQueryNotices`, exactly as over a table.
+ *
+ * It offers only the operators each field declares (`listFilterOperators`),
+ * which are the ones the list's query can serve.
+ */
+export declare function ListFilterToolbar(props: ListFilterToolbarProps): import("react").JSX.Element;
+export declare namespace ListFilterToolbar {
+    var displayName: string;
+}
+export default ListFilterToolbar;

package/src/lib/components/list-filter-toolbar.component.js

@@ -0,0 +1,280 @@
+/**
+ * @license
+ * Copyright 2026 Aglyn LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */ 'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Badge, Button, MenuItem, Popover, Stack, TextField } from "@mui/material";
+import { useEffect, useId, useMemo, useRef, useState } from "react";
+import { listFilterOperatorLabel, listFilterOperators } from "../const/list-filter.js";
+import { upsertListFilterClause } from "../const/list-grid-filter.js";
+/** Operators that carry no value. */ const VALUELESS = new Set([
+    'isEmpty',
+    'isNotEmpty'
+]);
+/** How long the search box waits after the last keystroke before asking. */ const SEARCH_SETTLE_MS = 300;
+/**
+ * THE LIST TOOLBAR, FOR A LIST THAT IS NOT A TABLE (AGL-3321).
+ *
+ * A table's search box and Filters panel are the grid's own toolbar. A list
+ * drawn as cards, tiles or a feed has no grid, and must not become one to get
+ * them — its presentation is not the filter's to change. This is the same two
+ * controls over any presentation: a search box whose words the list puts on
+ * its query, and a Filters button whose panel adds one clause per field, in
+ * the same grammar (`ListFilterField`) and the same clause shape
+ * (`ListFilterClause`) the grid's panel produces. The clauses in force show
+ * as `ListFilterChips` beside it, and what the query could not take as
+ * `ListQueryNotices`, exactly as over a table.
+ *
+ * It offers only the operators each field declares (`listFilterOperators`),
+ * which are the ones the list's query can serve.
+ */ export function ListFilterToolbar(props) {
+    var _ref, _ref1, _operators_, _search_placeholder, _search_placeholder1, _ref2;
+    var _fields_;
+    const { fields, headers, options = {}, clauses, onChange, search, disabled = false } = props;
+    const panelId = useId();
+    const anchor = useRef(null);
+    const [open, setOpen] = useState(false);
+    // The search box is the reader's until they pause; then its words are asked.
+    const [typed, setTyped] = useState(()=>{
+        var _ref;
+        return ((_ref = search == null ? void 0 : search.words) != null ? _ref : []).join(' ');
+    });
+    const asked = ((_ref = search == null ? void 0 : search.words) != null ? _ref : []).join(' ');
+    const onSearch = search == null ? void 0 : search.onChange;
+    useEffect(()=>{
+        if (!onSearch) return;
+        const words = typed.split(/\s+/).filter(Boolean);
+        if (words.join(' ') === asked) return;
+        const timer = setTimeout(()=>onSearch(words), SEARCH_SETTLE_MS);
+        return ()=>clearTimeout(timer);
+    }, [
+        typed,
+        asked,
+        onSearch
+    ]);
+    const label = (column)=>{
+        var _headers_column;
+        return (_headers_column = headers[column]) != null ? _headers_column : column;
+    };
+    const [column, setColumn] = useState((_ref1 = (_fields_ = fields[0]) == null ? void 0 : _fields_.column) != null ? _ref1 : '');
+    const field = useMemo(()=>{
+        var _fields_find;
+        return (_fields_find = fields.find((entry)=>entry.column === column)) != null ? _fields_find : fields[0];
+    }, [
+        fields,
+        column
+    ]);
+    const operators = useMemo(()=>field ? listFilterOperators(field) : [], [
+        field
+    ]);
+    const [op, setOp] = useState((_operators_ = operators[0]) != null ? _operators_ : '');
+    const [value, setValue] = useState('');
+    // Opening the panel on a field shows the clause it already holds, if any.
+    const pick = (next)=>{
+        var _nextOperators_, _ref;
+        const nextField = fields.find((entry)=>entry.column === next);
+        const held = clauses.find((clause)=>clause.field === next);
+        const nextOperators = nextField ? listFilterOperators(nextField) : [];
+        setColumn(next);
+        setOp(held && nextOperators.includes(held.op) ? held.op : (_nextOperators_ = nextOperators[0]) != null ? _nextOperators_ : '');
+        setValue((_ref = held == null ? void 0 : held.value) != null ? _ref : '');
+    };
+    useEffect(()=>{
+        if (open) pick(column);
+    // Re-read only when the panel opens.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        open
+    ]);
+    const choices = field ? options[field.column] : undefined;
+    const booleanChoices = [
+        {
+            value: 'true',
+            label: 'Yes'
+        },
+        {
+            value: 'false',
+            label: 'No'
+        }
+    ];
+    const picked = choices != null ? choices : (field == null ? void 0 : field.kind) === 'boolean' ? booleanChoices : undefined;
+    const valueless = VALUELESS.has(op);
+    const ready = Boolean(field && op && (valueless || value.trim()));
+    const apply = ()=>{
+        if (!field || !ready) return;
+        onChange(upsertListFilterClause(clauses, field.column, {
+            field: field.column,
+            op,
+            value: valueless ? '' : value.trim()
+        }));
+        setOpen(false);
+    };
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: {
+            xs: 'column',
+            sm: 'row'
+        },
+        spacing: 1,
+        sx: {
+            alignItems: {
+                sm: 'center'
+            }
+        },
+        children: [
+            search ? /*#__PURE__*/ _jsx(TextField, {
+                size: "small",
+                type: "search",
+                value: typed,
+                disabled: disabled,
+                onChange: (event)=>setTyped(event.target.value),
+                placeholder: (_search_placeholder = search.placeholder) != null ? _search_placeholder : 'Search…',
+                slotProps: {
+                    htmlInput: {
+                        'aria-label': (_search_placeholder1 = search.placeholder) != null ? _search_placeholder1 : 'Search'
+                    }
+                },
+                sx: {
+                    minWidth: {
+                        sm: 280
+                    }
+                }
+            }) : null,
+            fields.length ? /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(Badge, {
+                        badgeContent: clauses.length,
+                        color: "primary",
+                        overlap: "rectangular",
+                        children: /*#__PURE__*/ _jsx(Button, {
+                            ref: anchor,
+                            variant: "outlined",
+                            size: "medium",
+                            disabled: disabled,
+                            "aria-haspopup": "dialog",
+                            "aria-controls": open ? panelId : undefined,
+                            "aria-expanded": open,
+                            onClick: ()=>setOpen(true),
+                            children: 'Filters'
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(Popover, {
+                        id: panelId,
+                        open: open,
+                        anchorEl: anchor.current,
+                        onClose: ()=>setOpen(false),
+                        anchorOrigin: {
+                            vertical: 'bottom',
+                            horizontal: 'left'
+                        },
+                        slotProps: {
+                            paper: {
+                                role: 'dialog',
+                                'aria-label': 'Filters'
+                            }
+                        },
+                        children: /*#__PURE__*/ _jsxs(Stack, {
+                            component: "form",
+                            spacing: 1.5,
+                            sx: {
+                                p: 2,
+                                width: {
+                                    xs: 'calc(100vw - 32px)',
+                                    sm: 340
+                                },
+                                maxWidth: 340
+                            },
+                            onSubmit: (event)=>{
+                                event.preventDefault();
+                                apply();
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx(TextField, {
+                                    select: true,
+                                    size: "small",
+                                    label: "Field",
+                                    value: (_ref2 = field == null ? void 0 : field.column) != null ? _ref2 : '',
+                                    onChange: (event)=>pick(event.target.value),
+                                    children: fields.map((entry)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: entry.column,
+                                            children: label(entry.column)
+                                        }, entry.column))
+                                }),
+                                operators.length > 1 ? /*#__PURE__*/ _jsx(TextField, {
+                                    select: true,
+                                    size: "small",
+                                    label: "Operator",
+                                    value: op,
+                                    onChange: (event)=>setOp(event.target.value),
+                                    children: operators.map((entry)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: entry,
+                                            children: listFilterOperatorLabel(entry)
+                                        }, entry))
+                                }) : null,
+                                valueless ? null : picked ? /*#__PURE__*/ _jsx(TextField, {
+                                    select: true,
+                                    size: "small",
+                                    label: "Value",
+                                    value: value,
+                                    onChange: (event)=>setValue(event.target.value),
+                                    children: picked.map((choice)=>/*#__PURE__*/ _jsx(MenuItem, {
+                                            value: choice.value,
+                                            children: choice.label
+                                        }, choice.value))
+                                }) : /*#__PURE__*/ _jsx(TextField, {
+                                    size: "small",
+                                    label: "Value",
+                                    type: (field == null ? void 0 : field.kind) === 'date' ? 'date' : (field == null ? void 0 : field.kind) === 'number' ? 'number' : 'text',
+                                    value: value,
+                                    onChange: (event)=>setValue(event.target.value),
+                                    slotProps: (field == null ? void 0 : field.kind) === 'date' ? {
+                                        inputLabel: {
+                                            shrink: true
+                                        }
+                                    } : undefined
+                                }),
+                                /*#__PURE__*/ _jsxs(Stack, {
+                                    direction: "row",
+                                    spacing: 1,
+                                    sx: {
+                                        justifyContent: 'flex-end'
+                                    },
+                                    children: [
+                                        field && clauses.some((clause)=>clause.field === field.column) ? /*#__PURE__*/ _jsx(Button, {
+                                            onClick: ()=>{
+                                                onChange(upsertListFilterClause(clauses, field.column, null));
+                                                setOpen(false);
+                                            },
+                                            children: 'Remove'
+                                        }) : null,
+                                        /*#__PURE__*/ _jsx(Button, {
+                                            type: "submit",
+                                            variant: "contained",
+                                            disabled: !ready,
+                                            children: 'Apply'
+                                        })
+                                    ]
+                                })
+                            ]
+                        })
+                    })
+                ]
+            }) : null
+        ]
+    });
+}
+ListFilterToolbar.displayName = 'ListFilterToolbar';
+export default ListFilterToolbar;
+
+//# sourceMappingURL=list-filter-toolbar.component.js.map

package/src/lib/components/list-filter-toolbar.component.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/list-filter-toolbar.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport {\n  Badge,\n  Button,\n  MenuItem,\n  Popover,\n  Stack,\n  TextField,\n} from '@mui/material'\nimport { useEffect, useId, useMemo, useRef, useState } from 'react'\nimport {\n  type ListFilterField,\n  listFilterOperatorLabel,\n  listFilterOperators,\n} from '../const/list-filter'\nimport {\n  type ListFilterClause,\n  type ListFilterOption,\n  upsertListFilterClause,\n} from '../const/list-grid-filter'\n\n/** Operators that carry no value. */\nconst VALUELESS = new Set(['isEmpty', 'isNotEmpty'])\n\n/** How long the search box waits after the last keystroke before asking. */\nconst SEARCH_SETTLE_MS = 300\n\nexport interface ListFilterToolbarProps {\n  /** The list's grammar — every field the Filters panel may name. */\n  fields: readonly ListFilterField[]\n  /** How a field reads in the panel and on its chip. */\n  headers: Readonly<Record<string, string>>\n  /** Choices per field, for a field whose value is picked rather than typed. */\n  options?: Readonly<Record<string, readonly ListFilterOption[]>>\n  clauses: readonly ListFilterClause[]\n  onChange: (clauses: ListFilterClause[]) => void\n  /** The quick search. Absent, the list offers no search box. */\n  search?: {\n    words: readonly string[]\n    onChange: (words: string[]) => void\n    placeholder?: string\n  }\n  disabled?: boolean\n}\n\n/**\n * THE LIST TOOLBAR, FOR A LIST THAT IS NOT A TABLE (AGL-3321).\n *\n * A table's search box and Filters panel are the grid's own toolbar. A list\n * drawn as cards, tiles or a feed has no grid, and must not become one to get\n * them — its presentation is not the filter's to change. This is the same two\n * controls over any presentation: a search box whose words the list puts on\n * its query, and a Filters button whose panel adds one clause per field, in\n * the same grammar (`ListFilterField`) and the same clause shape\n * (`ListFilterClause`) the grid's panel produces. The clauses in force show\n * as `ListFilterChips` beside it, and what the query could not take as\n * `ListQueryNotices`, exactly as over a table.\n *\n * It offers only the operators each field declares (`listFilterOperators`),\n * which are the ones the list's query can serve.\n */\nexport function ListFilterToolbar(props: ListFilterToolbarProps) {\n  const { fields, headers, options = {}, clauses, onChange, search, disabled = false } = props\n  const panelId = useId()\n  const anchor = useRef<HTMLButtonElement | null>(null)\n  const [open, setOpen] = useState(false)\n\n  // The search box is the reader's until they pause; then its words are asked.\n  const [typed, setTyped] = useState(() => (search?.words ?? []).join(' '))\n  const asked = (search?.words ?? []).join(' ')\n  const onSearch = search?.onChange\n  useEffect(() => {\n    if (!onSearch) return\n    const words = typed.split(/\\s+/).filter(Boolean)\n    if (words.join(' ') === asked) return\n    const timer = setTimeout(() => onSearch(words), SEARCH_SETTLE_MS)\n    return () => clearTimeout(timer)\n  }, [typed, asked, onSearch])\n\n  const label = (column: string) => headers[column] ?? column\n  const [column, setColumn] = useState<string>(fields[0]?.column ?? '')\n  const field = useMemo(\n    () => fields.find((entry) => entry.column === column) ?? fields[0],\n    [fields, column],\n  )\n  const operators = useMemo(() => (field ? listFilterOperators(field) : []), [field])\n  const [op, setOp] = useState<string>(operators[0] ?? '')\n  const [value, setValue] = useState('')\n\n  // Opening the panel on a field shows the clause it already holds, if any.\n  const pick = (next: string) => {\n    const nextField = fields.find((entry) => entry.column === next)\n    const held = clauses.find((clause) => clause.field === next)\n    const nextOperators = nextField ? listFilterOperators(nextField) : []\n    setColumn(next)\n    setOp(held && nextOperators.includes(held.op) ? held.op : (nextOperators[0] ?? ''))\n    setValue(held?.value ?? '')\n  }\n  useEffect(() => {\n    if (open) pick(column)\n    // Re-read only when the panel opens.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open])\n\n  const choices = field ? options[field.column] : undefined\n  const booleanChoices: readonly ListFilterOption[] = [\n    { value: 'true', label: 'Yes' },\n    { value: 'false', label: 'No' },\n  ]\n  const picked = choices ?? (field?.kind === 'boolean' ? booleanChoices : undefined)\n  const valueless = VALUELESS.has(op)\n  const ready = Boolean(field && op && (valueless || value.trim()))\n\n  const apply = () => {\n    if (!field || !ready) return\n    onChange(\n      upsertListFilterClause(clauses, field.column, {\n        field: field.column,\n        op,\n        value: valueless ? '' : value.trim(),\n      }),\n    )\n    setOpen(false)\n  }\n\n  return (\n    <Stack\n      direction={{ xs: 'column', sm: 'row' }}\n      spacing={1}\n      sx={{ alignItems: { sm: 'center' } }}\n    >\n      {search ? (\n        <TextField\n          size=\"small\"\n          type=\"search\"\n          value={typed}\n          disabled={disabled}\n          onChange={(event) => setTyped(event.target.value)}\n          placeholder={search.placeholder ?? 'Search…'}\n          slotProps={{ htmlInput: { 'aria-label': search.placeholder ?? 'Search' } }}\n          sx={{ minWidth: { sm: 280 } }}\n        />\n      ) : null}\n      {fields.length ? (\n        <>\n          <Badge badgeContent={clauses.length} color=\"primary\" overlap=\"rectangular\">\n            <Button\n              ref={anchor}\n              variant=\"outlined\"\n              size=\"medium\"\n              disabled={disabled}\n              aria-haspopup=\"dialog\"\n              aria-controls={open ? panelId : undefined}\n              aria-expanded={open}\n              onClick={() => setOpen(true)}\n            >\n              {'Filters'}\n            </Button>\n          </Badge>\n          <Popover\n            id={panelId}\n            open={open}\n            anchorEl={anchor.current}\n            onClose={() => setOpen(false)}\n            anchorOrigin={{ vertical: 'bottom', horizontal: 'left' }}\n            slotProps={{ paper: { role: 'dialog', 'aria-label': 'Filters' } as never }}\n          >\n            <Stack\n              component=\"form\"\n              spacing={1.5}\n              sx={{ p: 2, width: { xs: 'calc(100vw - 32px)', sm: 340 }, maxWidth: 340 }}\n              onSubmit={(event) => {\n                event.preventDefault()\n                apply()\n              }}\n            >\n              <TextField\n                select\n                size=\"small\"\n                label=\"Field\"\n                value={field?.column ?? ''}\n                onChange={(event) => pick(event.target.value)}\n              >\n                {fields.map((entry) => (\n                  <MenuItem key={entry.column} value={entry.column}>\n                    {label(entry.column)}\n                  </MenuItem>\n                ))}\n              </TextField>\n              {operators.length > 1 ? (\n                <TextField\n                  select\n                  size=\"small\"\n                  label=\"Operator\"\n                  value={op}\n                  onChange={(event) => setOp(event.target.value)}\n                >\n                  {operators.map((entry) => (\n                    <MenuItem key={entry} value={entry}>\n                      {listFilterOperatorLabel(entry)}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              ) : null}\n              {valueless ? null : picked ? (\n                <TextField\n                  select\n                  size=\"small\"\n                  label=\"Value\"\n                  value={value}\n                  onChange={(event) => setValue(event.target.value)}\n                >\n                  {picked.map((choice) => (\n                    <MenuItem key={choice.value} value={choice.value}>\n                      {choice.label}\n                    </MenuItem>\n                  ))}\n                </TextField>\n              ) : (\n                <TextField\n                  size=\"small\"\n                  label=\"Value\"\n                  type={field?.kind === 'date' ? 'date' : field?.kind === 'number' ? 'number' : 'text'}\n                  value={value}\n                  onChange={(event) => setValue(event.target.value)}\n                  slotProps={field?.kind === 'date' ? { inputLabel: { shrink: true } } : undefined}\n                />\n              )}\n              <Stack direction=\"row\" spacing={1} sx={{ justifyContent: 'flex-end' }}>\n                {field && clauses.some((clause) => clause.field === field.column) ? (\n                  <Button\n                    onClick={() => {\n                      onChange(upsertListFilterClause(clauses, field.column, null))\n                      setOpen(false)\n                    }}\n                  >\n                    {'Remove'}\n                  </Button>\n                ) : null}\n                <Button type=\"submit\" variant=\"contained\" disabled={!ready}>\n                  {'Apply'}\n                </Button>\n              </Stack>\n            </Stack>\n          </Popover>\n        </>\n      ) : null}\n    </Stack>\n  )\n}\nListFilterToolbar.displayName = 'ListFilterToolbar'\n\nexport default ListFilterToolbar\n"],"names":["Badge","Button","MenuItem","Popover","Stack","TextField","useEffect","useId","useMemo","useRef","useState","listFilterOperatorLabel","listFilterOperators","upsertListFilterClause","VALUELESS","Set","SEARCH_SETTLE_MS","ListFilterToolbar","props","operators","search","fields","headers","options","clauses","onChange","disabled","panelId","anchor","open","setOpen","typed","setTyped","words","join","asked","onSearch","split","filter","Boolean","timer","setTimeout","clearTimeout","label","column","setColumn","field","find","entry","op","setOp","value","setValue","pick","next","nextOperators","nextField","held","clause","includes","choices","undefined","booleanChoices","picked","kind","valueless","has","ready","trim","apply","direction","xs","sm","spacing","sx","alignItems","size","type","event","target","placeholder","slotProps","htmlInput","minWidth","length","badgeContent","color","overlap","ref","variant","aria-haspopup","aria-controls","aria-expanded","onClick","id","anchorEl","current","onClose","anchorOrigin","vertical","horizontal","paper","role","component","p","width","maxWidth","onSubmit","preventDefault","select","map","choice","inputLabel","shrink","justifyContent","some","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SACEA,KAAK,EACLC,MAAM,EACNC,QAAQ,EACRC,OAAO,EACPC,KAAK,EACLC,SAAS,QACJ,gBAAe;AACtB,SAASC,SAAS,EAAEC,KAAK,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAO;AACnE,SAEEC,uBAAuB,EACvBC,mBAAmB,QACd,0BAAsB;AAC7B,SAGEC,sBAAsB,QACjB,+BAA2B;AAElC,mCAAmC,GACnC,MAAMC,YAAY,IAAIC,IAAI;IAAC;IAAW;CAAa;AAEnD,0EAA0E,GAC1E,MAAMC,mBAAmB;AAoBzB;;;;;;;;;;;;;;;CAeC,GACD,OAAO,SAASC,kBAAkBC,KAA6B;qBAyBxBC,aAoDhBC,qBAC2BA;QA3DHC;IAlB7C,MAAM,EAAEA,MAAM,EAAEC,OAAO,EAAEC,UAAU,CAAC,CAAC,EAAEC,OAAO,EAAEC,QAAQ,EAAEL,MAAM,EAAEM,WAAW,KAAK,EAAE,GAAGR;IACvF,MAAMS,UAAUpB;IAChB,MAAMqB,SAASnB,OAAiC;IAChD,MAAM,CAACoB,MAAMC,QAAQ,GAAGpB,SAAS;IAEjC,6EAA6E;IAC7E,MAAM,CAACqB,OAAOC,SAAS,GAAGtB,SAAS;;eAAM,SAACU,0BAAAA,OAAQa,KAAK,mBAAI,EAAE,EAAEC,IAAI,CAAC;;IACpE,MAAMC,QAAQ,SAACf,0BAAAA,OAAQa,KAAK,mBAAI,EAAE,EAAEC,IAAI,CAAC;IACzC,MAAME,WAAWhB,0BAAAA,OAAQK,QAAQ;IACjCnB,UAAU;QACR,IAAI,CAAC8B,UAAU;QACf,MAAMH,QAAQF,MAAMM,KAAK,CAAC,OAAOC,MAAM,CAACC;QACxC,IAAIN,MAAMC,IAAI,CAAC,SAASC,OAAO;QAC/B,MAAMK,QAAQC,WAAW,IAAML,SAASH,QAAQjB;QAChD,OAAO,IAAM0B,aAAaF;IAC5B,GAAG;QAACT;QAAOI;QAAOC;KAAS;IAE3B,MAAMO,QAAQ,CAACC;YAAmBtB;gBAAAA,kBAAAA,OAAO,CAACsB,OAAO,YAAftB,kBAAmBsB;;IACrD,MAAM,CAACA,QAAQC,UAAU,GAAGnC,mBAAiBW,WAAAA,MAAM,CAAC,EAAE,qBAATA,SAAWuB,MAAM,oBAAI;IAClE,MAAME,QAAQtC,QACZ;YAAMa;gBAAAA,eAAAA,OAAO0B,IAAI,CAAC,CAACC,QAAUA,MAAMJ,MAAM,KAAKA,mBAAxCvB,eAAmDA,MAAM,CAAC,EAAE;OAClE;QAACA;QAAQuB;KAAO;IAElB,MAAMzB,YAAYX,QAAQ,IAAOsC,QAAQlC,oBAAoBkC,SAAS,EAAE,EAAG;QAACA;KAAM;IAClF,MAAM,CAACG,IAAIC,MAAM,GAAGxC,UAAiBS,cAAAA,SAAS,CAAC,EAAE,YAAZA,cAAgB;IACrD,MAAM,CAACgC,OAAOC,SAAS,GAAG1C,SAAS;IAEnC,0EAA0E;IAC1E,MAAM2C,OAAO,CAACC;YAK+CC;QAJ3D,MAAMC,YAAYnC,OAAO0B,IAAI,CAAC,CAACC,QAAUA,MAAMJ,MAAM,KAAKU;QAC1D,MAAMG,OAAOjC,QAAQuB,IAAI,CAAC,CAACW,SAAWA,OAAOZ,KAAK,KAAKQ;QACvD,MAAMC,gBAAgBC,YAAY5C,oBAAoB4C,aAAa,EAAE;QACrEX,UAAUS;QACVJ,MAAMO,QAAQF,cAAcI,QAAQ,CAACF,KAAKR,EAAE,IAAIQ,KAAKR,EAAE,IAAIM,kBAAAA,aAAa,CAAC,EAAE,YAAhBA,kBAAoB;QAC/EH,iBAASK,wBAAAA,KAAMN,KAAK,mBAAI;IAC1B;IACA7C,UAAU;QACR,IAAIuB,MAAMwB,KAAKT;IACf,qCAAqC;IACrC,uDAAuD;IACzD,GAAG;QAACf;KAAK;IAET,MAAM+B,UAAUd,QAAQvB,OAAO,CAACuB,MAAMF,MAAM,CAAC,GAAGiB;IAChD,MAAMC,iBAA8C;QAClD;YAAEX,OAAO;YAAQR,OAAO;QAAM;QAC9B;YAAEQ,OAAO;YAASR,OAAO;QAAK;KAC/B;IACD,MAAMoB,SAASH,kBAAAA,UAAYd,CAAAA,yBAAAA,MAAOkB,IAAI,MAAK,YAAYF,iBAAiBD;IACxE,MAAMI,YAAYnD,UAAUoD,GAAG,CAACjB;IAChC,MAAMkB,QAAQ5B,QAAQO,SAASG,MAAOgB,CAAAA,aAAad,MAAMiB,IAAI,EAAC;IAE9D,MAAMC,QAAQ;QACZ,IAAI,CAACvB,SAAS,CAACqB,OAAO;QACtB1C,SACEZ,uBAAuBW,SAASsB,MAAMF,MAAM,EAAE;YAC5CE,OAAOA,MAAMF,MAAM;YACnBK;YACAE,OAAOc,YAAY,KAAKd,MAAMiB,IAAI;QACpC;QAEFtC,QAAQ;IACV;IAEA,qBACE,MAAC1B;QACCkE,WAAW;YAAEC,IAAI;YAAUC,IAAI;QAAM;QACrCC,SAAS;QACTC,IAAI;YAAEC,YAAY;gBAAEH,IAAI;YAAS;QAAE;;YAElCpD,uBACC,KAACf;gBACCuE,MAAK;gBACLC,MAAK;gBACL1B,OAAOpB;gBACPL,UAAUA;gBACVD,UAAU,CAACqD,QAAU9C,SAAS8C,MAAMC,MAAM,CAAC5B,KAAK;gBAChD6B,WAAW,GAAE5D,sBAAAA,OAAO4D,WAAW,YAAlB5D,sBAAsB;gBACnC6D,WAAW;oBAAEC,WAAW;wBAAE,YAAY,GAAE9D,uBAAAA,OAAO4D,WAAW,YAAlB5D,uBAAsB;oBAAS;gBAAE;gBACzEsD,IAAI;oBAAES,UAAU;wBAAEX,IAAI;oBAAI;gBAAE;iBAE5B;YACHnD,OAAO+D,MAAM,iBACZ;;kCACE,KAACpF;wBAAMqF,cAAc7D,QAAQ4D,MAAM;wBAAEE,OAAM;wBAAUC,SAAQ;kCAC3D,cAAA,KAACtF;4BACCuF,KAAK5D;4BACL6D,SAAQ;4BACRb,MAAK;4BACLlD,UAAUA;4BACVgE,iBAAc;4BACdC,iBAAe9D,OAAOF,UAAUkC;4BAChC+B,iBAAe/D;4BACfgE,SAAS,IAAM/D,QAAQ;sCAEtB;;;kCAGL,KAAC3B;wBACC2F,IAAInE;wBACJE,MAAMA;wBACNkE,UAAUnE,OAAOoE,OAAO;wBACxBC,SAAS,IAAMnE,QAAQ;wBACvBoE,cAAc;4BAAEC,UAAU;4BAAUC,YAAY;wBAAO;wBACvDnB,WAAW;4BAAEoB,OAAO;gCAAEC,MAAM;gCAAU,cAAc;4BAAU;wBAAW;kCAEzE,cAAA,MAAClG;4BACCmG,WAAU;4BACV9B,SAAS;4BACTC,IAAI;gCAAE8B,GAAG;gCAAGC,OAAO;oCAAElC,IAAI;oCAAsBC,IAAI;gCAAI;gCAAGkC,UAAU;4BAAI;4BACxEC,UAAU,CAAC7B;gCACTA,MAAM8B,cAAc;gCACpBvC;4BACF;;8CAEA,KAAChE;oCACCwG,MAAM;oCACNjC,MAAK;oCACLjC,OAAM;oCACNQ,KAAK,WAAEL,yBAAAA,MAAOF,MAAM,oBAAI;oCACxBnB,UAAU,CAACqD,QAAUzB,KAAKyB,MAAMC,MAAM,CAAC5B,KAAK;8CAE3C9B,OAAOyF,GAAG,CAAC,CAAC9D,sBACX,KAAC9C;4CAA4BiD,OAAOH,MAAMJ,MAAM;sDAC7CD,MAAMK,MAAMJ,MAAM;2CADNI,MAAMJ,MAAM;;gCAK9BzB,UAAUiE,MAAM,GAAG,kBAClB,KAAC/E;oCACCwG,MAAM;oCACNjC,MAAK;oCACLjC,OAAM;oCACNQ,OAAOF;oCACPxB,UAAU,CAACqD,QAAU5B,MAAM4B,MAAMC,MAAM,CAAC5B,KAAK;8CAE5ChC,UAAU2F,GAAG,CAAC,CAAC9D,sBACd,KAAC9C;4CAAqBiD,OAAOH;sDAC1BrC,wBAAwBqC;2CADZA;qCAKjB;gCACHiB,YAAY,OAAOF,uBAClB,KAAC1D;oCACCwG,MAAM;oCACNjC,MAAK;oCACLjC,OAAM;oCACNQ,OAAOA;oCACP1B,UAAU,CAACqD,QAAU1B,SAAS0B,MAAMC,MAAM,CAAC5B,KAAK;8CAE/CY,OAAO+C,GAAG,CAAC,CAACC,uBACX,KAAC7G;4CAA4BiD,OAAO4D,OAAO5D,KAAK;sDAC7C4D,OAAOpE,KAAK;2CADAoE,OAAO5D,KAAK;mDAM/B,KAAC9C;oCACCuE,MAAK;oCACLjC,OAAM;oCACNkC,MAAM/B,CAAAA,yBAAAA,MAAOkB,IAAI,MAAK,SAAS,SAASlB,CAAAA,yBAAAA,MAAOkB,IAAI,MAAK,WAAW,WAAW;oCAC9Eb,OAAOA;oCACP1B,UAAU,CAACqD,QAAU1B,SAAS0B,MAAMC,MAAM,CAAC5B,KAAK;oCAChD8B,WAAWnC,CAAAA,yBAAAA,MAAOkB,IAAI,MAAK,SAAS;wCAAEgD,YAAY;4CAAEC,QAAQ;wCAAK;oCAAE,IAAIpD;;8CAG3E,MAACzD;oCAAMkE,WAAU;oCAAMG,SAAS;oCAAGC,IAAI;wCAAEwC,gBAAgB;oCAAW;;wCACjEpE,SAAStB,QAAQ2F,IAAI,CAAC,CAACzD,SAAWA,OAAOZ,KAAK,KAAKA,MAAMF,MAAM,kBAC9D,KAAC3C;4CACC4F,SAAS;gDACPpE,SAASZ,uBAAuBW,SAASsB,MAAMF,MAAM,EAAE;gDACvDd,QAAQ;4CACV;sDAEC;6CAED;sDACJ,KAAC7B;4CAAO4E,MAAK;4CAASY,SAAQ;4CAAY/D,UAAU,CAACyC;sDAClD;;;;;;;;iBAMT;;;AAGV;AACAlD,kBAAkBmG,WAAW,GAAG;AAEhC,eAAenG,kBAAiB"}

package/src/lib/components/list-query-notices.component.d.ts

@@ -14,6 +14,24 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+import type { ListFilterField } from '../const/list-filter';
+import type { ListFilterClause, ListFilterOption } from '../const/list-grid-filter';
+/**
+ * A plan's refusals as the notices read them: each refused clause by the
+ * same sentence its chip reads ("Reason is Bounced"), and the search as
+ * "Search". Every list maps `plan.refused` through this and nothing else.
+ */
+export declare function listQueryRefusals(refused: ReadonlyArray<{
+    clause: ListFilterClause | 'search';
+    reason: string;
+}>, context: {
+    fields: readonly ListFilterField[];
+    headers?: Readonly<Record<string, string>>;
+    options?: Readonly<Record<string, readonly ListFilterOption[]>>;
+}): Array<{
+    label: string;
+    reason: string;
+}>;
 export interface ListQueryNoticesProps {
     /**
      * What the list was asked and could not put on its query, each as the thing

package/src/lib/components/list-query-notices.component.js

@@ -16,6 +16,17 @@
  */ 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Alert, Stack } from "@mui/material";
+import { listFilterClauseSentence } from "../const/list-filter-sentence.js";
+/**
+ * A plan's refusals as the notices read them: each refused clause by the
+ * same sentence its chip reads ("Reason is Bounced"), and the search as
+ * "Search". Every list maps `plan.refused` through this and nothing else.
+ */ export function listQueryRefusals(refused, context) {
+    return refused.map((entry)=>({
+            label: entry.clause === 'search' ? 'Search' : listFilterClauseSentence(entry.clause, context),
+            reason: entry.reason
+        }));
+}
 /**
  * WHAT THE QUERY DID NOT TAKE, said above the list (AGL-3321).
  *

package/src/lib/components/list-query-notices.component.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/list-query-notices.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { Alert, Stack } from '@mui/material'\n\nexport interface ListQueryNoticesProps {\n  /**\n   * What the list was asked and could not put on its query, each as the thing\n   * asked (\"Tags contains vip\", \"Search\") and why.\n   */\n  refused: ReadonlyArray<{ label: string; reason: string }>\n  /** Said about what WAS served, e.g. that search matched one word. */\n  notices?: readonly string[]\n}\n\n/**\n * WHAT THE QUERY DID NOT TAKE, said above the list (AGL-3321).\n *\n * Every filter and search word a list applies is on its Firestore query, and\n * one query holds one array clause, one range and thirty disjunctions. A\n * combination past that is not applied at all rather than applied to the\n * rows that happen to be loaded — and a filter the reader set that is not\n * applied must say so, or the list reads as the answer to a question it did\n * not ask.\n */\nexport function ListQueryNotices(props: ListQueryNoticesProps) {\n  const { refused, notices = [] } = props\n  if (!refused.length && !notices.length) return null\n  return (\n    <Stack spacing={1} role=\"status\" aria-label=\"Filter notices\">\n      {refused.map((entry) => (\n        <Alert key={`${entry.label}:${entry.reason}`} severity=\"warning\">\n          {`${entry.label} is not applied: ${entry.reason}.`}\n        </Alert>\n      ))}\n      {notices.map((notice) => (\n        <Alert key={notice} severity=\"info\">\n          {notice}\n        </Alert>\n      ))}\n    </Stack>\n  )\n}\nListQueryNotices.displayName = 'ListQueryNotices'\n\nexport default ListQueryNotices\n"],"names":["Alert","Stack","ListQueryNotices","props","refused","notices","length","spacing","role","aria-label","map","entry","severity","label","reason","notice","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SAASA,KAAK,EAAEC,KAAK,QAAQ,gBAAe;AAY5C;;;;;;;;;CASC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,EAAE,GAAGF;IAClC,IAAI,CAACC,QAAQE,MAAM,IAAI,CAACD,QAAQC,MAAM,EAAE,OAAO;IAC/C,qBACE,MAACL;QAAMM,SAAS;QAAGC,MAAK;QAASC,cAAW;;YACzCL,QAAQM,GAAG,CAAC,CAACC,sBACZ,KAACX;oBAA6CY,UAAS;8BACpD,GAAGD,MAAME,KAAK,CAAC,iBAAiB,EAAEF,MAAMG,MAAM,CAAC,CAAC,CAAC;mBADxC,GAAGH,MAAME,KAAK,CAAC,CAAC,EAAEF,MAAMG,MAAM,EAAE;YAI7CT,QAAQK,GAAG,CAAC,CAACK,uBACZ,KAACf;oBAAmBY,UAAS;8BAC1BG;mBADSA;;;AAMpB;AACAb,iBAAiBc,WAAW,GAAG;AAE/B,eAAed,iBAAgB"}
+{"version":3,"sources":["../../../../../../../../libs/shared/ui/jsx/src/lib/components/list-query-notices.component.tsx"],"sourcesContent":["/**\n * @license\n * Copyright 2026 Aglyn LLC\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *   http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n */\n\n'use client'\n\nimport { Alert, Stack } from '@mui/material'\nimport type { ListFilterField } from '../const/list-filter'\nimport { listFilterClauseSentence } from '../const/list-filter-sentence'\nimport type { ListFilterClause, ListFilterOption } from '../const/list-grid-filter'\n\n/**\n * A plan's refusals as the notices read them: each refused clause by the\n * same sentence its chip reads (\"Reason is Bounced\"), and the search as\n * \"Search\". Every list maps `plan.refused` through this and nothing else.\n */\nexport function listQueryRefusals(\n  refused: ReadonlyArray<{ clause: ListFilterClause | 'search'; reason: string }>,\n  context: {\n    fields: readonly ListFilterField[]\n    headers?: Readonly<Record<string, string>>\n    options?: Readonly<Record<string, readonly ListFilterOption[]>>\n  },\n): Array<{ label: string; reason: string }> {\n  return refused.map((entry) => ({\n    label: entry.clause === 'search' ? 'Search' : listFilterClauseSentence(entry.clause, context),\n    reason: entry.reason,\n  }))\n}\n\nexport interface ListQueryNoticesProps {\n  /**\n   * What the list was asked and could not put on its query, each as the thing\n   * asked (\"Tags contains vip\", \"Search\") and why.\n   */\n  refused: ReadonlyArray<{ label: string; reason: string }>\n  /** Said about what WAS served, e.g. that search matched one word. */\n  notices?: readonly string[]\n}\n\n/**\n * WHAT THE QUERY DID NOT TAKE, said above the list (AGL-3321).\n *\n * Every filter and search word a list applies is on its Firestore query, and\n * one query holds one array clause, one range and thirty disjunctions. A\n * combination past that is not applied at all rather than applied to the\n * rows that happen to be loaded — and a filter the reader set that is not\n * applied must say so, or the list reads as the answer to a question it did\n * not ask.\n */\nexport function ListQueryNotices(props: ListQueryNoticesProps) {\n  const { refused, notices = [] } = props\n  if (!refused.length && !notices.length) return null\n  return (\n    <Stack spacing={1} role=\"status\" aria-label=\"Filter notices\">\n      {refused.map((entry) => (\n        <Alert key={`${entry.label}:${entry.reason}`} severity=\"warning\">\n          {`${entry.label} is not applied: ${entry.reason}.`}\n        </Alert>\n      ))}\n      {notices.map((notice) => (\n        <Alert key={notice} severity=\"info\">\n          {notice}\n        </Alert>\n      ))}\n    </Stack>\n  )\n}\nListQueryNotices.displayName = 'ListQueryNotices'\n\nexport default ListQueryNotices\n"],"names":["Alert","Stack","listFilterClauseSentence","listQueryRefusals","refused","context","map","entry","label","clause","reason","ListQueryNotices","props","notices","length","spacing","role","aria-label","severity","notice","displayName"],"mappings":"AAAA;;;;;;;;;;;;;;;CAeC,GAED;;AAEA,SAASA,KAAK,EAAEC,KAAK,QAAQ,gBAAe;AAE5C,SAASC,wBAAwB,QAAQ,mCAA+B;AAGxE;;;;CAIC,GACD,OAAO,SAASC,kBACdC,OAA+E,EAC/EC,OAIC;IAED,OAAOD,QAAQE,GAAG,CAAC,CAACC,QAAW,CAAA;YAC7BC,OAAOD,MAAME,MAAM,KAAK,WAAW,WAAWP,yBAAyBK,MAAME,MAAM,EAAEJ;YACrFK,QAAQH,MAAMG,MAAM;QACtB,CAAA;AACF;AAYA;;;;;;;;;CASC,GACD,OAAO,SAASC,iBAAiBC,KAA4B;IAC3D,MAAM,EAAER,OAAO,EAAES,UAAU,EAAE,EAAE,GAAGD;IAClC,IAAI,CAACR,QAAQU,MAAM,IAAI,CAACD,QAAQC,MAAM,EAAE,OAAO;IAC/C,qBACE,MAACb;QAAMc,SAAS;QAAGC,MAAK;QAASC,cAAW;;YACzCb,QAAQE,GAAG,CAAC,CAACC,sBACZ,KAACP;oBAA6CkB,UAAS;8BACpD,GAAGX,MAAMC,KAAK,CAAC,iBAAiB,EAAED,MAAMG,MAAM,CAAC,CAAC,CAAC;mBADxC,GAAGH,MAAMC,KAAK,CAAC,CAAC,EAAED,MAAMG,MAAM,EAAE;YAI7CG,QAAQP,GAAG,CAAC,CAACa,uBACZ,KAACnB;oBAAmBkB,UAAS;8BAC1BC;mBADSA;;;AAMpB;AACAR,iBAAiBS,WAAW,GAAG;AAE/B,eAAeT,iBAAgB"}

package/src/lib/components/list-table.component.d.ts

@@ -140,6 +140,22 @@ export interface ListTableProps extends DataTableProps {
      * only thing that selects, so the two gestures cannot collide.
      */
     selectable?: ListTableSelection;
+    /**
+     * The toolbar, its Filters panel and its search, and none of the rows
+     * (AGL-3327).
+     *
+     * For a list the reader can also see some other way — the media library's
+     * thumbnail grid — that must filter exactly as its table view does. The
+     * panel, the quick search and Export all live inside the grid, bound to
+     * its API, so a second, hand-built toolbar for the other view would be a
+     * second filter UI to keep in step with this one. Instead the grid is
+     * drawn with its body collapsed and no rows: the toolbar stays, and the
+     * panel still opens under it (its anchor is kept, at the top of the
+     * collapsed body). The columns chooser and Export go — there are no
+     * columns on screen to choose, and the rows are the other view's to draw
+     * and to export.
+     */
+    toolbarOnly?: boolean;
 }
 /**
  * The grid every FLAT artifact list uses — layouts, components, templates.