@salesforce/templates 66.13.4 → 66.13.6

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/package.json

@@ -18,8 +18,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/platform-sdk": "^10.12.2",
-    "@salesforce/ui-bundle": "^10.12.2",
+    "@salesforce/platform-sdk": "^11.53.1",
+    "@salesforce/ui-bundle": "^11.53.1",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -29,7 +29,7 @@
     "react": "^19.2.0",
     "react-day-picker": "^9.14.0",
     "react-dom": "^19.2.0",
-    "react-router": "^7.10.1",
+    "react-router": "^8.3.0",
     "shadcn": "^3.8.5",
     "sonner": "^1.7.0",
     "tailwind-merge": "^3.5.0",
@@ -46,7 +46,8 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-ui-bundle": "^10.12.2",
+    "@salesforce/graphiti": "^11.53.1",
+    "@salesforce/vite-plugin-ui-bundle": "^11.53.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",
@@ -54,7 +55,7 @@
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
-    "@vitest/ui": "^4.0.17",
+    "@vitest/ui": "^4.1.0",
     "eslint": "^9.39.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^7.0.1",
@@ -68,9 +69,10 @@
     "typescript-eslint": "^8.46.4",
     "vite": "^7.2.4",
     "vite-plugin-graphql-codegen": "^3.6.3",
-    "vitest": "^4.0.17"
+    "vitest": "^4.1.0"
   },
   "overrides": {
-    "lodash": "^4.18.1"
+    "lodash": "^4.18.1",
+    "undici": "^7.28.0"
   }
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/scripts/get-graphql-schema.mjs

@@ -15,13 +15,16 @@ import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
 import { pruneSchema } from '@graphql-tools/utils';
 
 const DEFAULT_SCHEMA_PATH = '../../../../../schema.graphql';
+const TARGET_ORG = process.env.SF_TARGET_ORG || undefined;
 
 async function executeSalesforceGraphQLQuery(query, variables, operationName) {
-  const {
-    rawInstanceUrl: instanceUrl,
-    apiVersion,
-    accessToken,
-  } = await getOrgInfo();
+  const orgInfo = await getOrgInfo(TARGET_ORG);
+  if (!orgInfo) {
+    throw new Error(
+      'Could not resolve a Salesforce org. Set SF_TARGET_ORG or a default org.'
+    );
+  }
+  const { rawInstanceUrl: instanceUrl, apiVersion, accessToken } = orgInfo;
 
   const targetUrl = `${instanceUrl}/services/data/v${apiVersion}/graphql`;
 

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/components/SocialLogin.tsx

@@ -0,0 +1,141 @@
+import { useEffect, useState } from "react";
+import { useSearchParams } from "react-router";
+import { createDataSDK } from "@salesforce/platform-sdk";
+import { getStartUrl } from "../authHelpers";
+
+/**
+ * Social Login (IDP) Component for React Experience Cloud Sites.
+ *
+ * Replicates the OOTB community_login/socialLogin LWC behavior which does not
+ * render on React (Site Container) sites due to a platform restriction
+ * (isSiteContainer check in node-loginsettings.ftl).
+ *
+ * Behavior:
+ * - On mount, fetches configured Auth Providers + SAML Providers
+ * - If only one IDP is configured and username/password is disabled, auto-redirects
+ * - Renders a button per provider with icon (Auth Providers) or without (SAML)
+ * - On click, redirects to the SSO URL to initiate the OAuth/SAML flow
+ *
+ * Backend: UIBundleSocialLoginConfig.cls (Apex REST endpoint)
+ * Uses: Auth.AuthConfiguration API
+ */
+
+interface AuthProviderInfo {
+	developerName: string;
+	friendlyName: string;
+	iconUrl: string | null;
+	ssoUrl: string;
+}
+
+interface SamlProviderInfo {
+	id: string;
+	masterLabel: string;
+	ssoUrl: string;
+}
+
+interface SocialLoginConfigResponse {
+	authProviders: AuthProviderInfo[];
+	samlProviders: SamlProviderInfo[];
+	autoRedirectUrl: string | null;
+}
+
+interface SocialLoginProps {
+	/** Whether to show header text above buttons. Default: true */
+	showHeader?: boolean;
+	/** Header text. Default: "Or log in using:" */
+	headerText?: string;
+}
+
+async function fetchSocialLoginConfig(startUrl: string): Promise<SocialLoginConfigResponse | null> {
+	try {
+		const sdk = await createDataSDK();
+		const response = await sdk.fetch!(
+			`/services/apexrest/auth/social-login-config?startURL=${encodeURIComponent(startUrl)}`,
+			{
+				method: "GET",
+				headers: { Accept: "application/json" },
+			},
+		);
+
+		if (!response.ok) {
+			return null;
+		}
+
+		return await response.json();
+	} catch {
+		return null;
+	}
+}
+
+export function SocialLogin({
+	showHeader = true,
+	headerText = "Or log in using:",
+}: SocialLoginProps) {
+	const [searchParams] = useSearchParams();
+	const startUrl = getStartUrl(searchParams);
+
+	const [authProviders, setAuthProviders] = useState<AuthProviderInfo[]>([]);
+	const [samlProviders, setSamlProviders] = useState<SamlProviderInfo[]>([]);
+
+	useEffect(() => {
+		fetchSocialLoginConfig(startUrl).then((config) => {
+			if (!config) return;
+
+			if (config.autoRedirectUrl) {
+				window.location.assign(config.autoRedirectUrl);
+				return;
+			}
+
+			setAuthProviders(config.authProviders || []);
+			setSamlProviders(config.samlProviders || []);
+		});
+	}, [startUrl]);
+
+	const hasProviders = authProviders.length > 0 || samlProviders.length > 0;
+
+	if (!hasProviders) return null;
+
+	return (
+		<div className="mt-6">
+			{showHeader && (
+				<div className="relative">
+					<div className="absolute inset-0 flex items-center">
+						<span className="w-full border-t" />
+					</div>
+					<div className="relative flex justify-center text-xs uppercase">
+						<span className="bg-background px-2 text-muted-foreground">{headerText}</span>
+					</div>
+				</div>
+			)}
+
+			<div className="mt-4 grid gap-2">
+				{authProviders.map((provider) => (
+					<button
+						key={provider.developerName}
+						type="button"
+						onClick={() => window.location.assign(provider.ssoUrl)}
+						aria-label={`Sign in with ${provider.friendlyName}`}
+						className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+					>
+						{provider.iconUrl && (
+							<img src={provider.iconUrl} alt="" className="h-4 w-4" aria-hidden="true" />
+						)}
+						<span>{provider.friendlyName}</span>
+					</button>
+				))}
+
+				{samlProviders.map((provider) => (
+					<button
+						key={provider.id}
+						type="button"
+						onClick={() => window.location.assign(provider.ssoUrl)}
+						aria-label={`Sign in with ${provider.masterLabel}`}
+						className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-input bg-background px-4 py-2 text-sm font-medium shadow-sm transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+					>
+						<span>{provider.masterLabel}</span>
+					</button>
+				))}
+			</div>
+		</div>
+	);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/authentication/pages/Login.tsx

@@ -8,6 +8,7 @@ import { createDataSDK } from "@salesforce/platform-sdk";
 import { ROUTES } from "../authenticationConfig";
 import { emailSchema, getStartUrl, type AuthResponse } from "../authHelpers";
 import { ApiError, handleApiResponse } from "../utils/helpers";
+import { SocialLogin } from "../components/SocialLogin";
 
 const loginSchema = z.object({
 	email: emailSchema,
@@ -106,6 +107,7 @@ export default function Login() {
 						)}
 					</form.AppField>
 				</AuthForm>
+				<SocialLogin />
 			</form.AppForm>
 		</CenteredPageLayout>
 	);

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/search/api/distinctValuesService.ts

@@ -0,0 +1,84 @@
+/**
+ * Fetches distinct values for a picklist field via the uiapi aggregate
+ * `groupBy` query.
+ *
+ * Used by the auto-render pathway when a picklist filter does not declare
+ * inline `options`. Each call hits the GraphQL endpoint once and returns the
+ * sorted set of distinct values plus their display labels.
+ */
+
+import { createDataSDK } from "@salesforce/platform-sdk";
+
+export interface PicklistOption {
+	value: string;
+	label: string;
+}
+
+const KEY_PATTERN = /^[A-Za-z_][A-Za-z0-9_]*$/;
+
+function assertValidIdentifier(name: string, kind: string): void {
+	if (!KEY_PATTERN.test(name)) {
+		throw new Error(
+			`Invalid ${kind} "${name}". Must match /^[A-Za-z_][A-Za-z0-9_]*$/ to be a valid GraphQL identifier.`,
+		);
+	}
+}
+
+/**
+ * Builds and executes a `uiapi.aggregate.<objectName>(groupBy: { <field>: { group: true } })`
+ * query and extracts the distinct values.
+ */
+export async function fetchDistinctValues(
+	objectName: string,
+	fieldName: string,
+): Promise<PicklistOption[]> {
+	assertValidIdentifier(objectName, "objectName");
+	assertValidIdentifier(fieldName, "fieldName");
+
+	const document = `query DistinctValues {
+		uiapi {
+			aggregate {
+				${objectName}(groupBy: { ${fieldName}: { group: true } }) {
+					edges {
+						node {
+							aggregate @optional {
+								${fieldName} @optional {
+									value
+									displayValue
+									label
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}`;
+
+	const data = await createDataSDK();
+	const response = await data.graphql!.query<unknown>({ query: document });
+
+	if (response.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	const root = response.data as Record<string, unknown> | undefined;
+	const aggregate = (root?.uiapi as Record<string, unknown> | undefined)?.aggregate as
+		| Record<string, unknown>
+		| undefined;
+	const objectAgg = aggregate?.[objectName] as
+		| { edges?: Array<{ node?: { aggregate?: Record<string, unknown> } }> }
+		| undefined;
+	const edges = objectAgg?.edges ?? [];
+
+	return edges
+		.map((edge) => {
+			const field = edge?.node?.aggregate?.[fieldName] as
+				| { value?: string | null; displayValue?: string | null; label?: string | null }
+				| undefined;
+			const value = field?.value;
+			if (value == null || value === "") return null;
+			return { value, label: field?.label ?? field?.displayValue ?? value };
+		})
+		.filter((opt): opt is PicklistOption => opt !== null);
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/search/api/searchService.ts

@@ -0,0 +1,71 @@
+/**
+ * Executes a search request and parses results into a per-source map.
+ *
+ * Today there's only one adapter — SObjects via the platform-sdk uiapi GraphQL
+ * bridge. Future adapters (CMS, REST, etc.) can run alongside this one and
+ * have their results merged into the same `Record<sourceKey, SourceResult>`
+ * by the hook.
+ */
+
+import { createDataSDK } from "@salesforce/platform-sdk";
+import { buildSearchQuery, type SourceRequest } from "../queryBuilder";
+import type { SourceResult } from "../types";
+
+interface RawSourceResult {
+	edges?: Array<{ node?: unknown }> | null;
+	pageInfo?: {
+		hasNextPage?: boolean | null;
+		hasPreviousPage?: boolean | null;
+		startCursor?: string | null;
+		endCursor?: string | null;
+	} | null;
+	totalCount?: number | null;
+}
+
+/**
+ * Runs a single multi-aliased GraphQL request against uiapi.query.
+ *
+ * Returns a plain object keyed by source.key. A source whose alias is missing
+ * from the response (e.g. due to a partial GraphQL error) is omitted; the
+ * caller can detect this by `result[sourceKey] == null`.
+ */
+export async function runSearch(requests: SourceRequest[]): Promise<Record<string, SourceResult>> {
+	const { document, variables } = buildSearchQuery(requests);
+
+	const data = await createDataSDK();
+	const response = await data.graphql!.query<unknown, Record<string, unknown>>({
+		query: document,
+		variables,
+	});
+
+	if (response.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	const root = response.data as Record<string, unknown> | undefined;
+	const queryRoot = (root?.uiapi as Record<string, unknown> | undefined)?.query as
+		| Record<string, RawSourceResult | null | undefined>
+		| undefined;
+
+	const out: Record<string, SourceResult> = {};
+	for (const request of requests) {
+		const raw = queryRoot?.[request.source.key];
+		if (raw == null) continue;
+		const nodes = (raw.edges ?? [])
+			.map((edge) => edge?.node)
+			.filter((node): node is unknown => node != null);
+		out[request.source.key] = {
+			nodes,
+			pageInfo: raw.pageInfo
+				? {
+						hasNextPage: raw.pageInfo.hasNextPage ?? false,
+						hasPreviousPage: raw.pageInfo.hasPreviousPage ?? false,
+						startCursor: raw.pageInfo.startCursor ?? null,
+						endCursor: raw.pageInfo.endCursor ?? null,
+					}
+				: null,
+			totalCount: raw.totalCount ?? null,
+		};
+	}
+	return out;
+}

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/_f_/search/components/MergedSearchResults.tsx

@@ -0,0 +1,277 @@
+/**
+ * Merged results layout — a single combined grid across every in-scope source,
+ * driven by one global pager over the cumulative result set.
+ *
+ * This is the counterpart to {@link SearchResults} (which renders one stacked
+ * section per source). Use it when you want a unified "search everything" grid:
+ * heterogeneous cards laid out together, one shared pagination control, and a
+ * single results count — the layout the drop-in `<Search>` renders when the
+ * config sets `pagination.mode: "merged"`, and the same shape most apps
+ * hand-build on top of `useSearch`.
+ *
+ * It reads three aggregate accessors off the {@link SearchHandle}
+ * (`mergedResults`, `globalPagination`, `inScopeSources`), so it honours the
+ * config's `pagination.mode` / `mergeOrder` automatically. For a true combined
+ * grid, pair it with `pagination.mode: "merged"` (see the feature README, §9).
+ *
+ * Layout, top to bottom:
+ *   - **Single-source filter chrome** — when the scope is narrowed to one
+ *     source (selected or `lockedScope`), that source's filter panel + sort +
+ *     active-filter chips render here. Under "All", per-source filters can't be
+ *     combined across heterogeneous objects, so this row is omitted.
+ *   - **Results count** — the cumulative in-scope total, on its own row directly
+ *     above the grid, in every scope. Hidden when there are no results.
+ *   - **The grid** — one card per `mergedResults` item, rendered via the
+ *     per-source `renderResult[sourceKey]` callback. In a mixed grid (2+ sources
+ *     in scope) each card is topped with an auto source badge — the source's
+ *     `labelSingular` (falling back to `label`), colored from a palette by its
+ *     config order — so heterogeneous results stay self-identifying with no
+ *     configuration. Skeletons while loading; an empty-state message when there
+ *     are none.
+ *   - **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";
+import { ActiveFilters } from "./filters/ActiveFilters";
+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 { ALL_SCOPE, type SearchHandle, type SourceController } from "../types";
+
+type ResultRenderer = ((node: unknown) => ReactNode) | false;
+
+export interface MergedSearchResultsProps {
+	handle: SearchHandle;
+	/**
+	 * Per source key: how to render one node in the merged grid. Falls back to
+	 * the built-in {@link DefaultResultRow} for any source without an entry.
+	 * Pass `false` to skip a source's cards entirely.
+	 */
+	renderResult?: Record<string, ResultRenderer>;
+	/** Message shown when there are no results. Defaults to "No results found." */
+	emptyMessage?: string;
+	/** Number of skeleton placeholders to show while loading. Defaults to `pageSize`. */
+	skeletonCount?: number;
+	/** Extra classes on the grid container. Defaults to a responsive 1/2/3-column grid. */
+	gridClassName?: string;
+	/** Extra classes on the outer wrapper. */
+	className?: string;
+}
+
+const DEFAULT_GRID_CLASS = "grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3";
+
+/**
+ * Palette for the auto source badges in a mixed grid. A source's color is its
+ * index in the config's `sources` array, wrapped around the palette — so badges
+ * stay stable and distinct without any per-source configuration. Add more
+ * entries here if you routinely mix more source types than there are colors.
+ */
+const BADGE_PALETTE = [
+	"bg-blue-100 text-blue-700",
+	"bg-amber-100 text-amber-700",
+	"bg-purple-100 text-purple-700",
+	"bg-pink-100 text-pink-700",
+	"bg-emerald-100 text-emerald-700",
+	"bg-sky-100 text-sky-700",
+] as const;
+
+export function MergedSearchResults({
+	handle,
+	renderResult,
+	emptyMessage,
+	skeletonCount,
+	gridClassName = DEFAULT_GRID_CLASS,
+	className,
+}: MergedSearchResultsProps) {
+	const { globalPagination: page, mergedResults, loading, error } = handle;
+
+	// A single source is in scope when the scope is narrowed (selected from the
+	// dropdown) or locked (`lockedScope` / restrictTo). Its filter chrome can
+	// render meaningfully; under "All" it can't (heterogeneous sources).
+	const singleSourceInScope = handle.scope !== ALL_SCOPE;
+	const soleController = singleSourceInScope ? handle.inScopeSources[0] : undefined;
+	// Per-card source badges only make sense when the grid is genuinely mixed —
+	// a single-source grid (narrowed or locked) has one type throughout.
+	const showSourceBadges = !singleSourceInScope;
+	// Assign each source a stable badge color by its declaration order. Badges
+	// only show in "All" scope, where `inScopeSources` is every source in config
+	// order, so the index here is the source's config position.
+	const badgeColorByKey: Record<string, string> = {};
+	handle.inScopeSources.forEach((controller, i) => {
+		badgeColorByKey[controller.config.key] = BADGE_PALETTE[i % BADGE_PALETTE.length];
+	});
+
+	const skeletons = skeletonCount ?? page.pageSize;
+
+	// Persistent, always-mounted live region: screen readers announce result
+	// updates (searching → count → empty → error) without an Enter keypress.
+	const liveMessage = loading
+		? "Searching…"
+		: error
+			? "Search failed."
+			: mergedResults.length === 0
+				? (emptyMessage ?? "No results found.")
+				: `${page.totalCount} result${page.totalCount === 1 ? "" : "s"}`;
+
+	return (
+		<div className={`space-y-6 ${className ?? ""}`}>
+			<p className="sr-only" role="status" aria-live="polite">
+				{liveMessage}
+			</p>
+
+			{soleController && <SingleSourceChrome controller={soleController} />}
+
+			{error && (
+				<Alert variant="destructive" role="alert">
+					<AlertCircle />
+					<AlertTitle>Search failed</AlertTitle>
+					<AlertDescription>{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 && (
+				<p className="text-sm text-muted-foreground">
+					{page.totalCount} result{page.totalCount === 1 ? "" : "s"}
+				</p>
+			)}
+
+			{loading ? (
+				<div className={gridClassName}>
+					{Array.from({ length: Math.min(skeletons, 6) }, (_, i) => (
+						<Skeleton key={i} className="h-48 w-full rounded-lg" />
+					))}
+				</div>
+			) : mergedResults.length === 0 ? (
+				<p className="py-12 text-center text-sm text-muted-foreground">
+					{emptyMessage ?? "No results found."}
+				</p>
+			) : (
+				<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;
+						const badge =
+							showSourceBadges && source ? (
+								<SourceBadge
+									label={source.labelSingular ?? source.label}
+									colorClass={badgeColorByKey[sourceKey]}
+								/>
+							) : null;
+						return (
+							<li
+								key={getItemKey(sourceKey, node, i)}
+								className="flex flex-col gap-1.5 [&>:last-child]:min-h-0 [&>:last-child]:flex-1"
+							>
+								{badge}
+								{rendered}
+							</li>
+						);
+					})}
+				</ul>
+			)}
+
+			{page.totalCount > 0 && (
+				<PaginationControls
+					pageIndex={page.pageIndex}
+					pageCount={page.pageCount}
+					hasNextPage={page.hasNextPage}
+					hasPreviousPage={page.hasPreviousPage}
+					pageSize={page.pageSize}
+					pageSizeOptions={page.pageSizeOptions}
+					onNextPage={page.goToNextPage}
+					onPreviousPage={page.goToPreviousPage}
+					onGoToPage={page.goToPage}
+					onPageSizeChange={page.setPageSize}
+					disabled={loading || !!error}
+				/>
+			)}
+		</div>
+	);
+}
+
+function getItemKey(sourceKey: string, node: unknown, fallback: number): string {
+	const id = node && typeof node === "object" ? (node as { Id?: unknown }).Id : undefined;
+	return typeof id === "string" ? `${sourceKey}:${id}` : `${sourceKey}:${fallback}`;
+}
+
+interface SourceBadgeProps {
+	label: string;
+	colorClass: string;
+}
+
+/**
+ * Auto source badge shown above each card in a mixed grid — the source's
+ * `labelSingular` (falling back to `label`), colored from {@link BADGE_PALETTE}
+ * by its config order. Identifies which object type a heterogeneous card came
+ * from with no per-app config.
+ */
+function SourceBadge({ label, colorClass }: SourceBadgeProps) {
+	return (
+		<span className={`w-fit rounded-full px-2.5 py-0.5 text-xs font-medium ${colorClass}`}>
+			{label}
+		</span>
+	);
+}
+
+interface SingleSourceChromeProps {
+	controller: SourceController;
+}
+
+/**
+ * Filter panel + sort + active-filter chips for the one source in scope. Shown
+ * whenever the search is narrowed to a single object (selected or locked).
+ * Hidden under "All", where heterogeneous per-source filters can't be combined.
+ */
+function SingleSourceChrome({ controller }: SingleSourceChromeProps) {
+	const { config: source, filters, sort } = controller;
+	const showFilterPanel = (source.filterBy?.length ?? 0) > 0;
+	const showSortControl = (source.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 && (
+				<FilterProvider
+					filters={filters.active}
+					onFilterChange={filters.set}
+					onFilterRemove={filters.remove}
+					onReset={() => filters.active.forEach((f) => filters.remove(f.field))}
+				>
+					<div className="rounded-md border p-3 space-y-3">
+						<div className="flex items-center justify-between">
+							<h2 className="text-sm font-semibold">Filters</h2>
+							<FilterResetButton size="sm" />
+						</div>
+						<div className="grid grid-cols-1 gap-3 sm:grid-cols-2 lg:grid-cols-3">
+							<DefaultFilterPanel source={source} />
+						</div>
+					</div>
+				</FilterProvider>
+			)}
+
+			{(showSortControl || showActiveChips) && (
+				<div className="flex flex-wrap items-center gap-2">
+					{showSortControl && source.sortBy && (
+						<SortControl configs={source.sortBy} sort={sort.current} onSortChange={sort.set} />
+					)}
+					{showActiveChips && <ActiveFilters filters={filters.active} onRemove={filters.remove} />}
+				</div>
+			)}
+		</div>
+	);
+}