@salesforce/webapp-template-app-react-template-b2e-experimental 1.59.2 → 1.60.0

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/DetailPage.tsx

@@ -0,0 +1,109 @@
+import { useMemo } from "react";
+import { useParams, useNavigate } from "react-router";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Skeleton } from "../components/ui/skeleton";
+import { Alert, AlertDescription, AlertTitle } from "../components/ui/alert";
+import { AlertCircle } from "lucide-react";
+import DetailHeader from "../components/detail/DetailHeader";
+import { UiApiDetailForm } from "../components/detail/UiApiDetailForm";
+import { OBJECT_API_NAMES, DEFAULT_DETAIL_PAGE_TITLE } from "../constants";
+import { toRecordDisplayNameMetadata } from "../utils/fieldUtils";
+import { useRecordDetailLayout } from "../hooks/useRecordDetailLayout";
+import { getGraphQLRecordDisplayName } from "../utils/graphQLNodeFieldUtils";
+
+export default function DetailPage() {
+	const { objectApiName: objectApiNameParam, recordId } = useParams<{
+		objectApiName: string;
+		recordId: string;
+	}>();
+	const navigate = useNavigate();
+	const objectApiName = objectApiNameParam ?? OBJECT_API_NAMES[0];
+
+	const { layout, record, objectMetadata, loading, error } = useRecordDetailLayout({
+		objectApiName,
+		recordId: recordId ?? null,
+	});
+
+	const recordTitle = useMemo(
+		() =>
+			record
+				? getGraphQLRecordDisplayName(record, toRecordDisplayNameMetadata(objectMetadata))
+				: DEFAULT_DETAIL_PAGE_TITLE,
+		[record, objectMetadata],
+	);
+
+	const handleBack = () => navigate(-1);
+
+	if (loading) {
+		return (
+			<div
+				className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12"
+				role="status"
+				aria-live="polite"
+				aria-label="Loading record details"
+			>
+				<span className="sr-only">Loading record details</span>
+				<Skeleton className="h-10 w-32 mb-6" aria-hidden="true" />
+				<Card aria-hidden="true">
+					<CardHeader>
+						<Skeleton className="h-8 w-3/4" />
+					</CardHeader>
+					<CardContent className="space-y-4">
+						{[1, 2, 3, 4].map((i) => (
+							<div key={i} className="space-y-2">
+								<Skeleton className="h-4 w-24" />
+								<Skeleton className="h-4 w-full" />
+							</div>
+						))}
+					</CardContent>
+				</Card>
+			</div>
+		);
+	}
+
+	if (error) {
+		return (
+			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+				<DetailHeader title="" onBack={handleBack} />
+				<Alert variant="destructive" role="alert">
+					<AlertCircle className="h-4 w-4" aria-hidden="true" />
+					<AlertTitle>Error</AlertTitle>
+					<AlertDescription>{error}</AlertDescription>
+				</Alert>
+			</div>
+		);
+	}
+
+	if (!layout || !record) {
+		return (
+			<div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12">
+				<DetailHeader title="" onBack={handleBack} />
+				<Alert role="alert">
+					<AlertCircle className="h-4 w-4" aria-hidden="true" />
+					<AlertTitle>Not Found</AlertTitle>
+					<AlertDescription>Record not found</AlertDescription>
+				</Alert>
+			</div>
+		);
+	}
+
+	return (
+		<main className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-12" aria-label="Record details">
+			<DetailHeader title={recordTitle} onBack={handleBack} />
+			<Card>
+				<CardHeader>
+					<CardTitle className="text-2xl">{recordTitle}</CardTitle>
+				</CardHeader>
+				<CardContent>
+					<UiApiDetailForm
+						objectApiName={objectApiName}
+						recordId={recordId!}
+						layout={layout}
+						record={record}
+						objectMetadata={objectMetadata}
+					/>
+				</CardContent>
+			</Card>
+		</main>
+	);
+}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/pages/GlobalSearch.tsx

@@ -0,0 +1,229 @@
+/**
+ * GlobalSearch Page Component
+ *
+ * Main page component for displaying global search results.
+ * Uses GraphQL API (useRecordListGraphQL) for list data; results are adapted to the
+ * same record shape as before so SearchResultCard and filters/sort/pagination work unchanged.
+ *
+ * @remarks
+ * - Supports single object search (no tabs)
+ * - Displays filters panel on the left and results on the right
+ * - Pagination uses a cursor stack: we only query forward (first + after) and store endCursor per page;
+ *   Previous re-queries using the stored cursor for the previous page so both Next and Previous work.
+ */
+import { useMemo, useState, useCallback, useEffect, useRef } from "react";
+import { useParams } from "react-router";
+import { OBJECT_API_NAMES, DEFAULT_PAGE_SIZE } from "../constants";
+import { useObjectListMetadata } from "../hooks/useObjectSearchData";
+import { useObjectInfoBatch } from "../hooks/useObjectInfoBatch";
+import { useRecordListGraphQL } from "../hooks/useRecordListGraphQL";
+import FiltersPanel from "../components/FiltersPanel";
+import SearchHeader from "../components/search/SearchHeader";
+import SearchResultsPanel from "../components/search/SearchResultsPanel";
+import { Card, CardContent, CardHeader, CardTitle } from "../components/ui/card";
+import { Skeleton } from "../components/ui/skeleton";
+import type { FilterCriteria } from "../types/filters/filters";
+import type { SearchResultRecord } from "../types/search/searchResults";
+import { graphQLNodeToSearchResultRecordData } from "../utils/graphQLRecordAdapter";
+
+const EMPTY_HIGHLIGHT = { fields: {}, snippet: null };
+const EMPTY_SEARCH_INFO = { isPromoted: false, isSpellCorrected: false };
+
+export default function GlobalSearch() {
+	const { query } = useParams<{ query: string }>();
+
+	const objectApiName = OBJECT_API_NAMES[0];
+
+	const [searchPageSize, setSearchPageSize] = useState(DEFAULT_PAGE_SIZE);
+	const [afterCursor, setAfterCursor] = useState<string | null>(null);
+	const [pageIndex, setPageIndex] = useState(0);
+	/** Cursor stack: cursorStack[i] is the `after` value that returns page i. cursorStack[0] = null (first page). */
+	const [cursorStack, setCursorStack] = useState<(string | null)[]>([null]);
+	const [appliedFilters, setAppliedFilters] = useState<FilterCriteria[]>([]);
+	const [sortBy, setSortBy] = useState("Name");
+
+	const decodedQuery = useMemo(() => {
+		if (!query) return "";
+		try {
+			return decodeURIComponent(query);
+		} catch (e) {
+			return query;
+		}
+	}, [query]);
+
+	const isBrowseAll = decodedQuery === "browse__all";
+	const searchQuery = isBrowseAll ? "" : decodedQuery.trim();
+
+	// Reset pagination when the URL search query changes so we don't use an old cursor with a new result set
+	useEffect(() => {
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+	}, [query]);
+
+	const listMeta = useObjectListMetadata(objectApiName);
+	const { objectInfos } = useObjectInfoBatch([...OBJECT_API_NAMES]);
+	const labelPlural = (objectInfos[0]?.labelPlural as string | undefined) ?? "records";
+	const {
+		edges,
+		pageInfo,
+		loading: resultsLoading,
+		error: resultsError,
+	} = useRecordListGraphQL({
+		objectApiName,
+		first: searchPageSize,
+		after: afterCursor,
+		filters: appliedFilters,
+		sortBy: sortBy === "relevance" ? "Name" : sortBy,
+		searchQuery: searchQuery || undefined,
+		columns: listMeta.columns,
+		columnsLoading: listMeta.loading,
+		columnsError: listMeta.error,
+	});
+
+	// Store endCursor for the next page so we can re-query when user clicks Next; also enables Previous via stack.
+	// Only update when not loading so a stale response cannot write a cursor into the wrong stack index (e.g. after rapid Next clicks).
+	useEffect(() => {
+		if (resultsLoading) return;
+		const cursor = pageInfo?.endCursor ?? null;
+		if (cursor == null) return;
+		setCursorStack((prev) => {
+			const next = [...prev];
+			next[pageIndex + 1] = cursor;
+			return next;
+		});
+	}, [resultsLoading, pageInfo?.endCursor, pageIndex]);
+
+	const results: SearchResultRecord[] = useMemo(
+		() =>
+			(edges ?? []).map((edge) => ({
+				record: graphQLNodeToSearchResultRecordData(
+					edge?.node as Record<string, unknown>,
+					objectApiName,
+				),
+				highlightInfo: EMPTY_HIGHLIGHT,
+				searchInfo: EMPTY_SEARCH_INFO,
+			})),
+		[edges, objectApiName],
+	);
+
+	const nextPageToken = pageInfo?.endCursor ?? null;
+	/** Entry cursor for the previous page; used when user clicks Previous to re-query with after=cursorStack[pageIndex-1]. */
+	const previousPageToken = pageIndex > 0 ? (cursorStack[pageIndex - 1] ?? null) : null;
+	const hasNextPage = pageInfo?.hasNextPage === true;
+	const hasPreviousPage = pageIndex > 0;
+	const currentPageToken = pageIndex.toString();
+
+	const cursorStackRef = useRef(cursorStack);
+	const pageIndexRef = useRef(pageIndex);
+	cursorStackRef.current = cursorStack;
+	pageIndexRef.current = pageIndex;
+
+	const canRenderFilters =
+		!listMeta.loading && listMeta.filters !== undefined && listMeta.picklistValues !== undefined;
+
+	const handleApplyFilters = useCallback((filterCriteria: FilterCriteria[]) => {
+		setAppliedFilters(filterCriteria);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+	}, []);
+
+	const handlePageChange = useCallback(
+		(newPageToken: string, direction?: "next" | "prev" | "first") => {
+			if (direction === "first" || newPageToken === "0") {
+				setAfterCursor(null);
+				setPageIndex(0);
+			} else if (direction === "prev") {
+				const idx = pageIndexRef.current;
+				const stack = cursorStackRef.current;
+				const prevCursor = idx > 0 ? (stack[idx - 1] ?? null) : null;
+				setAfterCursor(prevCursor);
+				setPageIndex((prev) => Math.max(0, prev - 1));
+			} else {
+				setAfterCursor(newPageToken);
+				setPageIndex((prev) => prev + 1);
+			}
+			window.scrollTo({ top: 0, behavior: "smooth" });
+		},
+		[],
+	);
+
+	const handlePageSizeChange = useCallback((newPageSize: number) => {
+		setSearchPageSize(newPageSize);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}, []);
+
+	const handleSortByChange = useCallback((newSortBy: string) => {
+		setSortBy(newSortBy);
+		setAfterCursor(null);
+		setPageIndex(0);
+		setCursorStack([null]);
+		window.scrollTo({ top: 0, behavior: "smooth" });
+	}, []);
+
+	return (
+		<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
+			<SearchHeader query={decodedQuery} isBrowseAll={isBrowseAll} labelPlural={labelPlural} />
+
+			<div className="grid grid-cols-1 lg:grid-cols-4 gap-6">
+				<aside className="lg:col-span-1" aria-label="Filters panel">
+					{canRenderFilters ? (
+						<FiltersPanel
+							filters={listMeta.filters}
+							picklistValues={listMeta.picklistValues}
+							loading={listMeta.loading}
+							objectApiName={objectApiName}
+							onApplyFilters={handleApplyFilters}
+						/>
+					) : (
+						<Card className="w-full" role="region" aria-label="Filters panel">
+							<CardHeader>
+								<CardTitle>Filters</CardTitle>
+							</CardHeader>
+							<CardContent
+								className="space-y-4"
+								role="status"
+								aria-live="polite"
+								aria-label="Loading filters"
+							>
+								<span className="sr-only">Loading filters</span>
+								{[1, 2, 3].map((i) => (
+									<div key={i} className="space-y-2" aria-hidden="true">
+										<Skeleton className="h-4 w-24" />
+										<Skeleton className="h-9 w-full" />
+									</div>
+								))}
+							</CardContent>
+						</Card>
+					)}
+				</aside>
+
+				<section className="lg:col-span-3" aria-label="Search results">
+					<SearchResultsPanel
+						objectApiName={objectApiName}
+						columns={listMeta.columns}
+						results={results}
+						columnsLoading={listMeta.loading}
+						resultsLoading={resultsLoading}
+						columnsError={listMeta.error}
+						resultsError={resultsError}
+						currentPageToken={currentPageToken}
+						nextPageToken={nextPageToken}
+						previousPageToken={previousPageToken}
+						hasNextPage={hasNextPage}
+						hasPreviousPage={hasPreviousPage}
+						pageSize={searchPageSize}
+						sortBy={sortBy}
+						onPageChange={handlePageChange}
+						onPageSizeChange={handlePageSizeChange}
+						onSortByChange={handleSortByChange}
+					/>
+				</section>
+			</div>
+		</main>
+	);
+}

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

@@ -1,12 +1,13 @@
+import { GlobalSearchInput } from "../components/shared/GlobalSearchInput";
+
 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>
-  );
+	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>
+			<GlobalSearchInput />
+		</div>
+	);
 }

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

@@ -3,6 +3,10 @@ import AppLayout from './appLayout';
 import Home from './pages/Home';
 import NotFound from './pages/NotFound';
 import TestAccPage from "./pages/TestAccPage";
+import GlobalSearch from "./pages/GlobalSearch";
+import DetailPage from "./pages/DetailPage";
+import { Suspense } from "react";
+import LoadingFallback from "./components/LoadingFallback";
 
 export const routes: RouteObject[] = [
   {
@@ -22,6 +26,24 @@ export const routes: RouteObject[] = [
         path: "test-acc",
         element: <TestAccPage />,
         handle: { showInNavigation: true, label: "Test ACC" }
+      },
+      {
+        path: "global-search/:query",
+        element: (
+					<Suspense fallback={<LoadingFallback />}>
+						<GlobalSearch />
+					</Suspense>
+				),
+        handle: { showInNavigation: false }
+      },
+      {
+        path: "object/:objectApiName/:recordId",
+        element: (
+					<Suspense fallback={<LoadingFallback />}>
+						<DetailPage />
+					</Suspense>
+				),
+        handle: { showInNavigation: false }
       }
     ]
   }

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/styles/global.css

@@ -11,3 +11,125 @@
     @apply antialiased bg-white;
   }
 }
+
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+	--color-background: var(--background);
+	--color-foreground: var(--foreground);
+	--color-card: var(--card);
+	--color-card-foreground: var(--card-foreground);
+	--color-popover: var(--popover);
+	--color-popover-foreground: var(--popover-foreground);
+	--color-primary: var(--primary);
+	--color-primary-foreground: var(--primary-foreground);
+	--color-secondary: var(--secondary);
+	--color-secondary-foreground: var(--secondary-foreground);
+	--color-muted: var(--muted);
+	--color-muted-foreground: var(--muted-foreground);
+	--color-accent: var(--accent);
+	--color-accent-foreground: var(--accent-foreground);
+	--color-destructive: var(--destructive);
+	--color-destructive-foreground: var(--destructive-foreground);
+	--color-border: var(--border);
+	--color-input: var(--input);
+	--color-ring: var(--ring);
+	--color-chart-1: var(--chart-1);
+	--color-chart-2: var(--chart-2);
+	--color-chart-3: var(--chart-3);
+	--color-chart-4: var(--chart-4);
+	--color-chart-5: var(--chart-5);
+	--radius-sm: calc(var(--radius) - 4px);
+	--radius-md: calc(var(--radius) - 2px);
+	--radius-lg: var(--radius);
+	--radius-xl: calc(var(--radius) + 4px);
+	--color-sidebar: var(--sidebar);
+	--color-sidebar-foreground: var(--sidebar-foreground);
+	--color-sidebar-primary: var(--sidebar-primary);
+	--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+	--color-sidebar-accent: var(--sidebar-accent);
+	--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+	--color-sidebar-border: var(--sidebar-border);
+	--color-sidebar-ring: var(--sidebar-ring);
+}
+
+:root {
+	--radius: 0.625rem;
+	--background: oklch(1 0 0);
+	--foreground: oklch(0.145 0 0);
+	--card: oklch(1 0 0);
+	--card-foreground: oklch(0.145 0 0);
+	--popover: oklch(1 0 0);
+	--popover-foreground: oklch(0.145 0 0);
+	--primary: oklch(0.205 0 0);
+	--primary-foreground: oklch(0.985 0 0);
+	--secondary: oklch(0.97 0 0);
+	--secondary-foreground: oklch(0.205 0 0);
+	--muted: oklch(0.97 0 0);
+	--muted-foreground: oklch(0.556 0 0);
+	--accent: oklch(0.97 0 0);
+	--accent-foreground: oklch(0.205 0 0);
+	--destructive: oklch(0.577 0.245 27.325);
+	--border: oklch(0.922 0 0);
+	--input: oklch(0.922 0 0);
+	--ring: oklch(0.708 0 0);
+	--chart-1: oklch(0.646 0.222 41.116);
+	--chart-2: oklch(0.6 0.118 184.704);
+	--chart-3: oklch(0.398 0.07 227.392);
+	--chart-4: oklch(0.828 0.189 84.429);
+	--chart-5: oklch(0.769 0.188 70.08);
+	--sidebar: oklch(0.985 0 0);
+	--sidebar-foreground: oklch(0.145 0 0);
+	--sidebar-primary: oklch(0.205 0 0);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.97 0 0);
+	--sidebar-accent-foreground: oklch(0.205 0 0);
+	--sidebar-border: oklch(0.922 0 0);
+	--sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+	--background: oklch(0.145 0 0);
+	--foreground: oklch(0.985 0 0);
+	--card: oklch(0.205 0 0);
+	--card-foreground: oklch(0.985 0 0);
+	--popover: oklch(0.205 0 0);
+	--popover-foreground: oklch(0.985 0 0);
+	--primary: oklch(0.922 0 0);
+	--primary-foreground: oklch(0.205 0 0);
+	--secondary: oklch(0.269 0 0);
+	--secondary-foreground: oklch(0.985 0 0);
+	--muted: oklch(0.269 0 0);
+	--muted-foreground: oklch(0.708 0 0);
+	--accent: oklch(0.269 0 0);
+	--accent-foreground: oklch(0.985 0 0);
+	--destructive: oklch(0.704 0.191 22.216);
+	--border: oklch(1 0 0 / 10%);
+	--input: oklch(1 0 0 / 15%);
+	--ring: oklch(0.556 0 0);
+	--chart-1: oklch(0.488 0.243 264.376);
+	--chart-2: oklch(0.696 0.17 162.48);
+	--chart-3: oklch(0.769 0.188 70.08);
+	--chart-4: oklch(0.627 0.265 303.9);
+	--chart-5: oklch(0.645 0.246 16.439);
+	--sidebar: oklch(0.205 0 0);
+	--sidebar-foreground: oklch(0.985 0 0);
+	--sidebar-primary: oklch(0.488 0.243 264.376);
+	--sidebar-primary-foreground: oklch(0.985 0 0);
+	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent-foreground: oklch(0.985 0 0);
+	--sidebar-border: oklch(1 0 0 / 10%);
+	--sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+	* {
+		@apply border-border outline-ring/50;
+	}
+	body {
+		@apply bg-background text-foreground;
+	}
+}

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/types/filters/filters.ts

@@ -0,0 +1,120 @@
+import { z } from "zod";
+
+/**
+ * Type definitions for filter structures
+ * All types are derived from Zod schemas using z.infer for type safety
+ */
+
+/**
+ * Allowed filter operators for Salesforce search queries
+ */
+export const FILTER_OPERATORS = [
+	"eq", // Equals
+	"ne", // Not equals
+	"like", // Pattern matching (contains)
+	"gt", // Greater than
+	"gte", // Greater than or equal
+	"lt", // Less than
+	"lte", // Less than or equal
+] as const;
+
+/**
+ * Filter operator type
+ */
+export type FilterOperator = (typeof FILTER_OPERATORS)[number];
+
+/**
+ * Salesforce field path validation regex
+ * Validates field paths like:
+ * - Simple fields: "Name", "FieldName__c"
+ * - Relationship fields: "Account__r.Name", "Owner__r.FieldName__c"
+ * - Nested relationships: "Account__r.Owner__r.Name"
+ *
+ * Pattern explanation:
+ * - ^[A-Za-z][A-Za-z0-9_]* - Starts with letter, followed by letters/numbers/underscores
+ * - (__[cr])? - Optional relationship suffix (__r or __c)
+ * - (\.[A-Za-z][A-Za-z0-9_]*(__[cr])?)* - Optional relationship traversal (dot notation)
+ */
+const SALESFORCE_FIELD_PATH_REGEX =
+	/^[A-Za-z][A-Za-z0-9_]*(__[cr])?(\.[A-Za-z][A-Za-z0-9_]*(__[cr])?)*$/;
+
+/**
+ * Validates Salesforce field path format
+ * @param fieldPath - The field path to validate
+ * @returns true if valid, false otherwise
+ */
+function isValidSalesforceFieldPath(fieldPath: string): boolean {
+	if (!fieldPath || fieldPath.trim().length === 0) {
+		return false;
+	}
+	return SALESFORCE_FIELD_PATH_REGEX.test(fieldPath);
+}
+
+// Zod Schema for Filter Attributes
+const FilterAttributesSchema = z.object({
+	affordance: z.string().optional(),
+	placeholder: z.string().optional(),
+});
+
+/**
+ * Filter attributes containing input-specific properties
+ */
+export type FilterAttributes = z.infer<typeof FilterAttributesSchema>;
+
+// Zod Schema for Filter
+const FilterSchema = z.object({
+	affordance: z.string(),
+	attributes: FilterAttributesSchema.optional(),
+	defaultValues: z.array(z.string()).optional(),
+	helpMessage: z.string().nullable().optional(),
+	label: z.string(),
+	targetFieldPath: z.string().refine((value) => isValidSalesforceFieldPath(value), {
+		message:
+			"Invalid Salesforce field path format. Field paths must start with a letter and can contain letters, numbers, underscores, and relationship notation (__r or __c). Use dot notation for relationships (e.g., 'Account__r.Name').",
+	}),
+	type: z.string(),
+});
+
+/**
+ * Single filter definition from getObjectListFilters API
+ */
+export type Filter = z.infer<typeof FilterSchema>;
+
+// Export schema for validation
+export const FilterArraySchema = z.array(FilterSchema);
+
+// Zod Schema for Filter Criteria with operator and field path validation
+const FilterCriteriaSchema = z.object({
+	objectApiName: z.string().min(1, "Object API name is required"),
+	fieldPath: z
+		.string()
+		.min(1, "Field path is required")
+		.refine((value) => isValidSalesforceFieldPath(value), {
+			message:
+				"Invalid Salesforce field path format. Field paths must start with a letter and can contain letters, numbers, underscores, and relationship notation (__r or __c). Use dot notation for relationships (e.g., 'Account__r.Name').",
+		}),
+	operator: z.enum(FILTER_OPERATORS, {
+		message: `Operator must be one of: ${FILTER_OPERATORS.join(", ")}`,
+	}),
+	values: z.array(z.union([z.string(), z.number()])).min(1, "At least one value is required"),
+});
+
+/**
+ * Filter criteria structure for filtering search results
+ */
+export type FilterCriteria = z.infer<typeof FilterCriteriaSchema>;
+
+// Export schema for validation
+export const FilterCriteriaArraySchema = z.array(FilterCriteriaSchema);
+
+// Zod Schema for Filters Response
+const FiltersResponseSchema = z.record(z.string(), z.unknown()).and(
+	z.object({
+		filters: FilterArraySchema.optional(),
+	}),
+);
+
+/**
+ * Filters response structure
+ */
+export type FiltersResponse = z.infer<typeof FiltersResponseSchema>;

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/types/filters/picklist.ts

@@ -0,0 +1,32 @@
+import { z } from "zod";
+
+/**
+ * Type definitions for picklist value structures
+ */
+
+// Zod Schema for Picklist Value
+const PicklistValueSchema = z
+	.object({
+		// 1. Cleanup: Attributes are usually an object, not just 'unknown'
+		attributes: z.record(z.string(), z.unknown()).nullish(),
+		label: z.string(),
+
+		// 2. Precise Typing: 'validFor' is an array of indices (numbers)
+		// pointing to the controlling field's values.
+		validFor: z.array(z.number()).nullish(),
+		value: z.string(),
+
+		// 3. Usability: Added common API fields that are useful for UI logic
+		// (marked optional in case the specific API version omits them)
+		defaultValue: z.boolean().nullish(),
+		active: z.boolean().nullish(),
+	})
+	.passthrough();
+
+/**
+ * Single picklist value from the API
+ */
+export type PicklistValue = z.infer<typeof PicklistValueSchema>;
+
+// Export schema for validation
+export const PicklistValueArraySchema = z.array(PicklistValueSchema);

package/dist/force-app/main/default/webapplications/appreacttemplateb2e/src/types/index.ts

@@ -0,0 +1,4 @@
+export * from "./filters/filters";
+export * from "./objectInfo/objectInfo";
+export * from "./recordDetail/recordDetail";
+export * from "./search/searchResults";