@salesforce/webapp-template-app-react-template-b2e-experimental 1.116.0 → 1.116.1

package/dist/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.116.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.116.0...v1.116.1) (2026-03-25)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.116.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.115.0...v1.116.0) (2026-03-25)
 
 **Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental

package/dist/force-app/main/default/webapplications/reactinternalapp/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.116.0",
-    "@salesforce/webapp-experimental": "^1.116.0",
+    "@salesforce/sdk-data": "^1.116.1",
+    "@salesforce/webapp-experimental": "^1.116.1",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -42,7 +42,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.116.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.116.1",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/force-app/main/default/webapplications/reactinternalapp/src/api/account/accountSearchService.ts

@@ -0,0 +1,46 @@
+import SEARCH_ACCOUNTS_QUERY from "./query/searchAccounts.graphql?raw";
+import DISTINCT_INDUSTRIES_QUERY from "./query/distinctAccountIndustries.graphql?raw";
+import DISTINCT_TYPES_QUERY from "./query/distinctAccountTypes.graphql?raw";
+import {
+	searchObjects,
+	fetchDistinctValues,
+	type ObjectSearchOptions,
+	type PicklistOption,
+} from "../../features/object-search/api/objectSearchService";
+import type {
+	SearchAccountsQuery,
+	SearchAccountsQueryVariables,
+	DistinctAccountIndustriesQuery,
+	DistinctAccountTypesQuery,
+} from "../graphql-operations-types";
+
+export type AccountSearchResult = NonNullable<SearchAccountsQuery["uiapi"]["query"]["Account"]>;
+
+export type AccountSearchOptions = ObjectSearchOptions<
+	SearchAccountsQueryVariables["where"],
+	SearchAccountsQueryVariables["orderBy"]
+>;
+
+export type { PicklistOption };
+
+export async function searchAccounts(
+	options: AccountSearchOptions = {},
+): Promise<AccountSearchResult> {
+	return searchObjects<AccountSearchResult, SearchAccountsQuery, SearchAccountsQueryVariables>(
+		SEARCH_ACCOUNTS_QUERY,
+		"Account",
+		options,
+	);
+}
+
+export async function fetchDistinctIndustries(): Promise<PicklistOption[]> {
+	return fetchDistinctValues<DistinctAccountIndustriesQuery>(
+		DISTINCT_INDUSTRIES_QUERY,
+		"Account",
+		"Industry",
+	);
+}
+
+export async function fetchDistinctTypes(): Promise<PicklistOption[]> {
+	return fetchDistinctValues<DistinctAccountTypesQuery>(DISTINCT_TYPES_QUERY, "Account", "Type");
+}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/api/account/query/distinctAccountIndustries.graphql

@@ -0,0 +1,19 @@
+query DistinctAccountIndustries {
+	uiapi {
+		aggregate {
+			Account(groupBy: { Industry: { group: true } }) {
+				edges {
+					node {
+						aggregate @optional {
+							Industry @optional {
+								value
+								displayValue
+								label
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/api/account/query/distinctAccountTypes.graphql

@@ -0,0 +1,19 @@
+query DistinctAccountTypes {
+	uiapi {
+		aggregate {
+			Account(groupBy: { Type: { group: true } }) {
+				edges {
+					node {
+						aggregate @optional {
+							Type @optional {
+								value
+								displayValue
+								label
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/api/account/query/getAccountDetail.graphql

@@ -0,0 +1,121 @@
+query GetAccountDetail($id: ID!) {
+	uiapi {
+		query {
+			Account(where: { Id: { eq: $id } }) {
+				edges {
+					node {
+						Id
+						Name @optional {
+							value
+							displayValue
+						}
+						Owner @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						Phone @optional {
+							value
+							displayValue
+						}
+						Fax @optional {
+							value
+							displayValue
+						}
+						Parent @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						Website @optional {
+							value
+							displayValue
+						}
+						Type @optional {
+							value
+							displayValue
+						}
+						NumberOfEmployees @optional {
+							value
+							displayValue
+						}
+						Industry @optional {
+							value
+							displayValue
+						}
+						AnnualRevenue @optional {
+							value
+							displayValue
+						}
+						Description @optional {
+							value
+							displayValue
+						}
+						BillingStreet @optional {
+							value
+							displayValue
+						}
+						BillingCity @optional {
+							value
+							displayValue
+						}
+						BillingState @optional {
+							value
+							displayValue
+						}
+						BillingPostalCode @optional {
+							value
+							displayValue
+						}
+						BillingCountry @optional {
+							value
+							displayValue
+						}
+						ShippingStreet @optional {
+							value
+							displayValue
+						}
+						ShippingCity @optional {
+							value
+							displayValue
+						}
+						ShippingState @optional {
+							value
+							displayValue
+						}
+						ShippingPostalCode @optional {
+							value
+							displayValue
+						}
+						ShippingCountry @optional {
+							value
+							displayValue
+						}
+						CreatedBy @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						CreatedDate @optional {
+							value
+							displayValue
+						}
+						LastModifiedBy @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						LastModifiedDate @optional {
+							value
+							displayValue
+						}
+					}
+				}
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/api/account/query/searchAccounts.graphql

@@ -0,0 +1,51 @@
+query SearchAccounts(
+	$first: Int
+	$after: String
+	$where: Account_Filter
+	$orderBy: Account_OrderBy
+) {
+	uiapi {
+		query {
+			Account(first: $first, after: $after, where: $where, orderBy: $orderBy) {
+				edges {
+					node {
+						Id
+						Name @optional {
+							value
+							displayValue
+						}
+						Industry @optional {
+							value
+							displayValue
+						}
+						Type @optional {
+							value
+							displayValue
+						}
+						Phone @optional {
+							value
+							displayValue
+						}
+						Owner @optional {
+							Name @optional {
+								value
+								displayValue
+							}
+						}
+						AnnualRevenue @optional {
+							value
+							displayValue
+						}
+					}
+				}
+				pageInfo {
+					hasNextPage
+					hasPreviousPage
+					endCursor
+					startCursor
+				}
+				totalCount
+			}
+		}
+	}
+}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/pages/AccountObjectDetailPage.tsx

@@ -0,0 +1,361 @@
+import { useState } from "react";
+import { useParams, useNavigate } from "react-router";
+import { createDataSDK } from "@salesforce/sdk-data";
+import { AlertCircle, ChevronDown, ChevronRight, FileQuestion } from "lucide-react";
+import GET_ACCOUNT_DETAIL from "../api/account/query/getAccountDetail.graphql?raw";
+import type {
+	GetAccountDetailQuery,
+	GetAccountDetailQueryVariables,
+} from "../api/graphql-operations-types";
+import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+import { Button } from "../components/ui/button";
+import { Card, CardContent } from "../components/ui/card";
+import {
+	fieldValue,
+	getAddressFieldLines,
+	formatDateTimeField,
+} from "../features/object-search/utils/fieldUtils";
+import {
+	Collapsible,
+	CollapsibleTrigger,
+	CollapsibleContent,
+} from "../components/ui/collapsible";
+import { Separator } from "../components/ui/separator";
+import { Skeleton } from "../components/ui/skeleton";
+import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
+import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
+
+type AccountNode = NonNullable<
+	NonNullable<
+		NonNullable<NonNullable<GetAccountDetailQuery["uiapi"]["query"]["Account"]>["edges"]>[number]
+	>["node"]
+>;
+
+async function fetchAccountDetail(recordId: string): Promise<AccountNode | null | undefined> {
+	const data = await createDataSDK();
+	const response = await data.graphql?.<GetAccountDetailQuery, GetAccountDetailQueryVariables>(
+		GET_ACCOUNT_DETAIL,
+		{ id: recordId },
+	);
+
+	if (response?.errors?.length) {
+		throw new Error(response.errors.map((e) => e.message).join("; "));
+	}
+
+	return response?.data?.uiapi?.query?.Account?.edges?.[0]?.node;
+}
+
+export default function AccountObjectDetail() {
+	const { recordId } = useParams();
+	const navigate = useNavigate();
+
+	const {
+		data: account,
+		loading,
+		error,
+	} = useCachedAsyncData(() => fetchAccountDetail(recordId!), [recordId], {
+		key: `account:${recordId}`,
+	});
+
+	return (
+		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<ObjectBreadcrumb
+				listPath="/accounts"
+				listLabel="Accounts"
+				loading={loading}
+				recordName={
+					account
+						? (fieldValue(account.Name) ?? "")
+						: error
+							? "Error"
+							: loading
+								? undefined
+								: "Not Found"
+				}
+			/>
+
+			{/* Loading state */}
+			{loading && <AccountDetailSkeleton />}
+
+			{/* Error state */}
+			{error && <AccountDetailError onBack={() => navigate(-1)} />}
+
+			{/* Not found state */}
+			{!loading && !error && !account && <AccountDetailNotFound onBack={() => navigate(-1)} />}
+
+			{/* Content */}
+			{account && <AccountDetailContent account={account} />}
+		</div>
+	);
+}
+
+function AccountDetailContent({ account }: { account: AccountNode }) {
+	const billingAddress = getAddressFieldLines({
+		street: fieldValue(account.BillingStreet),
+		city: fieldValue(account.BillingCity),
+		state: fieldValue(account.BillingState),
+		postalCode: fieldValue(account.BillingPostalCode),
+		country: fieldValue(account.BillingCountry),
+	});
+
+	const shippingAddress = getAddressFieldLines({
+		street: fieldValue(account.ShippingStreet),
+		city: fieldValue(account.ShippingCity),
+		state: fieldValue(account.ShippingState),
+		postalCode: fieldValue(account.ShippingPostalCode),
+		country: fieldValue(account.ShippingCountry),
+	});
+
+	const dateTimeOptions = { dateStyle: "medium", timeStyle: "short" } as const;
+	const createdDate = formatDateTimeField(
+		fieldValue(account.CreatedDate),
+		undefined,
+		dateTimeOptions,
+	);
+	const lastModifiedDate = formatDateTimeField(
+		fieldValue(account.LastModifiedDate),
+		undefined,
+		dateTimeOptions,
+	);
+
+	return (
+		<>
+			<h1 className="text-2xl font-bold mb-4">Account: {fieldValue(account.Name)}</h1>
+
+			<Card>
+				<CardContent className="space-y-8 pt-6">
+					{/* Top section */}
+					<div>
+						<div className="space-y-4">
+							<FieldRow>
+								<FieldItem label="Account Owner">{fieldValue(account.Owner?.Name)}</FieldItem>
+								<FieldItem label="Phone">
+									<TelephoneField value={fieldValue(account.Phone)} />
+								</FieldItem>
+							</FieldRow>
+							<FieldRow>
+								<FieldItem label="Account Name">{fieldValue(account.Name)}</FieldItem>
+								<FieldItem label="Fax">
+									<TelephoneField value={fieldValue(account.Fax)} />
+								</FieldItem>
+							</FieldRow>
+							<FieldRow>
+								<FieldItem label="Parent Account">{fieldValue(account.Parent?.Name)}</FieldItem>
+								<FieldItem label="Website">{fieldValue(account.Website)}</FieldItem>
+							</FieldRow>
+						</div>
+					</div>
+
+					<Separator />
+
+					{/* Additional Information */}
+					<Section title="Additional Information">
+						<FieldRow>
+							<FieldItem label="Type">{fieldValue(account.Type)}</FieldItem>
+							<FieldItem label="Employees">{fieldValue(account.NumberOfEmployees)}</FieldItem>
+						</FieldRow>
+						<FieldRow>
+							<FieldItem label="Industry">{fieldValue(account.Industry)}</FieldItem>
+							<FieldItem label="Annual Revenue">{fieldValue(account.AnnualRevenue)}</FieldItem>
+						</FieldRow>
+						<FieldItem label="Description">{fieldValue(account.Description)}</FieldItem>
+					</Section>
+
+					<Separator />
+
+					{/* Address Information */}
+					<Section title="Address Information">
+						<FieldRow>
+							<FieldItem label="Billing Address">
+								{billingAddress ? billingAddress.map((line, i) => <div key={i}>{line}</div>) : null}
+							</FieldItem>
+							<FieldItem label="Shipping Address">
+								{shippingAddress
+									? shippingAddress.map((line, i) => <div key={i}>{line}</div>)
+									: null}
+							</FieldItem>
+						</FieldRow>
+					</Section>
+
+					<Separator />
+
+					{/* System Information */}
+					<Section title="System Information">
+						<FieldRow>
+							<FieldItem label="Created By">
+								{[fieldValue(account.CreatedBy?.Name), createdDate].filter(Boolean).join(" ") ||
+									null}
+							</FieldItem>
+							<FieldItem label="Last Modified By">
+								{[fieldValue(account.LastModifiedBy?.Name), lastModifiedDate]
+									.filter(Boolean)
+									.join(" ") || null}
+							</FieldItem>
+						</FieldRow>
+					</Section>
+				</CardContent>
+			</Card>
+		</>
+	);
+}
+
+function TelephoneField({ value }: { value?: string | null }) {
+	if (!value) return null;
+	return (
+		<a href={`tel:${value}`} className="underline">
+			{value}
+		</a>
+	);
+}
+
+function FieldItem({ label, children }: { label: string; children: React.ReactNode }) {
+	return (
+		<div>
+			<dt className="text-sm text-muted-foreground">{label}</dt>
+			<dd className="mt-0.5">{children ?? "—"}</dd>
+		</div>
+	);
+}
+
+function FieldRow({ children }: { children: React.ReactNode }) {
+	return <div className="grid grid-cols-2 gap-x-8 gap-y-4">{children}</div>;
+}
+
+function Section({ title, children }: { title: string; children: React.ReactNode }) {
+	const [open, setOpen] = useState(true);
+	return (
+		<Collapsible open={open} onOpenChange={setOpen}>
+			<CollapsibleTrigger className="flex items-center gap-2 cursor-pointer text-lg font-semibold py-2">
+				{open ? <ChevronDown className="size-5" /> : <ChevronRight className="size-5" />}
+				{title}
+			</CollapsibleTrigger>
+			<CollapsibleContent>
+				<div className="mt-2 space-y-4">{children}</div>
+			</CollapsibleContent>
+		</Collapsible>
+	);
+}
+
+function AccountDetailError({ onBack }: { onBack: () => void }) {
+	return (
+		<>
+			<Alert variant="destructive" role="alert">
+				<AlertCircle />
+				<AlertTitle>
+					<h2>Failed to load account</h2>
+				</AlertTitle>
+				<AlertDescription>
+					Something went wrong while loading this account. Please try again later.
+				</AlertDescription>
+			</Alert>
+			<div className="mt-4 flex gap-3">
+				<Button variant="outline" onClick={onBack}>
+					← Back
+				</Button>
+				<Button variant="outline" onClick={() => window.location.reload()}>
+					Retry
+				</Button>
+			</div>
+		</>
+	);
+}
+
+function AccountDetailNotFound({ onBack }: { onBack: () => void }) {
+	return (
+		<Card>
+			<CardContent className="flex flex-col items-center justify-center py-16 text-center">
+				<FileQuestion className="size-12 text-muted-foreground mb-4" />
+				<h2 className="text-lg font-semibold mb-1">Account not found</h2>
+				<p className="text-sm text-muted-foreground mb-6">
+					The account you're looking for doesn't exist or may have been deleted.
+				</p>
+				<Button variant="outline" onClick={onBack}>
+					← Go back
+				</Button>
+			</CardContent>
+		</Card>
+	);
+}
+
+function AccountDetailSkeleton() {
+	return (
+		<>
+			<Skeleton className="h-8 w-56 mb-4" />
+
+			<Card>
+				<CardContent className="space-y-8 pt-6">
+					{/* Top section: field rows */}
+					<div>
+						<div className="space-y-4">
+							<SkeletonFieldRow />
+							<SkeletonFieldRow />
+							<SkeletonFieldRow />
+						</div>
+					</div>
+
+					<Separator />
+
+					{/* Additional Information */}
+					<SkeletonSection />
+
+					<Separator />
+
+					{/* Address Information */}
+					<div className="space-y-4">
+						<Skeleton className="h-7 w-48 py-2" />
+						<div className="grid grid-cols-2 gap-x-8 gap-y-4">
+							<div>
+								<Skeleton className="h-4 w-28 mb-1.5" />
+								<Skeleton className="h-5 w-44 mb-1" />
+								<Skeleton className="h-5 w-36 mb-1" />
+								<Skeleton className="h-5 w-28" />
+							</div>
+							<div>
+								<Skeleton className="h-4 w-32 mb-1.5" />
+								<Skeleton className="h-5 w-44 mb-1" />
+								<Skeleton className="h-5 w-36 mb-1" />
+								<Skeleton className="h-5 w-28" />
+							</div>
+						</div>
+					</div>
+
+					<Separator />
+
+					{/* System Information */}
+					<div className="space-y-4">
+						<Skeleton className="h-7 w-48 py-2" />
+						<SkeletonFieldRow />
+					</div>
+				</CardContent>
+			</Card>
+		</>
+	);
+}
+
+function SkeletonField() {
+	return (
+		<div>
+			<Skeleton className="h-4 w-24 mb-1.5" />
+			<Skeleton className="h-5 w-40" />
+		</div>
+	);
+}
+
+function SkeletonFieldRow() {
+	return (
+		<div className="grid grid-cols-2 gap-x-8 gap-y-4">
+			<SkeletonField />
+			<SkeletonField />
+		</div>
+	);
+}
+
+function SkeletonSection() {
+	return (
+		<div className="space-y-4">
+			<Skeleton className="h-7 w-48 py-2" />
+			<SkeletonFieldRow />
+			<SkeletonFieldRow />
+		</div>
+	);
+}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/pages/AccountSearch.tsx

@@ -0,0 +1,301 @@
+import { useMemo, useState } from "react";
+import { Link } from "react-router";
+import { AlertCircle, ChevronDown, SearchX } from "lucide-react";
+import {
+	searchAccounts,
+	fetchDistinctIndustries,
+	fetchDistinctTypes,
+} from "../api/account/accountSearchService";
+import { useCachedAsyncData } from "../features/object-search/hooks/useCachedAsyncData";
+import { fieldValue } from "../features/object-search/utils/fieldUtils";
+import { useObjectSearchParams } from "../features/object-search/hooks/useObjectSearchParams";
+import { Alert, AlertTitle, AlertDescription } from "../components/ui/alert";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Button } from "../components/ui/button";
+import {
+	Collapsible,
+	CollapsibleContent,
+	CollapsibleTrigger,
+} from "../components/ui/collapsible";
+import { Skeleton } from "../components/ui/skeleton";
+import {
+	FilterProvider,
+	FilterResetButton,
+} from "../features/object-search/components/FilterContext";
+import { SearchFilter } from "../features/object-search/components/filters/SearchFilter";
+import { TextFilter } from "../features/object-search/components/filters/TextFilter";
+import { SelectFilter } from "../features/object-search/components/filters/SelectFilter";
+import { MultiSelectFilter } from "../features/object-search/components/filters/MultiSelectFilter";
+import { NumericRangeFilter } from "../features/object-search/components/filters/NumericRangeFilter";
+import { DateFilter } from "../features/object-search/components/filters/DateFilter";
+import { DateRangeFilter } from "../features/object-search/components/filters/DateRangeFilter";
+import { ActiveFilters } from "../features/object-search/components/ActiveFilters";
+import { SortControl } from "../features/object-search/components/SortControl";
+import type { FilterFieldConfig } from "../features/object-search/utils/filterUtils";
+import type { SortFieldConfig } from "../features/object-search/utils/sortUtils";
+import type { Account_Filter, Account_OrderBy } from "../api/graphql-operations-types";
+import type { AccountSearchResult } from "../api/account/accountSearchService";
+import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
+import PaginationControls from "../features/object-search/components/PaginationControls";
+import type { PaginationConfig } from "../features/object-search/hooks/useObjectSearchParams";
+
+const PAGINATION_CONFIG: PaginationConfig = {
+	defaultPageSize: 6,
+	validPageSizes: [6, 12, 24, 48],
+};
+
+type AccountNode = NonNullable<
+	NonNullable<NonNullable<AccountSearchResult["edges"]>[number]>["node"]
+>;
+
+const FILTER_CONFIGS: FilterFieldConfig[] = [
+	{
+		field: "search",
+		label: "Search",
+		type: "search",
+		searchFields: ["Name", "Phone", "Industry"],
+		placeholder: "Search by name, phone, or industry...",
+	},
+	{ field: "Name", label: "Account Name", type: "text", placeholder: "Search by name..." },
+	{ field: "Industry", label: "Industry", type: "picklist" },
+	{ field: "Type", label: "Type", type: "multipicklist" },
+	{ field: "AnnualRevenue", label: "Annual Revenue", type: "numeric" },
+	{ field: "CreatedDate", label: "Created Date", type: "date" },
+	{ field: "LastModifiedDate", label: "Last Modified Date", type: "daterange" },
+];
+
+const ACCOUNT_SORT_CONFIGS: SortFieldConfig<keyof Account_OrderBy>[] = [
+	{ field: "Name", label: "Name" },
+	{ field: "AnnualRevenue", label: "Annual Revenue" },
+	{ field: "Industry", label: "Industry" },
+	{ field: "CreatedDate", label: "Created Date" },
+];
+
+// -- Component --------------------------------------------------------------
+
+export default function AccountSearch() {
+	const [filtersOpen, setFiltersOpen] = useState(true);
+	const { data: industryOptions } = useCachedAsyncData(fetchDistinctIndustries, [], {
+		key: "distinctIndustries",
+		ttl: 300_000,
+	});
+	const { data: typeOptions } = useCachedAsyncData(fetchDistinctTypes, [], {
+		key: "distinctTypes",
+		ttl: 300_000,
+	});
+
+	const { filters, sort, query, pagination, resetAll } = useObjectSearchParams<
+		Account_Filter,
+		Account_OrderBy
+	>(FILTER_CONFIGS, ACCOUNT_SORT_CONFIGS, PAGINATION_CONFIG);
+
+	const searchKey = `accounts:${JSON.stringify({ where: query.where, orderBy: query.orderBy, first: pagination.pageSize, after: pagination.afterCursor })}`;
+	const { data, loading, error } = useCachedAsyncData(
+		() =>
+			searchAccounts({
+				where: query.where,
+				orderBy: query.orderBy,
+				first: pagination.pageSize,
+				after: pagination.afterCursor,
+			}),
+		[query.where, query.orderBy, pagination.pageSize, pagination.afterCursor],
+		{ key: searchKey },
+	);
+
+	const pageInfo = data?.pageInfo;
+	const totalCount = data?.totalCount;
+	const hasNextPage = pageInfo?.hasNextPage ?? false;
+	const hasPreviousPage = pagination.pageIndex > 0;
+
+	const validAccountNodes = useMemo(
+		() =>
+			(data?.edges ?? []).reduce<AccountNode[]>((acc, edge) => {
+				if (edge?.node) acc.push(edge.node);
+				return acc;
+			}, []),
+		[data?.edges],
+	);
+
+	return (
+		<div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<ObjectBreadcrumb listPath="/accounts" listLabel="Accounts" />
+
+			<h1 className="text-2xl font-bold mb-4">Search Accounts</h1>
+
+			<div className="flex flex-col lg:flex-row gap-6">
+				{/* Sidebar — Filter Panel */}
+				<aside className="w-full lg:w-80 shrink-0">
+					<FilterProvider
+						filters={filters.active}
+						onFilterChange={filters.set}
+						onFilterRemove={filters.remove}
+						onReset={resetAll}
+					>
+						<Card>
+							<Collapsible open={filtersOpen} onOpenChange={setFiltersOpen}>
+								<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+									<CardTitle className="text-base font-semibold">
+										<h2>Filters</h2>
+									</CardTitle>
+									<div className="flex items-center gap-1">
+										<FilterResetButton variant="destructive" size="sm" />
+										<CollapsibleTrigger asChild>
+											<Button variant="ghost" size="icon">
+												<ChevronDown
+													className={`h-4 w-4 transition-transform ${filtersOpen ? "" : "-rotate-90"}`}
+												/>
+												<span className="sr-only">Toggle filters</span>
+											</Button>
+										</CollapsibleTrigger>
+									</div>
+								</CardHeader>
+								<CollapsibleContent>
+									<CardContent className="space-y-4 pt-0">
+										<SearchFilter
+											field="search"
+											label="Search"
+											placeholder="Search by name, phone, or industry..."
+										/>
+										<TextFilter field="Name" label="Account Name" placeholder="Search by name..." />
+										<SelectFilter
+											field="Industry"
+											label="Industry"
+											options={industryOptions ?? []}
+										/>
+										<MultiSelectFilter field="Type" label="Type" options={typeOptions ?? []} />
+										<NumericRangeFilter field="AnnualRevenue" label="Annual Revenue" />
+										<DateFilter field="CreatedDate" label="Created Date" />
+										<DateRangeFilter field="LastModifiedDate" label="Last Modified Date" />
+									</CardContent>
+								</CollapsibleContent>
+							</Collapsible>
+						</Card>
+					</FilterProvider>
+				</aside>
+
+				{/* Main area — Sort + Results */}
+				<div className="flex-1 min-w-0">
+					{/* Sort control + active filters */}
+					<div className="flex flex-wrap items-center gap-2 mb-4">
+						<SortControl
+							configs={ACCOUNT_SORT_CONFIGS}
+							sort={sort.current}
+							onSortChange={sort.set}
+						/>
+						<ActiveFilters filters={filters.active} onRemove={filters.remove} />
+					</div>
+
+					<div className="min-h-112">
+						{/* Loading state */}
+						{loading && (
+							<>
+								<Skeleton className="h-5 w-30 mb-3" />
+								<div className="divide-y">
+									{Array.from({ length: pagination.pageSize }, (_, i) => (
+										<div key={i} className="flex items-center justify-between py-3">
+											<div className="space-y-2">
+												<Skeleton className="h-5 w-40" />
+												<Skeleton className="h-4 w-28" />
+											</div>
+											<div className="space-y-2 flex flex-col items-end">
+												<Skeleton className="h-4 w-24" />
+												<Skeleton className="h-4 w-20" />
+											</div>
+										</div>
+									))}
+								</div>
+							</>
+						)}
+
+						{/* Error state */}
+						{error && (
+							<>
+								<p className="text-sm text-muted-foreground mb-3">0 accounts found</p>
+								<Alert variant="destructive" role="alert">
+									<AlertCircle />
+									<AlertTitle>Failed to load accounts</AlertTitle>
+									<AlertDescription>
+										Something went wrong while loading accounts. Please try again later.
+									</AlertDescription>
+								</Alert>
+							</>
+						)}
+
+						{/* Results list */}
+						{!loading && !error && validAccountNodes.length > 0 && (
+							<>
+								<p className="text-sm text-muted-foreground mb-3">
+									{totalCount != null && (hasNextPage || hasPreviousPage)
+										? `${totalCount} account${totalCount !== 1 ? "s" : ""} found`
+										: `Showing ${validAccountNodes.length} account${validAccountNodes.length !== 1 ? "s" : ""}`}
+								</p>
+								<AccountResultsList nodes={validAccountNodes} />
+							</>
+						)}
+
+						{/* No results state */}
+						{!loading && !error && validAccountNodes.length === 0 && (
+							<div className="flex flex-col items-center justify-center py-16 text-center">
+								<SearchX className="size-12 text-muted-foreground mb-4" />
+								<h2 className="text-lg font-semibold mb-1">No accounts found</h2>
+								<p className="text-sm text-muted-foreground">
+									Try adjusting your filters or search criteria.
+								</p>
+							</div>
+						)}
+					</div>
+
+					{/* Pagination — always visible, disabled while loading or on error */}
+					<PaginationControls
+						pageIndex={pagination.pageIndex}
+						hasNextPage={hasNextPage}
+						hasPreviousPage={hasPreviousPage}
+						pageSize={pagination.pageSize}
+						pageSizeOptions={PAGINATION_CONFIG.validPageSizes}
+						onNextPage={() => {
+							if (pageInfo?.endCursor) pagination.goToNextPage(pageInfo.endCursor);
+						}}
+						onPreviousPage={pagination.goToPreviousPage}
+						onPageSizeChange={pagination.setPageSize}
+						disabled={loading || !!error}
+					/>
+				</div>
+			</div>
+		</div>
+	);
+}
+
+// -- Result Components ------------------------------------------------------
+
+function AccountResultsList({ nodes }: { nodes: AccountNode[] }) {
+	return (
+		<ul className="divide-y">
+			{nodes.map((node) => (
+				<AccountResultItem key={node.Id} node={node} />
+			))}
+		</ul>
+	);
+}
+
+function AccountResultItem({ node }: { node: AccountNode }) {
+	return (
+		<li>
+			<Link
+				to={`/accounts/${node.Id}`}
+				className="flex items-center justify-between py-3 px-3 -mx-3 rounded-md transition-colors hover:bg-accent"
+			>
+				<div>
+					<span className="font-medium">{fieldValue(node.Name) ?? "\u2014"}</span>
+					<p className="text-sm text-muted-foreground">
+						{[fieldValue(node.Industry), fieldValue(node.Type)].filter(Boolean).join(" \u00B7 ") ||
+							"\u2014"}
+					</p>
+				</div>
+				<div className="text-right text-sm">
+					<p>{fieldValue(node.Phone) ?? ""}</p>
+					<p className="text-muted-foreground">{fieldValue(node.Owner?.Name) ?? ""}</p>
+				</div>
+			</Link>
+		</li>
+	);
+}

package/dist/force-app/main/default/webapplications/reactinternalapp/src/pages/Home.tsx

@@ -1,12 +1,34 @@
-export default function Home() {
-  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">Home</h1>
-        <p className="text-lg text-gray-600 mb-8">
-          Welcome to your React application.
-        </p>
-      </div>
-    </div>
-  );
+import { useState } from "react";
+import { useNavigate } from "react-router";
+import { SearchBar } from "../features/object-search/components/SearchBar";
+import { Button } from "../components/ui/button";
+
+export default function HomePage() {
+	const navigate = useNavigate();
+	const [text, setText] = useState("");
+
+	const handleSubmit = (e: React.SyntheticEvent<HTMLFormElement>) => {
+		e.preventDefault();
+		const params = text ? `?q=${encodeURIComponent(text)}` : "";
+		navigate(`/accounts${params}`);
+	};
+
+	return (
+		<div className="max-w-2xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+			<div className="flex items-center gap-6 mb-6">
+				<h1 className="text-2xl font-bold">Account Search</h1>
+				<Button variant="outline" size="sm" onClick={() => navigate("/accounts")}>
+					Browse All Accounts
+				</Button>
+			</div>
+			<form onSubmit={handleSubmit} className="flex gap-2">
+				<SearchBar
+					placeholder="Search by name, phone, or industry..."
+					value={text}
+					handleChange={setText}
+				/>
+				<Button type="submit">Search</Button>
+			</form>
+		</div>
+	);
 }

package/dist/force-app/main/default/webapplications/reactinternalapp/src/routes.tsx

@@ -1,7 +1,10 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
-import Home from './features/object-search/__examples__/pages/Home';
+import Home from './pages/Home';
 import NotFound from './pages/NotFound';
+import AccountSearch from "./pages/AccountSearch";
+import AccountObjectDetail from "./pages/AccountObjectDetailPage";
+
 export const routes: RouteObject[] = [
   {
     path: "/",
@@ -15,6 +18,14 @@ export const routes: RouteObject[] = [
       {
         path: '*',
         element: <NotFound />
+      },
+      {
+        path: "accounts/:recordId",
+        element: <AccountObjectDetail />
+      },
+      {
+        path: "accounts",
+        element: <AccountSearch />
       }
     ]
   }

package/dist/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.116.0",
+  "version": "1.116.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-      "version": "1.116.0",
+      "version": "1.116.1",
       "license": "SEE LICENSE IN LICENSE.txt",
       "devDependencies": {
         "@lwc/eslint-plugin-lwc": "^3.3.0",

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.116.0",
+  "version": "1.116.1",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-template-b2e-experimental",
-  "version": "1.116.0",
+  "version": "1.116.1",
   "description": "Salesforce React internal app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",