@salesforce/templates 66.13.5 → 66.13.7

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/search/utils/filterUtils.ts

@@ -0,0 +1,285 @@
+/**
+ * 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";
+
+/**
+ * Which comparison UI a date/datetime filter exposes:
+ *   - `"range"`: a single Between control (two date inputs, lower–upper bound).
+ *   - `"comparison"`: an After / Before selector with one date input.
+ *   - `"both"`: a Between / After / Before selector that switches between the two.
+ *
+ * Applies only to the date-family `type`s (`date`, `daterange`, `datetime`,
+ * `datetimerange`); ignored for other field types. Defaults to `"comparison"`.
+ */
+export type DateFilterMode = "range" | "comparison" | "both";
+
+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 }>;
+	/** Date-family only — see {@link DateFilterMode}. Defaults to `"comparison"`. */
+	dateMode?: DateFilterMode;
+	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/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/_f_/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/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/AgentforceConversationClient.tsx

@@ -6,59 +6,21 @@
 
 import { embedAgentforceClient } from "@salesforce/agentforce-conversation-client";
 import type { AgentforceClientConfig } from "@salesforce/agentforce-conversation-client";
+import { createAccEmbedder } from "@salesforce/agentforce-conversation-client/ui-bundle";
 import { useEffect, useMemo, useRef } from "react";
-import type {
-	ResolvedEmbedOptions,
-	AgentforceConversationClientProps,
-} from "../types/conversation";
+import type { AgentforceConversationClientProps } from "../types/conversation";
 
-const GLOBAL_HOST_ID = "agentforce-conversation-client-global-host";
-const SINGLETON_KEY = "__agentforceConversationClientSingleton";
-
-interface AgentforceConversationClientSingleton {
-	initPromise?: Promise<void>;
-	initialized: boolean;
-}
-
-interface WindowWithAgentforceSingleton extends Window {
-	[SINGLETON_KEY]?: AgentforceConversationClientSingleton;
-}
-
-type GlobalWithSfdcEnv = typeof globalThis & {
-	SFDC_ENV?: {
-		orgUrl?: string;
-	};
-};
-
-function getSingleton(): AgentforceConversationClientSingleton {
-	const win = window as WindowWithAgentforceSingleton;
-	if (!win[SINGLETON_KEY]) {
-		win[SINGLETON_KEY] = {
-			initialized: false,
-		};
-	}
-	return win[SINGLETON_KEY]!;
-}
-
-function getOrCreateGlobalHost(): HTMLDivElement {
-	let host = document.getElementById(GLOBAL_HOST_ID) as HTMLDivElement | null;
-	if (!host) {
-		host = document.createElement("div");
-		host.id = GLOBAL_HOST_ID;
-		document.body.appendChild(host);
-	}
-	return host;
-}
-
-function getDefaultEmbedOptions(): ResolvedEmbedOptions {
-	const sfdcEnv = (globalThis as GlobalWithSfdcEnv).SFDC_ENV;
-	return { salesforceOrigin: sfdcEnv?.orgUrl };
-}
+// The embed orchestration (window singleton, global host, dev frontdoor fetch,
+// SFDC_ENV default, partial-embed cleanup) lives in the shared, framework-agnostic
+// @salesforce/agentforce-conversation-client/ui-bundle glue. We hand it the
+// low-level embed function via dependency injection.
+const embedder = createAccEmbedder<AgentforceClientConfig>(embedAgentforceClient);
 
 /**
  * React wrapper that embeds the Agentforce Conversation Client (copilot/agent UI)
  * using Lightning Out. Requires a valid Salesforce session for the given org.
- * Config is passed through from the consumer to the embed client as-is.
+ * Flat props are normalized into an `AgentforceClientConfig` and passed through
+ * to the shared embedder as-is.
  */
 export function AgentforceConversationClient({
 	agentId,
@@ -109,96 +71,18 @@ export function AgentforceConversationClient({
 	const inline = normalizedAgentforceClientConfig?.renderingConfig?.mode === "inline";
 
 	useEffect(() => {
-		if (!normalizedAgentforceClientConfig?.agentId) {
-			throw new Error(
-				"AgentforceConversationClient requires agentId. " +
-					"Pass flat props only (agentId, agentLabel, inline, headerEnabled, showHeaderIcon, width, height, styleTokens).",
-			);
-		}
-
-		const singleton = getSingleton();
-		if (singleton.initialized || singleton.initPromise) {
-			return;
-		}
-
-		if (inline && !containerRef.current) {
-			return;
-		}
-
-		const initialize = (options: ResolvedEmbedOptions) => {
-			if (singleton.initialized) {
-				return;
-			}
-			const existingEmbed = document.querySelector('lightning-out-application[data-lo="acc"]');
-			if (existingEmbed) {
-				singleton.initialized = true;
-				return;
-			}
-			const host = inline ? containerRef.current! : getOrCreateGlobalHost();
-
-			try {
-				embedAgentforceClient({
-					container: host,
-					salesforceOrigin: salesforceOrigin ?? options.salesforceOrigin,
-					frontdoorUrl: frontdoorUrl ?? options.frontdoorUrl,
-					agentforceClientConfig: normalizedAgentforceClientConfig,
-					onReady,
-					onError,
-				});
-				singleton.initialized = true;
-			} catch (err) {
-				// Strip a partially-created LO element so the next mount can retry.
-				const partialEmbed = document.querySelector('lightning-out-application[data-lo="acc"]');
-				partialEmbed?.remove();
-				console.error("AgentforceConversationClient: initialization failed", err);
-			}
-		};
-
-		const safeInitialize = (options: ResolvedEmbedOptions) => {
-			try {
-				initialize(options);
-			} catch (initErr) {
-				console.error("AgentforceConversationClient: initialization failed", initErr);
-				singleton.initialized = false;
-			}
-		};
-
-		const shouldFetchFrontdoor = window.location.hostname === "localhost";
-
-		if (shouldFetchFrontdoor) {
-			singleton.initPromise = fetch("/__lo/frontdoor")
-				.then(async (res) => {
-					if (!res.ok) {
-						console.error("frontdoor fetch failed");
-						return;
-					}
-					const { frontdoorUrl: resolvedFrontdoorUrl } = await res.json();
-					safeInitialize({ frontdoorUrl: resolvedFrontdoorUrl });
-				})
-				.catch((err) => {
-					console.error("AgentforceConversationClient: failed to fetch frontdoor URL", err);
-				})
-				.finally(() => {
-					singleton.initPromise = undefined;
-				});
-		} else {
-			singleton.initPromise = Promise.resolve()
-				.then(() => {
-					safeInitialize(getDefaultEmbedOptions());
-				})
-				.catch((err) => {
-					console.error("AgentforceConversationClient: failed to embed Agentforce client", err);
-				})
-				.finally(() => {
-					singleton.initPromise = undefined;
-				});
-		}
+		embedder.embedAcc(
+			normalizedAgentforceClientConfig,
+			{ salesforceOrigin, frontdoorUrl },
+			containerRef.current,
+			{ onReady, onError },
+		);
 
 		return () => {
 			// Intentionally no cleanup:
 			// This component guarantees a single LO initialization per window.
 		};
-	}, [salesforceOrigin, frontdoorUrl, normalizedAgentforceClientConfig, inline, onReady, onError]);
+	}, [salesforceOrigin, frontdoorUrl, normalizedAgentforceClientConfig, onReady, onError]);
 
 	if (!inline) {
 		return null;

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/{_f_/_os_/components → components}/ObjectBreadcrumb.tsx

@@ -6,9 +6,14 @@ import {
 	BreadcrumbLink,
 	BreadcrumbSeparator,
 	BreadcrumbPage,
-} from "../../../components/ui/breadcrumb";
-import { Skeleton } from "../../../components/ui/skeleton";
+} from "./ui/breadcrumb";
+import { Skeleton } from "./ui/skeleton";
 
+/**
+ * Home → List → Record breadcrumb for object pages. Previously imported from
+ * feature-react-object-search; inlined here so the app no longer depends on
+ * that feature.
+ */
 interface ObjectBreadcrumbProps {
 	listPath: string;
 	listLabel: string;

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/ui/button.tsx

@@ -17,7 +17,7 @@ const buttonVariants = cva(
         ghost:
           'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
         destructive:
-          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-red-700 dark:text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/ui/datePicker.tsx

@@ -38,7 +38,7 @@ function DatePickerTrigger({
         data-slot="date-picker-trigger"
         data-empty={!date}
         className={cn(
-          'w-[280px] justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
+          'w-[280px] justify-start text-left font-normal data-[empty=true]:text-gray-600',
           className
         )}
         {...props}
@@ -87,7 +87,7 @@ function DatePickerRangeTrigger({
         data-slot="date-picker-range-trigger"
         data-empty={!hasDate}
         className={cn(
-          'justify-start text-left font-normal data-[empty=true]:text-muted-foreground',
+          'justify-start text-left font-normal data-[empty=true]:text-gray-600',
           className
         )}
         {...props}

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/components/ui/table.tsx

@@ -2,11 +2,18 @@ import * as React from 'react';
 
 import { cn } from '../../lib/utils';
 
-function Table({ className, ...props }: React.ComponentProps<'table'>) {
+function Table({
+  className,
+  'aria-label': ariaLabel = 'Table',
+  ...props
+}: React.ComponentProps<'table'>) {
   return (
     <div
       data-slot="table-container"
-      className="relative w-full overflow-x-auto"
+      role="region"
+      aria-label={ariaLabel}
+      tabIndex={0}
+      className="relative w-full overflow-x-auto focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary-purple"
     >
       <table
         data-slot="table"

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/pages/AccountObjectDetailPage.tsx

@@ -3,18 +3,10 @@ import { useParams, useNavigate } from "react-router";
 import { createDataSDK } from "@salesforce/platform-sdk";
 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 { fieldValue, getAddressFieldLines, formatDateTimeField } from "../utils/accountFields";
 import {
 	Collapsible,
 	CollapsibleTrigger,
@@ -23,17 +15,58 @@ import {
 import { Separator } from "../components/ui/separator";
 import { Skeleton } from "../components/ui/skeleton";
 import { useAsyncData } from "../hooks/useAsyncData";
-import { ObjectBreadcrumb } from "../features/object-search/components/ObjectBreadcrumb";
+import { ObjectBreadcrumb } from "../components/ObjectBreadcrumb";
+
+/**
+ * A uiapi scalar field as returned with `@optional { value displayValue }`.
+ * Typed locally so this page no longer depends on the generated
+ * `graphql-operations-types` that shipped with feature-react-object-search.
+ */
+type FieldValue = { value?: unknown; displayValue?: string | null } | null;
+type NameHolder = { Name?: FieldValue } | null;
+
+interface AccountNode {
+	Id?: string;
+	Name?: FieldValue;
+	Owner?: NameHolder;
+	Phone?: FieldValue;
+	Fax?: FieldValue;
+	Parent?: NameHolder;
+	Website?: FieldValue;
+	Type?: FieldValue;
+	NumberOfEmployees?: FieldValue;
+	Industry?: FieldValue;
+	AnnualRevenue?: FieldValue;
+	Description?: FieldValue;
+	BillingStreet?: FieldValue;
+	BillingCity?: FieldValue;
+	BillingState?: FieldValue;
+	BillingPostalCode?: FieldValue;
+	BillingCountry?: FieldValue;
+	ShippingStreet?: FieldValue;
+	ShippingCity?: FieldValue;
+	ShippingState?: FieldValue;
+	ShippingPostalCode?: FieldValue;
+	ShippingCountry?: FieldValue;
+	CreatedBy?: NameHolder;
+	CreatedDate?: FieldValue;
+	LastModifiedBy?: NameHolder;
+	LastModifiedDate?: FieldValue;
+}
 
-type AccountNode = NonNullable<
-	NonNullable<
-		NonNullable<NonNullable<GetAccountDetailQuery["uiapi"]["query"]["Account"]>["edges"]>[number]
-	>["node"]
->;
+interface GetAccountDetailResponse {
+	uiapi?: {
+		query?: {
+			Account?: {
+				edges?: Array<{ node?: AccountNode } | null> | null;
+			} | null;
+		} | null;
+	} | null;
+}
 
 async function fetchAccountDetail(recordId: string): Promise<AccountNode | null | undefined> {
 	const data = await createDataSDK();
-	const result = await data.graphql!.query<GetAccountDetailQuery, GetAccountDetailQueryVariables>({
+	const result = await data.graphql!.query<GetAccountDetailResponse, { id: string }>({
 		query: GET_ACCOUNT_DETAIL,
 		variables: { id: recordId },
 	});

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/pages/Home.tsx

@@ -1,34 +1,10 @@
-import { useState } from "react";
-import { useNavigate } from "react-router";
-import { SearchBar } from "../features/object-search/components/SearchBar";
-import { Button } from "../components/ui/button";
+import { GlobalSearchBox } from "../features/search";
 
 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>
+			<h1 className="text-2xl font-bold mb-6">Home</h1>
+			<GlobalSearchBox placeholder="Search accounts, contacts, opportunities..." />
 		</div>
 	);
 }