@aglyn/plugins-crm 1.0.0-beta.199 → 1.0.0-beta.201

package/src/lib/components/activity-timeline.d.ts

@@ -0,0 +1,84 @@
+import type { ListPaginationProps } from '@aglyn/shared-ui-jsx/components/list-pagination.component';
+import { type ReactNode } from 'react';
+/** Which entries of one history are open. */
+export interface TimelineExpansion {
+    isExpanded: (key: string) => boolean;
+    toggle: (key: string) => void;
+    /** Every entry is open and none has been closed since. */
+    allExpanded: boolean;
+    setAllExpanded: (expanded: boolean) => void;
+}
+/**
+ * The open/closed state of a history's entries, held by the CARD so that
+ * the header's "Expand all" and each row's chevron act on one state.
+ *
+ * Kept as a default plus the keys that differ from it, so "Expand all"
+ * reaches the entries of pages the reader has not turned to yet, and a row
+ * closed after it stays closed.
+ */
+export declare function useTimelineExpansion(): TimelineExpansion;
+/** The card header's "Expand all" / "Collapse all". */
+export declare function TimelineExpandAllButton(props: {
+    expansion: TimelineExpansion;
+    disabled?: boolean;
+}): import("react").JSX.Element;
+export declare namespace TimelineExpandAllButton {
+    var displayName: string;
+}
+/** The listener window a history pages over. */
+export interface TimelineWindow {
+    /** A further page exists past the rows the listener holds. */
+    hasMore?: boolean;
+    /** Widens the listener by one step. */
+    showMore?: () => void;
+    /** The listener is reading; the page asked for is held rather than pulled back. */
+    loading?: boolean;
+}
+/**
+ * Newest-first pages of a history, over rows a listener window holds.
+ *
+ * The window is the query's bound — a hundred activities on a record, a
+ * page's worth on the feed — and a page the reader turns to past what it
+ * holds widens it, so the footer's Next is live while the probe row says
+ * more exists and the count stays "of more than" until it does not. Paged
+ * in memory otherwise: the contact timeline merges three sources that share
+ * no cursor, so only a slice of the merged stream can be turned.
+ */
+export declare function useTimelinePages(total: number, reader?: TimelineWindow): {
+    page: number;
+    pageSize: number;
+    slice: <T>(rows: readonly T[]) => T[];
+    footer: ListPaginationProps;
+};
+export interface TimelineEntryProps {
+    /** The glyph for the entry's kind. */
+    icon: ReactNode;
+    /** The chips that say what the entry is: its kind, its direction, its delivery state. */
+    chips?: ReactNode;
+    /** The one line a collapsed entry reads as: a subject, a summary, a note's first line. */
+    title?: ReactNode;
+    /** A subject reads as one; a note's own words as body text. */
+    titleVariant?: 'subtitle2' | 'body2';
+    /** The line under it: who, to or from whom, when. */
+    meta?: ReactNode;
+    /** What the entry opens to. Absent, there is nothing more to show and no chevron. */
+    body?: ReactNode;
+    /** Controls on this one entry — edit, delete. */
+    actions?: ReactNode;
+    expanded?: boolean;
+    onToggle?: () => void;
+    /** Names the chevron, "Expand {label}", so a screen reader knows which entry. */
+    label?: string;
+}
+/**
+ * One entry of a history: collapsed to its heading and caption, opened in
+ * place to its body.
+ *
+ * An entry with no body has no chevron — a spacer keeps its glyph in line
+ * with the rows that have one — and its heading wraps rather than
+ * truncating, since there is nowhere else to read the rest of it.
+ */
+export declare function TimelineEntry(props: TimelineEntryProps): import("react").JSX.Element;
+export declare namespace TimelineEntry {
+    var displayName: string;
+}

package/src/lib/components/activity-timeline.js

@@ -0,0 +1,224 @@
+/**
+ * @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 } from "react/jsx-runtime";
+import { mdiChevronDown, mdiChevronRight, mdiUnfoldLessHorizontal, mdiUnfoldMoreHorizontal } from "@aglyn/shared-data-mdi";
+import { MdiIcon } from "@aglyn/shared-ui-jsx";
+import { TABLE_PAGE_SIZE_DEFAULT } from "@aglyn/shared-ui-jsx/const/table-pagination";
+import { Box, Button, Collapse, IconButton, Stack, Typography } from "@mui/material";
+import { useCallback, useEffect, useId, useMemo, useState } from "react";
+/**
+ * The open/closed state of a history's entries, held by the CARD so that
+ * the header's "Expand all" and each row's chevron act on one state.
+ *
+ * Kept as a default plus the keys that differ from it, so "Expand all"
+ * reaches the entries of pages the reader has not turned to yet, and a row
+ * closed after it stays closed.
+ */ export function useTimelineExpansion() {
+    const [state, setState] = useState(()=>({
+            all: false,
+            flipped: new Set()
+        }));
+    const isExpanded = useCallback((key)=>state.all !== state.flipped.has(key), [
+        state
+    ]);
+    const toggle = useCallback((key)=>{
+        setState((current)=>{
+            const flipped = new Set(current.flipped);
+            if (flipped.has(key)) flipped.delete(key);
+            else flipped.add(key);
+            return {
+                all: current.all,
+                flipped
+            };
+        });
+    }, []);
+    const setAllExpanded = useCallback((all)=>{
+        setState({
+            all,
+            flipped: new Set()
+        });
+    }, []);
+    return useMemo(()=>({
+            isExpanded,
+            toggle,
+            allExpanded: state.all && state.flipped.size === 0,
+            setAllExpanded
+        }), [
+        isExpanded,
+        toggle,
+        state,
+        setAllExpanded
+    ]);
+}
+/** The card header's "Expand all" / "Collapse all". */ export function TimelineExpandAllButton(props) {
+    const { expansion, disabled } = props;
+    const open = expansion.allExpanded;
+    return /*#__PURE__*/ _jsx(Button, {
+        size: "small",
+        disabled: disabled,
+        startIcon: /*#__PURE__*/ _jsx(MdiIcon, {
+            path: (open ? mdiUnfoldLessHorizontal : mdiUnfoldMoreHorizontal).path,
+            size: 0.8
+        }),
+        onClick: ()=>expansion.setAllExpanded(!open),
+        children: open ? 'Collapse all' : 'Expand all'
+    });
+}
+TimelineExpandAllButton.displayName = 'TimelineExpandAllButton';
+/**
+ * Newest-first pages of a history, over rows a listener window holds.
+ *
+ * The window is the query's bound — a hundred activities on a record, a
+ * page's worth on the feed — and a page the reader turns to past what it
+ * holds widens it, so the footer's Next is live while the probe row says
+ * more exists and the count stays "of more than" until it does not. Paged
+ * in memory otherwise: the contact timeline merges three sources that share
+ * no cursor, so only a slice of the merged stream can be turned.
+ */ export function useTimelinePages(total, reader = {}) {
+    const { hasMore = false, showMore, loading = false } = reader;
+    const [page, setPage] = useState(0);
+    const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT);
+    const lastPage = Math.max(0, Math.ceil(total / pageSize) - 1);
+    // A page left empty by a delete shows the last one with rows; while the
+    // window is reading, or holds less than exists, the page asked for stands.
+    const shown = hasMore || loading ? page : Math.min(page, lastPage);
+    const start = shown * pageSize;
+    const short = start + pageSize > total;
+    useEffect(()=>{
+        if (short && hasMore && !loading && showMore) showMore();
+    }, [
+        short,
+        hasMore,
+        loading,
+        showMore
+    ]);
+    const slice = useCallback((rows)=>rows.slice(start, start + pageSize), [
+        start,
+        pageSize
+    ]);
+    const footer = {
+        page: shown,
+        pageSize,
+        rowCount: Math.max(0, Math.min(pageSize, total - start)),
+        count: hasMore ? undefined : total,
+        hasMore,
+        onPageChange: setPage,
+        onPageSizeChange: setPageSize
+    };
+    return {
+        page: shown,
+        pageSize,
+        slice,
+        footer
+    };
+}
+/**
+ * One entry of a history: collapsed to its heading and caption, opened in
+ * place to its body.
+ *
+ * An entry with no body has no chevron — a spacer keeps its glyph in line
+ * with the rows that have one — and its heading wraps rather than
+ * truncating, since there is nowhere else to read the rest of it.
+ */ export function TimelineEntry(props) {
+    const { icon, chips, title, titleVariant = 'body2', meta, body, actions, expanded = false, onToggle, label } = props;
+    const bodyId = useId();
+    const expandable = Boolean(body) && Boolean(onToggle);
+    return /*#__PURE__*/ _jsxs(Stack, {
+        direction: "row",
+        spacing: 1,
+        sx: {
+            alignItems: 'flex-start'
+        },
+        "data-testid": "timeline-entry",
+        "data-expanded": expandable ? String(expanded) : undefined,
+        children: [
+            expandable ? /*#__PURE__*/ _jsx(IconButton, {
+                size: "small",
+                "aria-expanded": expanded,
+                "aria-controls": bodyId,
+                "aria-label": `${expanded ? 'Collapse' : 'Expand'} ${label != null ? label : 'entry'}`,
+                onClick: onToggle,
+                sx: {
+                    mt: -0.25
+                },
+                children: /*#__PURE__*/ _jsx(MdiIcon, {
+                    path: (expanded ? mdiChevronDown : mdiChevronRight).path,
+                    size: 0.8
+                })
+            }) : /*#__PURE__*/ _jsx(Box, {
+                "aria-hidden": true,
+                sx: {
+                    width: 30,
+                    flexShrink: 0
+                }
+            }),
+            /*#__PURE__*/ _jsx(Stack, {
+                sx: {
+                    color: 'text.secondary',
+                    pt: 0.25,
+                    fontSize: (theme)=>theme.typography.h6.fontSize
+                },
+                children: icon
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                spacing: 0.5,
+                sx: {
+                    flex: 1,
+                    minWidth: 0
+                },
+                children: [
+                    chips ? /*#__PURE__*/ _jsx(Stack, {
+                        direction: "row",
+                        spacing: 1,
+                        sx: {
+                            alignItems: 'center',
+                            flexWrap: 'wrap',
+                            rowGap: 0.5
+                        },
+                        children: chips
+                    }) : null,
+                    title ? /*#__PURE__*/ _jsx(Typography, {
+                        variant: titleVariant,
+                        component: "div",
+                        noWrap: expandable && !expanded,
+                        sx: {
+                            overflowWrap: 'anywhere'
+                        },
+                        children: title
+                    }) : null,
+                    meta,
+                    expandable ? /*#__PURE__*/ _jsx(Collapse, {
+                        in: expanded,
+                        unmountOnExit: true,
+                        children: /*#__PURE__*/ _jsx(Box, {
+                            id: bodyId,
+                            children: body
+                        })
+                    }) : body
+                ]
+            }),
+            actions ? /*#__PURE__*/ _jsx(Stack, {
+                direction: "row",
+                spacing: 0.5,
+                children: actions
+            }) : null
+        ]
+    });
+}
+TimelineEntry.displayName = 'TimelineEntry';
+
+//# sourceMappingURL=activity-timeline.js.map

package/src/lib/components/activity-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../../../libs/plugins/crm/src/lib/components/activity-timeline.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'use client'\n\nimport {\n  mdiChevronDown,\n  mdiChevronRight,\n  mdiUnfoldLessHorizontal,\n  mdiUnfoldMoreHorizontal,\n} from '@aglyn/shared-data-mdi'\nimport { MdiIcon } from '@aglyn/shared-ui-jsx'\nimport type { ListPaginationProps } from '@aglyn/shared-ui-jsx/components/list-pagination.component'\nimport { TABLE_PAGE_SIZE_DEFAULT } from '@aglyn/shared-ui-jsx/const/table-pagination'\nimport { Box, Button, Collapse, IconButton, Stack, Typography } from '@mui/material'\nimport { type ReactNode, useCallback, useEffect, useId, useMemo, useState } from 'react'\n\n/*\n * THE ROW GRAMMAR OF EVERY CRM HISTORY: the Timeline on a contact, the\n * Activity card on a lead, a company and a deal, and the Recent activity\n * feed under the contacts list.\n *\n * Salesforce's activity timeline is the model. Each entry is a collapsed\n * row — a chevron, the kind, a one-line heading and the who/whom/when under\n * it — that opens in place to what it holds: an email's body, a note's whole\n * text. The card header carries \"Expand all\", the list is paged by the\n * console's own footer, and nothing a row showed before is dropped: what\n * does not fit on the collapsed row is in the opened one.\n */\n\n/** Which entries of one history are open. */\nexport interface TimelineExpansion {\n  isExpanded: (key: string) => boolean\n  toggle: (key: string) => void\n  /** Every entry is open and none has been closed since. */\n  allExpanded: boolean\n  setAllExpanded: (expanded: boolean) => void\n}\n\n/**\n * The open/closed state of a history's entries, held by the CARD so that\n * the header's \"Expand all\" and each row's chevron act on one state.\n *\n * Kept as a default plus the keys that differ from it, so \"Expand all\"\n * reaches the entries of pages the reader has not turned to yet, and a row\n * closed after it stays closed.\n */\nexport function useTimelineExpansion(): TimelineExpansion {\n  const [state, setState] = useState<{ all: boolean; flipped: ReadonlySet<string> }>(\n    () => ({ all: false, flipped: new Set<string>() }),\n  )\n  const isExpanded = useCallback(\n    (key: string) => state.all !== state.flipped.has(key),\n    [state],\n  )\n  const toggle = useCallback((key: string) => {\n    setState((current) => {\n      const flipped = new Set(current.flipped)\n      if (flipped.has(key)) flipped.delete(key)\n      else flipped.add(key)\n      return { all: current.all, flipped }\n    })\n  }, [])\n  const setAllExpanded = useCallback((all: boolean) => {\n    setState({ all, flipped: new Set<string>() })\n  }, [])\n  return useMemo(\n    () => ({\n      isExpanded,\n      toggle,\n      allExpanded: state.all && state.flipped.size === 0,\n      setAllExpanded,\n    }),\n    [isExpanded, toggle, state, setAllExpanded],\n  )\n}\n\n/** The card header's \"Expand all\" / \"Collapse all\". */\nexport function TimelineExpandAllButton(props: {\n  expansion: TimelineExpansion\n  disabled?: boolean\n}) {\n  const { expansion, disabled } = props\n  const open = expansion.allExpanded\n  return (\n    <Button\n      size=\"small\"\n      disabled={disabled}\n      startIcon={\n        <MdiIcon\n          path={(open ? mdiUnfoldLessHorizontal : mdiUnfoldMoreHorizontal).path}\n          size={0.8}\n        />\n      }\n      onClick={() => expansion.setAllExpanded(!open)}\n    >\n      {open ? 'Collapse all' : 'Expand all'}\n    </Button>\n  )\n}\nTimelineExpandAllButton.displayName = 'TimelineExpandAllButton'\n\n/** The listener window a history pages over. */\nexport interface TimelineWindow {\n  /** A further page exists past the rows the listener holds. */\n  hasMore?: boolean\n  /** Widens the listener by one step. */\n  showMore?: () => void\n  /** The listener is reading; the page asked for is held rather than pulled back. */\n  loading?: boolean\n}\n\n/**\n * Newest-first pages of a history, over rows a listener window holds.\n *\n * The window is the query's bound — a hundred activities on a record, a\n * page's worth on the feed — and a page the reader turns to past what it\n * holds widens it, so the footer's Next is live while the probe row says\n * more exists and the count stays \"of more than\" until it does not. Paged\n * in memory otherwise: the contact timeline merges three sources that share\n * no cursor, so only a slice of the merged stream can be turned.\n */\nexport function useTimelinePages(total: number, reader: TimelineWindow = {}) {\n  const { hasMore = false, showMore, loading = false } = reader\n  const [page, setPage] = useState(0)\n  const [pageSize, setPageSize] = useState(TABLE_PAGE_SIZE_DEFAULT)\n  const lastPage = Math.max(0, Math.ceil(total / pageSize) - 1)\n  // A page left empty by a delete shows the last one with rows; while the\n  // window is reading, or holds less than exists, the page asked for stands.\n  const shown = hasMore || loading ? page : Math.min(page, lastPage)\n  const start = shown * pageSize\n  const short = start + pageSize > total\n  useEffect(() => {\n    if (short && hasMore && !loading && showMore) showMore()\n  }, [short, hasMore, loading, showMore])\n  const slice = useCallback(\n    <T,>(rows: readonly T[]): T[] => rows.slice(start, start + pageSize),\n    [start, pageSize],\n  )\n  const footer: ListPaginationProps = {\n    page: shown,\n    pageSize,\n    rowCount: Math.max(0, Math.min(pageSize, total - start)),\n    count: hasMore ? undefined : total,\n    hasMore,\n    onPageChange: setPage,\n    onPageSizeChange: setPageSize,\n  }\n  return { page: shown, pageSize, slice, footer }\n}\n\nexport interface TimelineEntryProps {\n  /** The glyph for the entry's kind. */\n  icon: ReactNode\n  /** The chips that say what the entry is: its kind, its direction, its delivery state. */\n  chips?: ReactNode\n  /** The one line a collapsed entry reads as: a subject, a summary, a note's first line. */\n  title?: ReactNode\n  /** A subject reads as one; a note's own words as body text. */\n  titleVariant?: 'subtitle2' | 'body2'\n  /** The line under it: who, to or from whom, when. */\n  meta?: ReactNode\n  /** What the entry opens to. Absent, there is nothing more to show and no chevron. */\n  body?: ReactNode\n  /** Controls on this one entry — edit, delete. */\n  actions?: ReactNode\n  expanded?: boolean\n  onToggle?: () => void\n  /** Names the chevron, \"Expand {label}\", so a screen reader knows which entry. */\n  label?: string\n}\n\n/**\n * One entry of a history: collapsed to its heading and caption, opened in\n * place to its body.\n *\n * An entry with no body has no chevron — a spacer keeps its glyph in line\n * with the rows that have one — and its heading wraps rather than\n * truncating, since there is nowhere else to read the rest of it.\n */\nexport function TimelineEntry(props: TimelineEntryProps) {\n  const {\n    icon,\n    chips,\n    title,\n    titleVariant = 'body2',\n    meta,\n    body,\n    actions,\n    expanded = false,\n    onToggle,\n    label,\n  } = props\n  const bodyId = useId()\n  const expandable = Boolean(body) && Boolean(onToggle)\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={1}\n      sx={{ alignItems: 'flex-start' }}\n      data-testid=\"timeline-entry\"\n      data-expanded={expandable ? String(expanded) : undefined}\n    >\n      {expandable ? (\n        <IconButton\n          size=\"small\"\n          aria-expanded={expanded}\n          aria-controls={bodyId}\n          aria-label={`${expanded ? 'Collapse' : 'Expand'} ${label ?? 'entry'}`}\n          onClick={onToggle}\n          sx={{ mt: -0.25 }}\n        >\n          <MdiIcon path={(expanded ? mdiChevronDown : mdiChevronRight).path} size={0.8} />\n        </IconButton>\n      ) : (\n        <Box aria-hidden sx={{ width: 30, flexShrink: 0 }} />\n      )}\n      <Stack\n        sx={{\n          color: 'text.secondary',\n          pt: 0.25,\n          fontSize: (theme) => theme.typography.h6.fontSize,\n        }}\n      >\n        {icon}\n      </Stack>\n      <Stack spacing={0.5} sx={{ flex: 1, minWidth: 0 }}>\n        {chips ? (\n          <Stack\n            direction=\"row\"\n            spacing={1}\n            sx={{ alignItems: 'center', flexWrap: 'wrap', rowGap: 0.5 }}\n          >\n            {chips}\n          </Stack>\n        ) : null}\n        {title ? (\n          <Typography\n            variant={titleVariant}\n            component=\"div\"\n            noWrap={expandable && !expanded}\n            sx={{ overflowWrap: 'anywhere' }}\n          >\n            {title}\n          </Typography>\n        ) : null}\n        {meta}\n        {expandable ? (\n          <Collapse in={expanded} unmountOnExit>\n            <Box id={bodyId}>{body}</Box>\n          </Collapse>\n        ) : (\n          body\n        )}\n      </Stack>\n      {actions ? (\n        <Stack direction=\"row\" spacing={0.5}>\n          {actions}\n        </Stack>\n      ) : null}\n    </Stack>\n  )\n}\nTimelineEntry.displayName = 'TimelineEntry'\n"],"names":["mdiChevronDown","mdiChevronRight","mdiUnfoldLessHorizontal","mdiUnfoldMoreHorizontal","MdiIcon","TABLE_PAGE_SIZE_DEFAULT","Box","Button","Collapse","IconButton","Stack","Typography","useCallback","useEffect","useId","useMemo","useState","useTimelineExpansion","state","setState","all","flipped","Set","isExpanded","key","has","toggle","current","delete","add","setAllExpanded","allExpanded","size","TimelineExpandAllButton","props","expansion","disabled","open","startIcon","path","onClick","displayName","useTimelinePages","total","reader","hasMore","showMore","loading","page","setPage","pageSize","setPageSize","lastPage","Math","max","ceil","shown","min","start","short","slice","rows","footer","rowCount","count","undefined","onPageChange","onPageSizeChange","TimelineEntry","icon","chips","title","titleVariant","meta","body","actions","expanded","onToggle","label","bodyId","expandable","Boolean","direction","spacing","sx","alignItems","data-testid","data-expanded","String","aria-expanded","aria-controls","aria-label","mt","aria-hidden","width","flexShrink","color","pt","fontSize","theme","typography","h6","flex","minWidth","flexWrap","rowGap","variant","component","noWrap","overflowWrap","in","unmountOnExit","id"],"mappings":"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"}

package/src/lib/components/companies-section.d.ts

@@ -27,12 +27,12 @@ export interface CompaniesSectionProps {
  *
  * ## What a filter may be
  *
- * The scope predicate is an array clause, and Firestore carries one per
- * query, so the word-prefix search the contact list offers cannot run here.
- * The name is a prefix range and an exact match instead, and the owner is a
- * choice from the roster — each reaching the whole collection, which is the
- * property a search must have: a company on page four is found, not reported
- * missing. `COMPANY_LIST_FILTER_FIELDS` states what the indexes serve.
+ * Every clause and the search word are on the one query (AGL-3321): the
+ * search reads the name's and the domain's word prefixes, the name is also
+ * an exact match and a prefix, the owner a choice from the roster, and "No
+ * next activity" a `null` — each reaching the whole collection, which is
+ * the property a filter must have: a company on page four is found, not
+ * reported missing. `COMPANY_LIST_DECLARATION` states what the query asks.
  *
  * ## Creating is a drawer
  *

package/src/lib/components/companies-section.js

@@ -16,31 +16,31 @@
  */ 'use client';
 import { _ as _extends } from "@swc/helpers/_/_extends";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { CRM_COLLECTIONS, filterByNextActivity, isNoNextActivityClause, pluginDocsHelp, crmMemberPickerLabel } from "@aglyn/aglyn";
+import { CRM_COLLECTIONS, pluginDocsHelp, crmMemberPickerLabel } from "@aglyn/aglyn";
 import { mdiPlus } from "@aglyn/shared-data-mdi";
 import { CardDisplay, MdiIcon } from "@aglyn/shared-ui-jsx";
 import { ListPagination } from "@aglyn/shared-ui-jsx/components/list-pagination.component";
 import { ListTable } from "@aglyn/shared-ui-jsx/components/list-table.component";
-import { listFilterColumn } from "@aglyn/shared-ui-jsx/const/list-filter";
+import { listFilterColumn } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
+import ListQueryNotices, { listQueryRefusals } from "@aglyn/shared-ui-jsx/components/list-query-notices.component";
 import { useCrmSavedView } from "../hooks/use-crm-saved-view.js";
 import { useCrmViewGrid } from "../hooks/use-crm-view-grid.js";
 import { CRM_LIST_SLOTS, CrmColumnOrderProvider } from "./crm-column-menu.js";
 import { CRM_NEXT_ACTIVITY_FILTER_FIELD, CRM_NEXT_ACTIVITY_FILTER_HEADER, nextActivityColumn } from "./crm-next-activity-column.js";
+import { useCrmFoldsScope, useCrmListQuery } from "../hooks/use-crm-list-query.js";
 import ListFilterChips from "@aglyn/shared-ui-jsx/components/list-filter-chips.component";
 import { listFilterGridColumns } from "@aglyn/shared-ui-jsx/const/list-grid-filter";
 import { useListGridFilter } from "@aglyn/shared-ui-jsx/hooks/use-list-grid-filter";
 import CrmViewsControl from "./crm-views-control.js";
 import { CrmListActions, CrmListToolbar } from "./crm-list-toolbar.js";
 import { TABLE_ROW_HEIGHT } from "@aglyn/shared-ui-jsx/const/table-pagination";
-import { listFilterConstraints, usePagedCollection, useFirestore } from "@aglyn/tenant-feature-instance";
 import { Button, Chip, Stack, Typography } from "@mui/material";
 import { getGridSingleSelectOperators } from "@mui/x-data-grid";
-import { collection, limit, orderBy, query } from "firebase/firestore";
 import { useRouter } from "next/navigation";
-import { useCallback, useMemo, useState } from "react";
-import { COMPANY_LIST_FILTER_FIELDS } from "../constants/company-filters.js";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { COMPANY_LIST_DECLARATION, COMPANY_LIST_FILTER_FIELDS, COMPANY_PREFIX_SEARCH } from "../constants/company-filters.js";
 import { useContactFieldDefinitions } from "../hooks/use-contact-field-definitions.js";
-import { crmVisibleToClause, useCrmScope } from "../hooks/use-crm-scope.js";
+import { useCrmScope } from "../hooks/use-crm-scope.js";
 import { useOrgMemberOptions } from "../hooks/use-org-member-options.js";
 import { companiesCsv } from "../model/companies-csv.js";
 import { downloadTextFile } from "../model/contacts-csv.js";
@@ -49,10 +49,7 @@ import CompaniesBulkBar from "./companies-bulk-bar.js";
 import CompanyEditDrawer from "./company-edit-drawer.js";
 import { CompanyImportButton } from "./company-import-drawer.js";
 import { customFieldColumns } from "./contact-custom-columns.js";
-/** What the companies grid's panel offers: the served fields, and "No next activity". */ const COMPANY_GRID_FILTER_FIELDS = [
-    ...COMPANY_LIST_FILTER_FIELDS,
-    CRM_NEXT_ACTIVITY_FILTER_FIELD
-];
+/** What the companies grid's panel offers — every field the query asks. */ const COMPANY_GRID_FILTER_FIELDS = COMPANY_LIST_FILTER_FIELDS;
 const COMPANY_GRID_FILTER_HEADERS = {
     name: 'Company',
     ownerUid: 'Owner',
@@ -79,12 +76,12 @@ const COMPANY_GRID_FILTER_HEADERS = {
  *
  * ## What a filter may be
  *
- * The scope predicate is an array clause, and Firestore carries one per
- * query, so the word-prefix search the contact list offers cannot run here.
- * The name is a prefix range and an exact match instead, and the owner is a
- * choice from the roster — each reaching the whole collection, which is the
- * property a search must have: a company on page four is found, not reported
- * missing. `COMPANY_LIST_FILTER_FIELDS` states what the indexes serve.
+ * Every clause and the search word are on the one query (AGL-3321): the
+ * search reads the name's and the domain's word prefixes, the name is also
+ * an exact match and a prefix, the owner a choice from the roster, and "No
+ * next activity" a `null` — each reaching the whole collection, which is
+ * the property a filter must have: a company on page four is found, not
+ * reported missing. `COMPANY_LIST_DECLARATION` states what the query asks.
  *
  * ## Creating is a drawer
  *
@@ -99,11 +96,9 @@ const COMPANY_GRID_FILTER_HEADERS = {
  * the same file the bar writes over the selection, headed as the import
  * reads it — and Import CSV opens the companies drawer beside it.
  */ export function CompaniesSection(props) {
-    var _viewFilters_find, _ref;
     const { hostId, org, basePath } = props;
     const routes = crmRoutes(basePath);
     const router = useRouter();
-    const firestore = useFirestore();
     const { scope, orgId, visibleTo } = useCrmScope({
         hostId,
         org
@@ -116,54 +111,36 @@ const COMPANY_GRID_FILTER_HEADERS = {
     // The org's company fields, for the optional columns below (AGL-2661).
     const companyFields = useContactFieldDefinitions(orgId, 'company');
     /*
-   * The column filter is the saved VIEW'S first clause (AGL-2617): this
-   * grid's panel holds one, and a view of companies holds that one beside
-   * the columns and the sort. Declared BEFORE the listener that reads it,
-   * as the filter always was — the query is rebuilt from it.
+   * The clauses are the saved VIEW'S (AGL-2617), beside its columns and
+   * sort; the grid's panel and the chips edit them, and the query answers
+   * every one and the search word together (AGL-3321).
    */ const views = useCrmSavedView({
         section: 'companies',
         hostId,
         org,
         basePath
     });
-    /*
-   * ...beside the "No next activity" clause (AGL-2661), which is not a
-   * query the listener can run — absence has no index — and narrows the
-   * loaded page below instead. The grid's one clause is the first that is
-   * not it, and setting the grid's clause keeps it.
-   */ const viewFilters = views.state.filters;
-    const filter = (_viewFilters_find = viewFilters.find((clause)=>!isNoNextActivityClause(clause))) != null ? _viewFilters_find : null;
-    const setFilter = useCallback((request)=>views.setFilters([
-            ...request ? [
-                request
-            ] : [],
-            ...viewFilters.filter(isNoNextActivityClause)
-        ]), [
-        views.setFilters,
-        viewFilters
-    ]);
-    const { rows: loaded, status, hasMore, page, setPage, pageSize, setPageSize } = usePagedCollection((pageLimit)=>{
-        if (!scope) return null;
-        const constraints = listFilterConstraints(COMPANY_LIST_FILTER_FIELDS, filter);
-        return query(collection(firestore, scope[0], scope[1], CRM_COLLECTIONS.companies), // Absent at the organization level, where the tokens are `null` (AGL-2630).
-        ...crmVisibleToClause(visibleTo), ...constraints != null ? constraints : [
-            orderBy('updatedAt', 'desc')
-        ], limit(pageLimit));
-    }, [
-        firestore,
+    const viewFilters = views.state.filters;
+    const [searchWords, setSearchWords] = useState([]);
+    const foldsScope = useCrmFoldsScope(orgId, visibleTo);
+    const { rows: companies, status, hasMore, page, setPage, pageSize, setPageSize, plan } = useCrmListQuery({
         scope,
+        collection: CRM_COLLECTIONS.companies,
         visibleTo,
-        filter
-    ], {
-        idField: '$id'
+        foldsScope,
+        declaration: COMPANY_LIST_DECLARATION,
+        clauses: viewFilters,
+        search: searchWords,
+        prefixSearch: COMPANY_PREFIX_SEARCH
     });
-    const companies = useMemo(()=>filterByNextActivity(loaded, viewFilters), [
-        loaded,
-        viewFilters
-    ]);
     const nowMs = useMemo(()=>Date.now(), []);
     const [createOpen, setCreateOpen] = useState(false);
     const [selectedIds, setSelectedIds] = useState([]);
+    // A filter, a search or a page is a different set of rows.
+    useEffect(()=>setSelectedIds([]), [
+        plan,
+        page
+    ]);
     /*
    * The owner is written by ADDRESS, because the companies import resolves
    * an owner by email; the same options reach the bar, so the page's file
@@ -372,11 +349,7 @@ const COMPANY_GRID_FILTER_HEADERS = {
     ]);
     /*
    * The grid's own Filters panel and quick search edit the view's clauses
-   * (AGL-3313). The query serves ONE clause — a paged list has no window to
-   * narrow beyond the page — so the panel's clause replaces the last, and
-   * "No next activity", which narrows the loaded page, stands beside it.
-   * The search box is the name's prefix: the one text search the indexes
-   * serve here, so typing in it is the same clause as "Company starts with".
+   * (AGL-3313); the query answers them all (AGL-3321).
    */ const ownerOptions = useMemo(()=>members.options.map((option)=>({
                 value: option.uid,
                 label: crmMemberPickerLabel(option)
@@ -389,42 +362,35 @@ const COMPANY_GRID_FILTER_HEADERS = {
         columns,
         ownerOptions
     ]);
-    const searchWords = useMemo(()=>(filter == null ? void 0 : filter.field) === 'name' && filter.op === 'startsWith' ? [
-            filter.value
-        ] : [], [
-        filter
-    ]);
-    const setSearchWords = useCallback((words)=>{
-        const term = words.join(' ').trim();
-        if (term) setFilter({
-            field: 'name',
-            op: 'startsWith',
-            value: term
-        });
-        else if ((filter == null ? void 0 : filter.field) === 'name' && filter.op === 'startsWith') setFilter(null);
-    }, [
-        filter,
-        setFilter
-    ]);
     const gridFilter = useListGridFilter({
         clauses: viewFilters,
         onChange: views.setFilters,
         selectFields: [
             'ownerUid'
         ],
-        single: true,
-        keepAlongside: isNoNextActivityClause,
         search: {
             words: searchWords,
             onChange: setSearchWords
         }
     });
+    // What the query could not hold, named by the clause the reader set.
+    const refused = useMemo(()=>listQueryRefusals(plan.refused, {
+            fields: COMPANY_GRID_FILTER_FIELDS,
+            headers: COMPANY_GRID_FILTER_HEADERS,
+            options: {
+                ownerUid: ownerOptions
+            }
+        }), [
+        plan.refused,
+        ownerOptions
+    ]);
     /*
    * The grid's models are the view's (AGL-2617). The filter model shows the
    * view's clause in the panel as a typed one would appear — the owner's
    * stored `equals` back as the single-select `is` the panel offers — so a
    * view opened from its address reads as filtered, not as a mystery.
    */ const grid = useCrmViewGrid(views, filterColumns);
+    /** Whether anything narrows the list, so an empty one is "no match", not "none yet". */ const narrowed = viewFilters.length > 0 || searchWords.some((word)=>word.trim());
     const newCompanyButton = /*#__PURE__*/ _jsx(Button, {
         size: "small",
         variant: "contained",
@@ -487,10 +453,14 @@ const COMPANY_GRID_FILTER_HEADERS = {
                                 options: {
                                     ownerUid: ownerOptions
                                 },
-                                servedField: (_ref = filter == null ? void 0 : filter.field) != null ? _ref : null
+                                marksServed: false
                             })
                         ]
                     }),
+                    /*#__PURE__*/ _jsx(ListQueryNotices, {
+                        refused: refused,
+                        notices: plan.notices
+                    }),
                     /*#__PURE__*/ _jsx(CompaniesBulkBar, {
                         hostId: hostId,
                         scope: scope,
@@ -511,16 +481,16 @@ const COMPANY_GRID_FILTER_HEADERS = {
                                 selected: selectedIds,
                                 onChange: setSelectedIds
                             },
-                            noRowsLabel: "No companies yet",
-                            noRowsDescription: "A company groups the contacts who work at one business, with its domain, owner and address. Create the first one, or link a contact to a company from their page.",
-                            noRowsAction: newCompanyButton,
+                            noRowsLabel: narrowed ? 'No companies match these filters' : 'No companies yet',
+                            noRowsDescription: narrowed ? undefined : 'A company groups the contacts who work at one business, with its domain, owner and address. Create the first one, or link a contact to a company from their page.',
+                            noRowsAction: narrowed ? undefined : newCompanyButton,
                             onOpen: (id)=>openCompany(String(id)),
                             // An empty table while the read is in flight reads as "you have
                             // none" rather than "these are on their way".
                             loading: !scope || status === 'loading',
                             /*
              * The grid must NOT also filter. The query answers it, so a client
-             * pass could only drop rows the query already matched.
+             * pass could only drop rows the query already matched (AGL-3321).
              */ filterMode: "server",
                             filterModel: gridFilter.filterModel,
                             onFilterModelChange: gridFilter.onFilterModelChange,