` — it renders all of\nthis ([§9](#9-global-pagination-across-all-sources)). Drop to the headless\nrecipe below only when you need control the drop-in doesn't expose (a bespoke\ngrid container, custom chrome placement, extra surrounding UI): assemble it\nyourself from `useSearch` plus the exported primitives. This is what the\n`propertymanagementapp` template's `UnifiedSearch` component used to hand-roll\nbefore adopting merged mode; the skeleton below is the same recipe, trimmed to\nthe essentials.\n\nThe pieces you compose:\n\n| Piece | What renders it | Source of truth |\n| --------------------- | --------------------------------------------------------------- | ------------------------------------- |\n| Search box | `` | `handle.q` / `handle.setQ` |\n| Scope selector | `` | `handle.scope` / `handle.setScope` |\n| **Result count** | your own `` reading `page.totalCount` | `handle.globalPagination.totalCount` |\n| **Merged grid** | map over `handle.mergedResults` → your card per `sourceKey` | `handle.mergedResults` |\n| **Pagination widget** | `` | `handle.globalPagination` |\n| **Filter panel** | `` + `` (per source) | `handle.inScopeSources[i]` controller |\n\nTwo rules make the layout work in **every** scope — the unified \"All\" view, a\nsingle source picked in the selector, and a `lockedScope` page — from one\nimplementation:\n\n1. **Render the count on its own row, directly above the grid, unconditionally.**\n `page.totalCount` is the cumulative in-scope total, so it's meaningful whether\n one source or all of them are in scope. Don't gate it on scope.\n2. **Show per-source filter chrome only when a single source is in scope.** Under\n \"All\", heterogeneous per-source filters can't be combined into one panel, so\n collapse to just the count. Detect this with `handle.scope !== ALL_SCOPE`\n (then `handle.inScopeSources[0]` is the sole controller).\n\n```tsx\nimport {\n useSearch,\n SearchBar,\n ScopeSelector,\n SortControl,\n ActiveFilters,\n FilterProvider,\n FilterResetButton,\n DefaultFilterPanel,\n PaginationControls,\n ALL_SCOPE,\n} from \"@salesforce/ui-bundle-template-feature-react-search\";\n\nfunction UnifiedSearch({ restrictTo }: { restrictTo?: string }) {\n // config.pagination = { mode: \"merged\", mergeOrder: \"proportional\",\n // pageSize: 6, pageSizeOptions: [6, 12, 24] } — see §9 and §11.\n const handle = useSearch(config, { lockedScope: restrictTo });\n const { globalPagination: page, mergedResults } = handle;\n\n const singleSourceInScope = handle.scope !== ALL_SCOPE;\n const soleController = singleSourceInScope ? handle.inScopeSources[0] : undefined;\n\n return (\n \n {/* Row 1 — search box + scope selector (hidden when the scope is locked). */}\n
\n \n {!handle.scopeLocked && (\n \n )}\n
\n\n {/* Row 2 — the sole source's filters + sort, only under a single scope. */}\n {singleSourceInScope && soleController && (\n
\n soleController.filters.active.forEach((f) => soleController.filters.remove(f.field))\n }\n >\n \n
\n
Filters
\n \n \n
\n \n
\n {soleController.config.sortBy && (\n
\n )}\n
\n
\n {page.totalCount} total result{page.totalCount === 1 ? \"\" : \"s\"}\n
\n )}\n\n {/* Merged, cumulatively-paginated card grid. Each item knows its source. */}\n \n {mergedResults.map(({ sourceKey, node }, i) => (\n \n ))}\n
\n\n {/* One shared pager over the cumulative set. Passing pageCount + onGoToPage\n renders numbered page buttons; omit them for prev/next only. */}\n {page.totalCount > 0 && (\n \n )}\n