@salesforce/ui-bundle-template-app-react-sample-b2e 11.55.1 → 11.56.0

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/MergedSearchResults.tsx

@@ -31,7 +31,6 @@
  *   - **Global pager** — one {@link PaginationControls} over the cumulative set.
  */
 
-import type { ReactNode } from "react";
 import { AlertCircle } from "lucide-react";
 import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
 import { Skeleton } from "../../../components/ui/skeleton";
@@ -40,11 +39,9 @@ import { DefaultFilterPanel } from "./filters/DefaultFilterPanel";
 import { FilterProvider, FilterResetButton } from "./filters/FilterContext";
 import { PaginationControls } from "./controls/PaginationControls";
 import { SortControl } from "./controls/SortControl";
-import { DefaultResultRow } from "./results/DefaultResultRow";
+import { resolveResultRenderer, type ResultRenderer } from "./results/resolveResultRenderer";
 import { ALL_SCOPE, type SearchHandle, type SourceController } from "../types";
 
-type ResultRenderer = ((node: unknown) => ReactNode) | false;
-
 export interface MergedSearchResultsProps {
 	handle: SearchHandle;
 	/**
@@ -126,6 +123,8 @@ export function MergedSearchResults({
 
 			{soleController && <SingleSourceChrome controller={soleController} />}
 
+			{/* Page-level error — set only when every in-scope source failed (or a
+			    whole-request/network failure). Shown once, above the grid. */}
 			{error && (
 				<Alert variant="destructive" role="alert">
 					<AlertCircle />
@@ -134,6 +133,20 @@ export function MergedSearchResults({
 				</Alert>
 			)}
 
+			{/* Per-source errors — a source that failed while a sibling succeeded
+			    surfaces its own banner without blanking the shared grid. Suppressed
+			    when the page-level error already covers the all-failed case. */}
+			{!error &&
+				handle.inScopeSources
+					.filter((c) => !!c.error)
+					.map((c) => (
+						<Alert key={c.config.key} variant="destructive" role="alert">
+							<AlertCircle />
+							<AlertTitle>Failed to load {c.config.label}</AlertTitle>
+							<AlertDescription>{c.error}</AlertDescription>
+						</Alert>
+					))}
+
 			{/* Results count — its own row, directly above the grid, in every scope.
 			    Hidden when there are none (the empty state covers that case). */}
 			{!loading && !error && page.totalCount > 0 && (
@@ -155,14 +168,14 @@ export function MergedSearchResults({
 			) : (
 				<ul className={gridClassName}>
 					{mergedResults.map(({ sourceKey, node }, i) => {
-						const override = renderResult?.[sourceKey];
-						if (override === false) return null;
 						const source = handle.sources[sourceKey]?.config;
-						const rendered = override ? (
-							override(node)
-						) : source ? (
-							<DefaultResultRow node={node} source={source} />
-						) : null;
+						if (!source) return null;
+						// Resolve via the shared helper so CMS nodes render through
+						// CmsResultRow (never DefaultResultRow) in the merged grid too;
+						// a `renderResult[key]` override — including `false` — still wins.
+						const renderer = resolveResultRenderer(source, renderResult);
+						if (renderer === false) return null;
+						const rendered = renderer(node);
 						const badge =
 							showSourceBadges && source ? (
 								<SourceBadge
@@ -237,15 +250,19 @@ interface SingleSourceChromeProps {
  */
 function SingleSourceChrome({ controller }: SingleSourceChromeProps) {
 	const { config: source, filters, sort } = controller;
-	const showFilterPanel = (source.filterBy?.length ?? 0) > 0;
-	const showSortControl = (source.sortBy?.length ?? 0) > 0;
+	// Filter/sort chrome is SObject-only — narrow on `kind` so the union widening
+	// doesn't regress SObject behavior. CMS sources render no filter/sort chrome.
+	const sObjectSource = source.kind === "sobject" ? source : null;
+	const sortBy = sObjectSource?.sortBy;
+	const showFilterPanel = (sObjectSource?.filterBy?.length ?? 0) > 0;
+	const showSortControl = (sortBy?.length ?? 0) > 0;
 	const showActiveChips = filters.active.length > 0;
 
 	if (!showFilterPanel && !showSortControl && !showActiveChips) return null;
 
 	return (
 		<div className="flex flex-col gap-4">
-			{showFilterPanel && (
+			{showFilterPanel && sObjectSource && (
 				<FilterProvider
 					filters={filters.active}
 					onFilterChange={filters.set}
@@ -258,7 +275,7 @@ function SingleSourceChrome({ controller }: SingleSourceChromeProps) {
 							<FilterResetButton size="sm" />
 						</div>
 						<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
-							<DefaultFilterPanel source={source} />
+							<DefaultFilterPanel source={sObjectSource} />
 						</div>
 					</div>
 				</FilterProvider>
@@ -266,8 +283,8 @@ function SingleSourceChrome({ controller }: SingleSourceChromeProps) {
 
 			{(showSortControl || showActiveChips) && (
 				<div className="flex flex-wrap items-center gap-2">
-					{showSortControl && source.sortBy && (
-						<SortControl configs={source.sortBy} sort={sort.current} onSortChange={sort.set} />
+					{showSortControl && sortBy && (
+						<SortControl configs={sortBy} sort={sort.current} onSortChange={sort.set} />
 					)}
 					{showActiveChips && <ActiveFilters filters={filters.active} onRemove={filters.remove} />}
 				</div>

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/Search.tsx

@@ -29,6 +29,8 @@
  */
 
 import { useMemo, type ReactNode } from "react";
+import { AlertCircle } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../../../components/ui/alert";
 import { useSearch } from "../hooks/useSearch";
 import { SearchBar } from "./controls/SearchBar";
 import { ScopeSelector } from "./controls/ScopeSelector";
@@ -152,6 +154,7 @@ export function Search({
 						scope={handle.scope}
 						onScopeChange={handle.setScope}
 						allLabel={allScopeLabel}
+						discoveredContentTypes={handle.discoveredContentTypes}
 					/>
 				)}
 			</div>
@@ -164,20 +167,35 @@ export function Search({
 				/>
 			) : (
 				<>
-					{/* Aggregate count on its own row, directly above the results —
-					    only in "All" scope, where the per-source sections don't each
-					    carry a single meaningful total. */}
-					{showTotalResults && !handle.loading && (
-						<p className="text-sm text-muted-foreground" role="status">
-							{totalResults} total result{totalResults === 1 ? "" : "s"}
-						</p>
+					{handle.error ? (
+						/* Page-level failure (every queried source failed, or a
+						   whole-request/network error). Show the single consolidated
+						   banner and nothing else — the per-source sections would each
+						   repeat the same "Failed to load <source>" error and their
+						   (now empty) filter/sort chrome, so suppress them entirely. */
+						<Alert variant="destructive" role="alert">
+							<AlertCircle aria-hidden="true" />
+							<AlertTitle>Search failed</AlertTitle>
+							<AlertDescription>{handle.error}</AlertDescription>
+						</Alert>
+					) : (
+						<>
+							{/* Aggregate count on its own row, directly above the results —
+							    only in "All" scope, where the per-source sections don't each
+							    carry a single meaningful total. */}
+							{showTotalResults && !handle.loading && (
+								<p className="text-sm text-muted-foreground" role="status">
+									{totalResults} total result{totalResults === 1 ? "" : "s"}
+								</p>
+							)}
+							<SearchResults
+								handle={handle}
+								renderResult={renderResult}
+								renderFilters={renderFilters}
+								emptyMessages={emptyMessages}
+							/>
+						</>
 					)}
-					<SearchResults
-						handle={handle}
-						renderResult={renderResult}
-						renderFilters={renderFilters}
-						emptyMessages={emptyMessages}
-					/>
 				</>
 			)}
 		</div>

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/SearchResults.tsx

@@ -21,11 +21,10 @@
 
 import type { ReactNode } from "react";
 import { SourceSection } from "./SourceSection";
-import { DefaultResultRow } from "./results/DefaultResultRow";
 import { DefaultFilterPanel } from "./filters/DefaultFilterPanel";
-import { ALL_SCOPE, type SearchHandle } from "../types";
+import { resolveResultRenderer, type ResultRenderer } from "./results/resolveResultRenderer";
+import { ALL_SCOPE, parseScope, type SearchHandle } from "../types";
 
-type ResultRenderer = ((node: unknown) => ReactNode) | false;
 type FilterRenderer = (() => ReactNode) | false;
 
 interface SearchResultsProps {
@@ -42,23 +41,30 @@ export function SearchResults({
 	emptyMessages,
 }: SearchResultsProps) {
 	const filtersHidden = handle.scope === ALL_SCOPE;
+	// Match sections against the base scope so a "<cmsKey>:<fqn>" scope still
+	// renders the CMS source's section (the fqn only narrows the query).
+	const { base: scopeBase } = parseScope(handle.scope);
 	return (
 		<div className="space-y-10">
 			{Object.entries(handle.sources).map(([key, controller]) => {
-				if (handle.scope !== ALL_SCOPE && handle.scope !== key) return null;
-				const overrideResult = renderResult?.[key];
-				if (overrideResult === false) return null;
-				const resolvedRenderResult: (node: unknown) => ReactNode =
-					overrideResult ?? ((node) => <DefaultResultRow node={node} source={controller.config} />);
+				if (scopeBase !== ALL_SCOPE && scopeBase !== key) return null;
+				// Resolve the renderer through the shared helper so a CMS source
+				// renders via CmsResultRow (never DefaultResultRow) in this mode; a
+				// `renderResult[key]` override — including `false` (hide) — still wins.
+				const resolvedRenderResult = resolveResultRenderer(controller.config, renderResult);
+				if (resolvedRenderResult === false) return null;
 
+				// CMS sources have no `filterBy`; the guard below keeps their chrome off.
 				const overrideFilters = renderFilters?.[key];
-				const hasFilterFields = (controller.config.filterBy?.length ?? 0) > 0;
+				const sourceConfig = controller.config;
+				const hasFilterFields =
+					sourceConfig.kind === "sobject" && (sourceConfig.filterBy?.length ?? 0) > 0;
 				const resolvedRenderFilters: (() => ReactNode) | undefined =
 					overrideFilters === false
 						? undefined
 						: (overrideFilters ??
-							(hasFilterFields
-								? () => <DefaultFilterPanel source={controller.config} />
+							(hasFilterFields && sourceConfig.kind === "sobject"
+								? () => <DefaultFilterPanel source={sourceConfig} />
 								: undefined));
 
 				return (

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/SourceSection.tsx

@@ -54,9 +54,14 @@ export function SourceSection({
 
 	const pageSizeOptions = pagination.pageSizeOptions ?? [pagination.pageSize];
 
+	// `sortBy` / `idField` are SObject-only — narrow on `kind` so the union
+	// widening of `config` doesn't regress SObject behavior (CMS has neither).
+	const sortBy = config.kind === "sobject" ? config.sortBy : undefined;
+	const idField = config.kind === "sobject" ? config.idField : undefined;
+
 	const showFilterPanel = !!renderFilters && !hideFilterChrome;
 	const showActiveChips = !hideFilterChrome && filters.active.length > 0;
-	const showSortControl = !hideFilterChrome && (config.sortBy?.length ?? 0) > 0;
+	const showSortControl = !hideFilterChrome && (sortBy?.length ?? 0) > 0;
 
 	// Persistent, always-mounted live region: screen readers announce result
 	// updates (searching → count → empty → error) without an Enter keypress.
@@ -102,8 +107,8 @@ export function SourceSection({
 
 				{(showSortControl || showActiveChips) && (
 					<div className="flex flex-wrap items-center gap-2 mb-3">
-						{showSortControl && config.sortBy ? (
-							<SortControl configs={config.sortBy} sort={sort.current} onSortChange={sort.set} />
+						{showSortControl && sortBy ? (
+							<SortControl configs={sortBy} sort={sort.current} onSortChange={sort.set} />
 						) : null}
 						{showActiveChips && (
 							<ActiveFilters filters={filters.active} onRemove={filters.remove} />
@@ -139,7 +144,7 @@ export function SourceSection({
 					{showResults && (
 						<ul className="divide-y">
 							{nodes.map((node, i) => (
-								<li key={getNodeKey(node, config.idField, i)} className="py-3">
+								<li key={getNodeKey(node, idField, i)} className="py-3">
 									{renderResult(node)}
 								</li>
 							))}

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/__tests__/Search.test.tsx

@@ -0,0 +1,173 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/**
+ * Tests the error-display contract of the drop-in `<Search>` (per-source
+ * layout): a page-level failure (every queried source failed) must suppress
+ * the per-source sections, so the same error isn't repeated as a
+ * "Failed to load <source>" card under each section's heading.
+ *
+ * The banner UI itself (`__inherit__alert`) is a build-time inheritance stub
+ * that renders nothing in this feature's own test harness, so we assert the
+ * observable behavior instead: whether the per-source section headings
+ * (`<h2>Accounts</h2>`, `<h2>Contacts</h2>`) render.
+ */
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MemoryRouter } from "react-router";
+import { Search } from "../Search";
+import type { SearchConfig, SearchHandle, SourceController } from "../../types";
+import { ALL_SCOPE } from "../../types";
+
+// The component tree transitively imports the platform SDK (via the filter
+// panel's data hook). We drive `<Search>` entirely off a mocked handle and
+// never fetch, so stub the SDK module to keep vite from resolving its
+// internals under jsdom.
+vi.mock("@salesforce/platform-sdk", () => ({
+	createDataSDK: vi.fn(),
+	getCurrentApp: vi.fn(() => ({ identity: { bundleId: "" } })),
+}));
+
+// Drive the component purely off a mocked handle so we assert rendering, not
+// fetching. `useSearch` has its own integration seams elsewhere.
+const useSearchMock = vi.fn<() => SearchHandle>();
+vi.mock("../../hooks/useSearch", () => ({
+	useSearch: () => useSearchMock(),
+}));
+
+const config: SearchConfig = {
+	sources: [
+		{
+			kind: "sobject",
+			objectName: "Account",
+			key: "accounts",
+			label: "Accounts",
+			searchableFields: ["Name"],
+			displayFields: ["Name"],
+		},
+		{
+			kind: "sobject",
+			objectName: "Contact",
+			key: "contacts",
+			label: "Contacts",
+			searchableFields: ["Name"],
+			displayFields: ["Name"],
+		},
+	],
+};
+
+const noop = () => {};
+
+function makeController(
+	config: SourceController["config"],
+	error: string | null,
+): SourceController {
+	return {
+		config,
+		result: null,
+		loading: false,
+		error,
+		filters: { active: [], set: noop, remove: noop },
+		sort: { current: null, set: noop },
+		pagination: {
+			pageSize: 10,
+			pageSizeOptions: [10],
+			pageIndex: 0,
+			hasNextPage: false,
+			hasPreviousPage: false,
+			setPageSize: noop,
+			goToNextPage: noop,
+			goToPreviousPage: noop,
+		},
+	};
+}
+
+function makeHandle(overrides: Partial<SearchHandle>): SearchHandle {
+	const sources: Record<string, SourceController> = {
+		accounts: makeController(config.sources[0], null),
+		contacts: makeController(config.sources[1], null),
+	};
+	return {
+		q: "test",
+		setQ: noop,
+		scope: ALL_SCOPE,
+		setScope: noop,
+		scopeLocked: false,
+		sources,
+		inScopeSources: Object.values(sources),
+		mergedResults: [],
+		globalPagination: {
+			pageIndex: 0,
+			pageCount: 0,
+			pageSize: 10,
+			pageSizeOptions: [10],
+			hasNextPage: false,
+			hasPreviousPage: false,
+			totalCount: 0,
+			goToNextPage: noop,
+			goToPreviousPage: noop,
+			goToPage: noop,
+			setPageSize: noop,
+		},
+		loading: false,
+		error: null,
+		discoveredContentTypes: [],
+		resetAll: noop,
+		...overrides,
+	};
+}
+
+function renderSearch() {
+	return render(
+		<MemoryRouter>
+			<Search config={config} />
+		</MemoryRouter>,
+	);
+}
+
+describe("<Search> error display (per-source layout)", () => {
+	beforeEach(() => {
+		useSearchMock.mockReset();
+	});
+
+	it("suppresses the per-source sections when every source failed (page-level error set)", () => {
+		useSearchMock.mockReturnValue(
+			makeHandle({
+				error: "Search isn't enabled on this channel or site.",
+				sources: {
+					accounts: makeController(config.sources[0], "Search failed for this source."),
+					contacts: makeController(config.sources[1], "Search failed for this source."),
+				},
+			}),
+		);
+
+		renderSearch();
+
+		// No per-source section headings — the whole `<SearchResults>` tree is
+		// suppressed, so the same error can't repeat under each section.
+		expect(screen.queryByRole("heading", { name: "Accounts" })).not.toBeInTheDocument();
+		expect(screen.queryByRole("heading", { name: "Contacts" })).not.toBeInTheDocument();
+	});
+
+	it("renders the per-source sections when only one source failed (no page-level error)", () => {
+		useSearchMock.mockReturnValue(
+			makeHandle({
+				error: null,
+				sources: {
+					accounts: makeController(config.sources[0], "Search failed for this source."),
+					contacts: makeController(config.sources[1], null),
+				},
+			}),
+		);
+
+		renderSearch();
+
+		// The failed source surfaces its own card inline while the surviving
+		// source's section stays on screen — so both section headings render.
+		expect(screen.getByRole("heading", { name: "Accounts" })).toBeInTheDocument();
+		expect(screen.getByRole("heading", { name: "Contacts" })).toBeInTheDocument();
+	});
+});

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/controls/ScopeSelector.tsx

@@ -3,10 +3,14 @@
  *
  * Sits next to the search bar in the default {@link Search} layout. The
  * options are derived from the configured sources: an "All" entry plus one
- * entry per source (using each source's `label`).
+ * entry per source (using each source's `label`). When CMS content types have
+ * been discovered at runtime, one extra entry per type is appended under its
+ * CMS source — value `"<cmsKey>:<fqn>"`, label the server-provided content-type
+ * label — so a user can narrow a CMS search to a single content type.
  *
  * Selecting a non-"All" scope tells {@link useSearch} to fetch and render
- * only that source. Switching scope resets per-source pagination cursors —
+ * only that source. Selecting a `"<cmsKey>:<fqn>"` entry runs a CMS-only search
+ * for that content type. Switching scope resets per-source pagination cursors —
  * the visible result set is changing.
  */
 
@@ -17,13 +21,22 @@ import {
 	SelectTrigger,
 	SelectValue,
 } from "../../../../components/ui/select";
-import { ALL_SCOPE, type SearchConfig, type SearchScope } from "../../types";
+import { ALL_SCOPE, CMS_SCOPE_SEPARATOR, type SearchConfig, type SearchScope } from "../../types";
+import type { DiscoveredContentType } from "../../adapters/cms/contentTypeUtils";
 
 interface ScopeSelectorProps {
 	config: SearchConfig;
 	scope: SearchScope;
 	onScopeChange: (scope: SearchScope) => void;
 	allLabel?: string;
+	/**
+	 * CMS content types discovered at runtime (from
+	 * {@link SearchHandle.discoveredContentTypes}) — each with its FQN and
+	 * server-provided display `label`. Appended as per-type entries under the CMS
+	 * source once discovery completes; omit or pass `[]` before then. No-op when
+	 * the config has no CMS source.
+	 */
+	discoveredContentTypes?: DiscoveredContentType[];
 	className?: string;
 }
 
@@ -32,9 +45,21 @@ export function ScopeSelector({
 	scope,
 	onScopeChange,
 	allLabel = "All",
+	discoveredContentTypes = [],
 	className,
 }: ScopeSelectorProps) {
 	if (config.sources.length === 0) return null;
+	// Discovered content types attach to the (single) CMS source. Entries are
+	// injected only after discovery, so the dropdown starts with just the config
+	// sources and grows once the CMS channel's types are known.
+	const cmsSource = config.sources.find((s) => s.kind === "cms");
+	const hasDiscoveredTypes = !!cmsSource && discoveredContentTypes.length > 0;
+	const contentTypeEntries = hasDiscoveredTypes
+		? discoveredContentTypes.map((ct) => ({
+				value: `${cmsSource!.key}${CMS_SCOPE_SEPARATOR}${ct.fqn}`,
+				label: ct.label,
+			}))
+		: [];
 	return (
 		<div className={className}>
 			<Select value={scope} onValueChange={onScopeChange}>
@@ -43,9 +68,28 @@ export function ScopeSelector({
 				</SelectTrigger>
 				<SelectContent>
 					<SelectItem value={ALL_SCOPE}>{allLabel}</SelectItem>
-					{config.sources.map((source) => (
-						<SelectItem key={source.key} value={source.key}>
-							{source.label}
+					{config.sources.map((source) => {
+						// Once the CMS channel's content types are known, the generic CMS
+						// source entry (e.g. "Content") is redundant — its per-type entries
+						// (appended below) cover the same source at finer granularity, so
+						// drop the catch-all to avoid a duplicate-looking scope option.
+						// EXCEPTION: keep it while it is the current scope. Discovery can
+						// complete AFTER the user has selected the generic CMS scope; if we
+						// removed the only matching item, the controlled Radix select would
+						// hold a value no item represents and render blank — leaving AT
+						// users unable to identify the active scope (WCAG 4.1.2).
+						if (source.kind === "cms" && hasDiscoveredTypes && scope !== source.key) {
+							return null;
+						}
+						return (
+							<SelectItem key={source.key} value={source.key}>
+								{source.label}
+							</SelectItem>
+						);
+					})}
+					{contentTypeEntries.map((entry) => (
+						<SelectItem key={entry.value} value={entry.value}>
+							{entry.label}
 						</SelectItem>
 					))}
 				</SelectContent>

package/dist/force-app/main/default/uiBundles/propertymanagementapp/src/features/search/components/results/CmsResultRow.tsx

@@ -0,0 +1,101 @@
+/**
+ * Per-node row for a CMS source. Used by both the per-source section
+ * (`SearchResults`) and the merged grid (`MergedSearchResults`) via the shared
+ * `resolveResultRenderer` (UI-owned) whenever `source.kind === "cms"`.
+ *
+ * Renders a title, a published-date subtitle, an optional content-type badge,
+ * and a react-router `<Link>` when a route can be built.
+ *
+ * Link target:
+ *   - `source.routePattern` tokens: `:id` (managedContentId), `:key`
+ *     (managedContentKey), `:contentType` (contentType).
+ *   - falls back to `/content/:contentType/:id` when no `routePattern` is
+ *     configured.
+ *
+ * The content-type label is rendered only when its FQN passes `isValidCmsFqn`.
+ */
+
+import type { ReactNode } from "react";
+import { Link } from "react-router";
+import type { CmsSourceConfig, CmsSearchItem } from "../../adapters/cms/types";
+import { formatContentTypeLabel, isValidCmsFqn } from "../../adapters/cms/contentTypeUtils";
+
+/** Formats an ISO date string for display; echoes the raw string on failure. */
+function formatPublishedDate(dateStr: string): string {
+	const date = new Date(dateStr);
+	if (isNaN(date.getTime())) return dateStr;
+	return date.toLocaleDateString(undefined, {
+		year: "numeric",
+		month: "short",
+		day: "numeric",
+	});
+}
+
+/**
+ * Substitutes `:id` / `:key` / `:contentType` tokens in a route pattern with
+ * the item's values (URL-encoded). Returns `null` if a required token has no
+ * value.
+ */
+function resolveRoute(pattern: string, item: CmsSearchItem): string | null {
+	const tokens: Record<string, string | undefined> = {
+		id: item.managedContentId,
+		key: item.managedContentKey,
+		contentType: item.contentType,
+	};
+	let failed = false;
+	const out = pattern.replace(/:([A-Za-z_][A-Za-z0-9_]*)/g, (_match, token: string) => {
+		const value = tokens[token];
+		if (value == null || value === "") {
+			failed = true;
+			return "";
+		}
+		return encodeURIComponent(value);
+	});
+	return failed ? null : out;
+}
+
+interface CmsResultRowProps {
+	node: unknown;
+	source: CmsSourceConfig;
+}
+
+export function CmsResultRow({ node, source }: CmsResultRowProps) {
+	const item = node as CmsSearchItem;
+
+	const publishedDate = item.managedContentChannelDeliveryDetails?.[0]?.publishedDate;
+	const showType = typeof item.contentType === "string" && isValidCmsFqn(item.contentType);
+
+	const subtitleParts: string[] = [];
+	if (showType) subtitleParts.push(formatContentTypeLabel(item.contentType));
+	if (publishedDate) subtitleParts.push(`Published: ${formatPublishedDate(publishedDate)}`);
+
+	const content: ReactNode = (
+		<>
+			<span className="font-medium">{item.title ?? "—"}</span>
+			{item.highlightedSnippet && (
+				<p className="text-sm text-muted-foreground">{item.highlightedSnippet}</p>
+			)}
+			{subtitleParts.length > 0 && (
+				<p className="text-sm text-muted-foreground">{subtitleParts.join(" · ")}</p>
+			)}
+		</>
+	);
+
+	// Only render a drill-down link when the source explicitly configures a
+	// routePattern. Without one, content rows render as plain (non-linked) rows
+	// so they never navigate to an unbuilt detail route.
+	const href = source.routePattern ? resolveRoute(source.routePattern, item) : null;
+	if (href) {
+		return (
+			<Link
+				to={href}
+				className="block hover:bg-accent rounded-md px-3 -mx-3 py-1 transition-colors"
+				aria-label={`View content: ${item.title}`}
+			>
+				{content}
+			</Link>
+		);
+	}
+
+	return <div className="px-3 -mx-3 py-1">{content}</div>;
+}