@salesforce/ui-bundle-template-feature-react-search 11.3.0

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/types.ts

@@ -0,0 +1,169 @@
+/**
+ * Configuration types for unified (multi-source) search.
+ *
+ * The application developer declares a SearchConfig with one entry per
+ * searchable backend. Today every source is an SObject queried via the uiapi
+ * GraphQL bridge; future adapters (CMS, REST, etc.) can plug in by introducing
+ * a new `kind` and a matching runtime adapter without changing any consumer.
+ *
+ * The library handles query construction, filter/sort/pagination state, URL
+ * sync, and result fan-out. The application owns rendering and routing.
+ */
+
+import type { FilterFieldConfig, ActiveFilterValue } from "./utils/filterUtils";
+import type { SortFieldConfig, SortState } from "./utils/sortUtils";
+
+/**
+ * A single field to include in the GraphQL selection set of an SObject source.
+ *
+ * - `"Name"` (string shorthand): emits `Name @optional { value displayValue }`.
+ * - `{ name, subfields }`: emits a nested selection (relationship traversal).
+ * - `{ name, raw: true }`: emits the bare field name (e.g. for Id-like fields
+ *   that are not wrapped in `{ value displayValue }`).
+ *
+ * The configured `idField` (default: "Id") is added automatically; do not list
+ * it explicitly.
+ */
+export type DisplayField =
+	| string
+	| { name: string; raw: true }
+	| { name: string; subfields: DisplayField[] };
+
+/** Configuration for one SObject source in a search experience. */
+export interface SObjectSourceConfig {
+	/** Discriminator — selects the runtime adapter. */
+	kind: "sobject";
+	/**
+	 * Stable identifier. Used as the GraphQL alias, the URL namespace, and the
+	 * result-map key. Must match `/^[A-Za-z_][A-Za-z0-9_]*$/`.
+	 */
+	key: string;
+	/** GraphQL object name (e.g. "Account", "Contact"). */
+	objectName: string;
+	/** Display label used in section headers. */
+	label: string;
+	/** Field name that uniquely identifies a record. Defaults to "Id". */
+	idField?: string;
+	/**
+	 * URL pattern used by the default renderer to build a result link.
+	 *
+	 * Tokens of the form `:fieldName` are replaced with the corresponding
+	 * field's value at render time (e.g. `:id` resolves to the record's
+	 * `idField` value, `:Name` resolves to the Name field's `value`).
+	 *
+	 * Example: `"/accounts/:id"` produces `<Link to="/accounts/001xx0000003DGb">`.
+	 *
+	 * Optional — when omitted, the default renderer emits non-clickable rows.
+	 */
+	routePattern?: string;
+	/**
+	 * Fields the global `q` term should match against.
+	 * Built into an `or` of `like %q%`. Supports dot-notation for relationship
+	 * fields (e.g. "Owner.Name").
+	 */
+	searchableFields: string[];
+	/**
+	 * Fields to include in the GraphQL selection set. The id field is added
+	 * automatically; do not list it.
+	 */
+	displayFields: DisplayField[];
+	/** Optional structured filters surfaced in the per-source filter panel. */
+	filterFields?: FilterFieldConfig[];
+	/** Optional sort options surfaced in the per-source sort dropdown. */
+	sortFields?: SortFieldConfig[];
+	/** Initial sort applied when no URL sort is present. */
+	defaultSort?: SortState;
+	/** Default page size for this source. */
+	pageSize?: number;
+	/** Allowed page sizes. */
+	validPageSizes?: number[];
+	/**
+	 * GraphQL type name for the `where` variable.
+	 * Defaults to `${objectName}_Filter` — override only for non-conventional schemas.
+	 */
+	whereTypeName?: string;
+	/** GraphQL type name for the `orderBy` variable. Defaults to `${objectName}_OrderBy`. */
+	orderByTypeName?: string;
+}
+
+/** Top-level config passed to {@link useSearch}. */
+export interface SearchConfig {
+	sources: SObjectSourceConfig[];
+}
+
+// ---------------------------------------------------------------------------
+// Runtime types
+// ---------------------------------------------------------------------------
+
+export interface SourcePageInfo {
+	hasNextPage: boolean;
+	hasPreviousPage: boolean;
+	endCursor: string | null;
+	startCursor: string | null;
+}
+
+/**
+ * Per-source result. Nodes are typed as `unknown` at the library boundary —
+ * the application narrows them in its `renderResult` callback (typically by
+ * casting to a codegen-generated node type).
+ */
+export interface SourceResult {
+	nodes: unknown[];
+	pageInfo: SourcePageInfo | null;
+	totalCount: number | null;
+}
+
+export interface SourceController {
+	config: SObjectSourceConfig;
+	result: SourceResult | null;
+	loading: boolean;
+	error: string | null;
+	filters: {
+		active: ActiveFilterValue[];
+		set: (field: string, value: ActiveFilterValue | undefined) => void;
+		remove: (field: string) => void;
+	};
+	sort: {
+		current: SortState | null;
+		set: (sort: SortState | null) => void;
+	};
+	pagination: {
+		pageSize: number;
+		pageIndex: number;
+		hasNextPage: boolean;
+		hasPreviousPage: boolean;
+		setPageSize: (size: number) => void;
+		goToNextPage: () => void;
+		goToPreviousPage: () => void;
+	};
+}
+
+/**
+ * The currently-selected search scope.
+ *
+ * - `"all"`: every source in the config is queried and rendered.
+ * - any source `key`: only that source is queried and rendered. Other sources
+ *   skip both the network request and the UI section.
+ */
+export type SearchScope = "all" | string;
+
+export const ALL_SCOPE = "all" as const;
+
+export interface SearchHandle {
+	q: string;
+	setQ: (q: string) => void;
+	scope: SearchScope;
+	setScope: (scope: SearchScope) => void;
+	/**
+	 * True when the caller passed `lockedScope` to `useSearch`. Consumers
+	 * should hide the scope dropdown and read-only display the locked source.
+	 */
+	scopeLocked: boolean;
+	sources: Record<string, SourceController>;
+	loading: boolean;
+	error: string | null;
+	resetAll: () => void;
+}
+
+/** Type alias for a render callback per source key. */
+export type RenderResultFn = (sourceKey: string, node: unknown) => React.ReactNode;

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/utils/debounce.ts

@@ -0,0 +1,17 @@
+/** Default debounce delay for keystroke-driven inputs. */
+export const FILTER_DEBOUNCE_MS = 300;
+
+/**
+ * Creates a debounced version of `fn`. Each call resets the internal timer;
+ * `fn` runs only after the timer expires without being reset.
+ */
+export function debounce<T extends (...args: any[]) => void>(
+	fn: T,
+	ms: number,
+): (...args: Parameters<T>) => void {
+	let timer: ReturnType<typeof setTimeout> | undefined;
+	return (...args: Parameters<T>) => {
+		clearTimeout(timer);
+		timer = setTimeout(() => fn(...args), ms);
+	};
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/utils/fieldUtils.ts

@@ -0,0 +1,14 @@
+/**
+ * Helpers for reading values out of uiapi GraphQL response nodes.
+ *
+ * Nodes typically come back wrapped as `{ value, displayValue }`. `fieldValue`
+ * picks the user-facing string (preferring displayValue) or returns null.
+ */
+
+export function fieldValue(
+	field: { displayValue?: string | null; value?: unknown } | null | undefined,
+): string | null {
+	if (field?.displayValue != null) return field.displayValue;
+	if (field?.value != null) return String(field.value);
+	return null;
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/utils/filterUtils.ts

@@ -0,0 +1,272 @@
+/**
+ * Filter primitives for search.
+ *
+ * Two responsibilities:
+ *   1. Build a GraphQL `where` clause from a list of active filter values.
+ *   2. Serialize/deserialize active filters to/from URLSearchParams under a
+ *      per-source namespace prefix (so multiple sources can coexist on one URL).
+ *
+ * The URL helpers are namespaced: each source declares its key, and filter
+ * params are written as `s.<key>.f.<field>=...`. Sort uses
+ * `s.<key>.sort=<field>&s.<key>.dir=ASC|DESC`. Page size and page index use
+ * `s.<key>.ps=<size>` and `s.<key>.page=<n>`.
+ *
+ * The global search term `q=...` is **not** scoped to a source — it's broadcast
+ * to every source's `searchableFields` by the query builder.
+ */
+
+import type { SortState } from "./sortUtils";
+
+export type FilterFieldType =
+	| "text"
+	| "picklist"
+	| "numeric"
+	| "boolean"
+	| "date"
+	| "daterange"
+	| "datetime"
+	| "datetimerange"
+	| "multipicklist";
+
+export type FilterFieldConfig<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+	type: FilterFieldType;
+	placeholder?: string;
+	/** Required for picklist / multipicklist. */
+	options?: Array<{ value: string; label: string }>;
+	helpText?: string;
+};
+
+export type ActiveFilterValue<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+	type: FilterFieldType;
+	value?: string;
+	min?: string;
+	max?: string;
+};
+
+// ---------------------------------------------------------------------------
+// URL serialization (per-source namespace)
+// ---------------------------------------------------------------------------
+
+const SOURCE_PREFIX = "s.";
+const FILTER_INFIX = ".f.";
+const SORT_SUFFIX = ".sort";
+const DIR_SUFFIX = ".dir";
+const PAGE_SIZE_SUFFIX = ".ps";
+const PAGE_SUFFIX = ".page";
+
+/** Global search term key (not source-scoped). */
+export const GLOBAL_QUERY_KEY = "q";
+
+function filterKey(sourceKey: string, field: string, suffix?: string) {
+	return `${SOURCE_PREFIX}${sourceKey}${FILTER_INFIX}${field}${suffix ? `.${suffix}` : ""}`;
+}
+
+/**
+ * The source's own default sort / page size. When a source's current state
+ * matches these, the corresponding URL params are omitted so the query string
+ * only ever reflects an *explicit* user choice — resetting filters or returning
+ * a source to its defaults yields a clean URL instead of one littered with the
+ * defaults. The read path falls back to these same defaults when the params are
+ * absent, so the round-trip is lossless.
+ */
+export interface SourceParamDefaults {
+	sort?: SortState | null;
+	pageSize?: number;
+}
+
+function sortMatchesDefault(sort: SortState, defaultSort: SortState | null | undefined): boolean {
+	return (
+		!!defaultSort && sort.field === defaultSort.field && sort.direction === defaultSort.direction
+	);
+}
+
+export function writeSourceParams(
+	params: URLSearchParams,
+	sourceKey: string,
+	filters: ActiveFilterValue[],
+	sort: SortState | null,
+	pageSize?: number,
+	pageIndex?: number,
+	defaults?: SourceParamDefaults,
+): void {
+	for (const filter of filters) {
+		if (filter.value !== undefined && filter.value !== "") {
+			params.set(filterKey(sourceKey, filter.field), filter.value);
+		}
+		if (filter.min !== undefined && filter.min !== "") {
+			params.set(filterKey(sourceKey, filter.field, "min"), filter.min);
+		}
+		if (filter.max !== undefined && filter.max !== "") {
+			params.set(filterKey(sourceKey, filter.field, "max"), filter.max);
+		}
+	}
+	// Only serialize sort when it differs from the source default — otherwise
+	// the URL would carry the default the user never chose.
+	if (sort && !sortMatchesDefault(sort, defaults?.sort)) {
+		params.set(`${SOURCE_PREFIX}${sourceKey}${SORT_SUFFIX}`, sort.field);
+		params.set(`${SOURCE_PREFIX}${sourceKey}${DIR_SUFFIX}`, sort.direction);
+	}
+	if (pageSize !== undefined && pageSize !== defaults?.pageSize) {
+		params.set(`${SOURCE_PREFIX}${sourceKey}${PAGE_SIZE_SUFFIX}`, String(pageSize));
+	}
+	if (pageIndex !== undefined && pageIndex > 0) {
+		params.set(`${SOURCE_PREFIX}${sourceKey}${PAGE_SUFFIX}`, String(pageIndex + 1));
+	}
+}
+
+export interface ReadSourceParamsResult {
+	filters: ActiveFilterValue[];
+	sort: SortState | null;
+	pageSize: number | undefined;
+	pageIndex: number;
+}
+
+export function readSourceParams(
+	params: URLSearchParams,
+	sourceKey: string,
+	configs: FilterFieldConfig[],
+): ReadSourceParamsResult {
+	const filters: ActiveFilterValue[] = [];
+	for (const config of configs) {
+		const { field, label, type } = config;
+		const value = params.get(filterKey(sourceKey, field)) ?? undefined;
+		const min = params.get(filterKey(sourceKey, field, "min")) ?? undefined;
+		const max = params.get(filterKey(sourceKey, field, "max")) ?? undefined;
+
+		const hasValue = value !== undefined && value !== "";
+		const hasRange = (min !== undefined && min !== "") || (max !== undefined && max !== "");
+		if (hasValue || hasRange) {
+			filters.push({ field, label, type, value, min, max });
+		}
+	}
+
+	let sort: SortState | null = null;
+	const sortField = params.get(`${SOURCE_PREFIX}${sourceKey}${SORT_SUFFIX}`);
+	const sortDir = params.get(`${SOURCE_PREFIX}${sourceKey}${DIR_SUFFIX}`);
+	if (sortField) {
+		sort = { field: sortField, direction: sortDir === "DESC" ? "DESC" : "ASC" };
+	}
+
+	const pageSizeRaw = params.get(`${SOURCE_PREFIX}${sourceKey}${PAGE_SIZE_SUFFIX}`);
+	const pageSize = pageSizeRaw ? parseInt(pageSizeRaw, 10) : undefined;
+	const pageRaw = params.get(`${SOURCE_PREFIX}${sourceKey}${PAGE_SUFFIX}`);
+	const page = pageRaw ? parseInt(pageRaw, 10) : 1;
+	const pageIndex = !isNaN(page) && page > 1 ? page - 1 : 0;
+
+	return {
+		filters,
+		sort,
+		pageSize: pageSize && !isNaN(pageSize) ? pageSize : undefined,
+		pageIndex,
+	};
+}
+
+// ---------------------------------------------------------------------------
+// GraphQL filter building
+// ---------------------------------------------------------------------------
+
+/**
+ * Combines active filter values into a GraphQL `where` clause for one source.
+ * Returns `undefined` when no constraints are active.
+ */
+export function buildFilter(filters: ActiveFilterValue[], configs: FilterFieldConfig[]): unknown {
+	const configMap = new Map(configs.map((c) => [c.field, c]));
+	const clauses: unknown[] = [];
+	for (const filter of filters) {
+		const clause = buildSingleFilter(filter, configMap.get(filter.field));
+		if (clause) clauses.push(clause);
+	}
+	if (clauses.length === 0) return undefined;
+	if (clauses.length === 1) return clauses[0];
+	return { and: clauses };
+}
+
+function toStartOfDay(d: string) {
+	return `${d}T00:00:00.000Z`;
+}
+function toEndOfDay(d: string) {
+	return `${d}T23:59:59.999Z`;
+}
+
+function buildSingleFilter(filter: ActiveFilterValue, _config?: FilterFieldConfig): unknown {
+	const { field, type, value, min, max } = filter;
+	switch (type) {
+		case "text": {
+			if (!value) return null;
+			return { [field]: { like: `%${value}%` } };
+		}
+		case "picklist": {
+			if (!value) return null;
+			return { [field]: { eq: value } };
+		}
+		case "numeric": {
+			if (!min && !max) return null;
+			const ops: Record<string, number> = {};
+			if (min) ops.gte = Number(min);
+			if (max) ops.lte = Number(max);
+			return { [field]: ops };
+		}
+		case "boolean": {
+			if (value === undefined || value === "") return null;
+			return { [field]: { eq: value === "true" } };
+		}
+		case "multipicklist": {
+			if (!value) return null;
+			const values = value.split(",").filter(Boolean);
+			if (values.length === 0) return null;
+			if (values.length === 1) return { [field]: { eq: values[0] } };
+			return { [field]: { in: values } };
+		}
+		case "date": {
+			if (!min && !max) return null;
+			const op = min ? "gte" : "lte";
+			const dateStr = min ?? max;
+			return { [field]: { [op]: { value: dateStr } } };
+		}
+		case "daterange": {
+			if (!min && !max) return null;
+			const clauses: unknown[] = [];
+			if (min) clauses.push({ [field]: { gte: { value: min } } });
+			if (max) clauses.push({ [field]: { lte: { value: max } } });
+			return clauses.length === 1 ? clauses[0] : { and: clauses };
+		}
+		case "datetime": {
+			if (!min && !max) return null;
+			const op = min ? "gte" : "lte";
+			const dateStr = min ?? max;
+			const isoStr = op === "gte" ? toStartOfDay(dateStr!) : toEndOfDay(dateStr!);
+			return { [field]: { [op]: { value: isoStr } } };
+		}
+		case "datetimerange": {
+			if (!min && !max) return null;
+			const clauses: unknown[] = [];
+			if (min) clauses.push({ [field]: { gte: { value: toStartOfDay(min) } } });
+			if (max) clauses.push({ [field]: { lte: { value: toEndOfDay(max) } } });
+			return clauses.length === 1 ? clauses[0] : { and: clauses };
+		}
+		default:
+			return null;
+	}
+}
+
+/**
+ * Builds a global-q `or` clause across the source's searchable fields.
+ * Returns `undefined` when q is empty or the source has no searchable fields.
+ */
+export function buildGlobalQueryClause(q: string, searchableFields: string[]): unknown {
+	const trimmed = q.trim();
+	if (!trimmed || searchableFields.length === 0) return undefined;
+	const clauses = searchableFields.map((path) => {
+		const parts = path.split(".");
+		let clause: Record<string, unknown> = { like: `%${trimmed}%` };
+		for (let i = parts.length - 1; i >= 0; i--) {
+			clause = { [parts[i]]: clause };
+		}
+		return clause;
+	});
+	return clauses.length === 1 ? clauses[0] : { or: clauses };
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/features/search/utils/sortUtils.ts

@@ -0,0 +1,34 @@
+/**
+ * Sort state and order-by builder for search.
+ *
+ * The order-by output shape matches the Salesforce uiapi GraphQL convention:
+ *   { [field]: { order: ASC|DESC, nulls: LAST } }
+ *
+ * The constants are stringly-typed here (rather than imported from codegen)
+ * because search builds its query at runtime and isn't tied to a
+ * specific generated schema.
+ */
+
+export type SortFieldConfig<TFieldName extends string = string> = {
+	field: TFieldName;
+	label: string;
+};
+
+export type SortState<TFieldName extends string = string> = {
+	field: TFieldName;
+	direction: "ASC" | "DESC";
+};
+
+const ORDER_ASC = "ASC";
+const ORDER_DESC = "DESC";
+const NULLS_LAST = "LAST";
+
+export function buildOrderBy(sort: SortState | null): unknown {
+	if (!sort) return undefined;
+	return {
+		[sort.field]: {
+			order: sort.direction === "ASC" ? ORDER_ASC : ORDER_DESC,
+			nulls: NULLS_LAST,
+		},
+	};
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/hooks/useAsyncData.ts

@@ -0,0 +1,67 @@
+import { useEffect, useRef, useState } from 'react';
+
+interface UseAsyncDataResult<T> {
+  data: T | null;
+  loading: boolean;
+  error: string | null;
+}
+
+/**
+ * Runs an async fetcher on mount and whenever `deps` change.
+ * Returns the loading/error/data state. Does not cache — every call
+ * to the fetcher hits the source directly.
+ *
+ * A cleanup flag prevents state updates if the component unmounts
+ * or deps change before the fetch completes (avoids React warnings
+ * and stale updates from out-of-order responses).
+ */
+export function useAsyncData<T>(
+  fetcher: () => Promise<T>,
+  deps: React.DependencyList
+): UseAsyncDataResult<T> {
+  const [data, setData] = useState<T | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [generation, setGeneration] = useState(0);
+
+  const fetcherRef = useRef(fetcher);
+  useEffect(() => {
+    fetcherRef.current = fetcher;
+  });
+
+  // Detect dep changes during render to reset loading state and bump generation
+  const [prevDeps, setPrevDeps] = useState(deps);
+  if (
+    deps.length !== prevDeps.length ||
+    deps.some((d, i) => d !== prevDeps[i])
+  ) {
+    setPrevDeps(deps);
+    setGeneration(g => g + 1);
+    if (!loading) setLoading(true);
+    if (error !== null) setError(null);
+  }
+
+  useEffect(() => {
+    let cancelled = false;
+
+    fetcherRef
+      .current()
+      .then(result => {
+        if (!cancelled) setData(result);
+      })
+      .catch(err => {
+        console.error(err);
+        if (!cancelled)
+          setError(err instanceof Error ? err.message : 'An error occurred');
+      })
+      .finally(() => {
+        if (!cancelled) setLoading(false);
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [generation]);
+
+  return { data, loading, error };
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/navigationMenu.tsx

@@ -0,0 +1,80 @@
+import { Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
+
+export default function NavigationMenu() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
+
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
+
+  return (
+    <nav className="bg-white border-b border-gray-200">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="flex justify-between items-center h-16">
+          <Link to="/" className="text-xl font-semibold text-gray-900">
+            React App
+          </Link>
+          <button
+            onClick={toggleMenu}
+            className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+            aria-label="Toggle menu"
+          >
+            <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? 'rotate-45 translate-y-2' : ''
+                }`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+              />
+              <span
+                className={`block h-0.5 w-6 bg-current transition-all ${
+                  isOpen ? '-rotate-45 -translate-y-2' : ''
+                }`}
+              />
+            </div>
+          </button>
+        </div>
+        {isOpen && (
+          <div className="pb-4">
+            <div className="flex flex-col space-y-2">
+              {navigationRoutes.map(item => (
+                <Link
+                  key={item.path}
+                  to={item.path}
+                  onClick={() => setIsOpen(false)}
+                  className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                    isActive(item.path)
+                      ? 'bg-blue-100 text-blue-700'
+                      : 'text-gray-700 hover:bg-gray-100'
+                  }`}
+                >
+                  {item.label}
+                </Link>
+              ))}
+            </div>
+          </div>
+        )}
+      </div>
+    </nav>
+  );
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/pages/Home.tsx

@@ -0,0 +1,11 @@
+import { Search, config } from "../features/search";
+
+/**
+ * Home page for the search feature. Renders the drop-in `<Search>` against the
+ * static `config.json` so the index route ("/") shows the full search
+ * experience. This file overrides the base app's placeholder Home page when the
+ * feature is applied.
+ */
+export default function Home() {
+	return <Search config={config} title="Search" />;
+}

package/dist/force-app/main/default/uiBundles/feature-react-search/src/pages/NotFound.tsx

@@ -0,0 +1,18 @@
+import { Link } from 'react-router';
+
+export default function NotFound() {
+  return (
+    <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold text-gray-900 mb-4">404</h1>
+        <p className="text-lg text-gray-600 mb-8">Page not found</p>
+        <Link
+          to="/"
+          className="inline-block px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
+        >
+          Go to Home
+        </Link>
+      </div>
+    </div>
+  );
+}