@salesforce/templates 66.13.5 → 66.13.7

package/lib/templates/project/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_p_/_m_/_w_/_a_/src/api/graphqlClient.ts

@@ -1,19 +1,35 @@
 /**
- * Thin GraphQL client: createDataSDK + sdk.graphql.query with centralized
- * error handling. Use with gql-tagged queries and generated operation types
- * for type-safe calls.
+ * Thin GraphQL client: createDataSDK + sdk.graphql with centralized error
+ * handling. Mutations are routed to sdk.graphql.mutate and everything else to
+ * sdk.graphql.query (the SDK rejects an operation sent to the wrong method).
+ * Use with gql-tagged queries and generated operation types for type-safe calls.
  */
 import { createDataSDK } from '@salesforce/platform-sdk';
 
+/**
+ * True when the operation's first definition is a `mutation`. Strips GraphQL
+ * comments first so a leading `# ...` line can't mask the keyword. Queries
+ * (named or anonymous `{ ... }` shorthand) and subscriptions fall through to
+ * query().
+ */
+function isMutation(operation: string): boolean {
+  return /^\s*mutation\b/.test(operation.replace(/#[^\n\r]*/g, ''));
+}
+
 export async function executeGraphQL<TData, TVariables>(
-  query: string,
+  operation: string,
   variables?: TVariables
 ): Promise<TData> {
   const data = await createDataSDK();
-  const result = await data.graphql!.query<TData, TVariables>({
-    query: query,
-    variables: variables,
-  });
+  const result = isMutation(operation)
+    ? await data.graphql!.mutate<TData, TVariables>({
+        mutation: operation,
+        variables: variables,
+      })
+    : await data.graphql!.query<TData, TVariables>({
+        query: operation,
+        variables: variables,
+      });
 
   if (result.errors?.length) {
     const msg = result.errors.map(e => e.message).join('; ');

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/appLayout.tsx

@@ -3,6 +3,7 @@ import { getAllRoutes } from "./router-utils";
 import { useState } from "react";
 import { AuthMenu } from "./features/authentication/menu/AuthMenu";
 import { Button } from "./components/ui/button";
+import CustomerWebClientChat from "./components/CustomerWebClientChat";
 
 export default function AppLayout() {
 	const [isOpen, setIsOpen] = useState(false);
@@ -83,6 +84,12 @@ export default function AppLayout() {
 				</div>
 			</nav>
 			<Outlet />
+			<CustomerWebClientChat
+				orgId="<ORG_ID_15_OR_18_CHAR_00D...>"
+				deploymentName="<EMBEDDED_SERVICE_DEPLOYMENT_NAME>"
+				siteURL="<SITE_URL>"
+				scrt2URL="<SCRT2_URL>"
+			/>
 		</>
 	);
 }

package/lib/templates/project/reactexternalapp/_p_/_m_/_w_/_a_/src/components/CustomerWebClientChat.tsx

@@ -0,0 +1,74 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import { useEffect } from "react";
+import type { CustomerWebClientChatProps, WindowWithCwcProperties } from "../types/chat";
+
+/**
+ * React wrapper that embeds the Customer Web Client (Embedded Messaging) chat
+ * widget into an external site. It dynamically loads the site's
+ * `embeddedservice_bootstrap` script and calls `init` with the org, deployment,
+ * site, and SCRT2 configuration. Renders nothing itself — the chat UI is a
+ * floating widget injected by the bootstrap script.
+ */
+export function CustomerWebClientChat({
+	orgId,
+	deploymentName,
+	siteURL,
+	scrt2URL,
+	language = "en",
+	devMode = false,
+}: CustomerWebClientChatProps) {
+	useEffect(() => {
+		if (typeof window === "undefined") return;
+		if (
+			!orgId ||
+			!deploymentName ||
+			!siteURL ||
+			!scrt2URL ||
+			!(orgId.length === 15 || orgId.length === 18)
+		) {
+			console.warn("[CustomerWebClientChat] missing required config; skipping init");
+			return;
+		}
+
+		const win = window as WindowWithCwcProperties;
+		const bootstrapSrc = `${siteURL}/assets/js/bootstrap.js`;
+		const existing = document.querySelector<HTMLScriptElement>(`script[src="${bootstrapSrc}"]`);
+		const script: HTMLScriptElement = existing ?? document.createElement("script");
+
+		const init = () => {
+			try {
+				if (!win.embeddedservice_bootstrap) return;
+				win.embeddedservice_bootstrap.settings.language = language;
+				if (devMode) win.embeddedservice_bootstrap.settings.devMode = true;
+				win.embeddedservice_bootstrap.init(orgId, deploymentName, siteURL, {
+					scrt2URL,
+				});
+			} catch (err) {
+				console.error("Error loading Embedded Messaging: ", err);
+			}
+		};
+
+		if (existing) {
+			if (win.embeddedservice_bootstrap) init();
+			else existing.addEventListener("load", init, { once: true });
+		} else {
+			script.type = "text/javascript";
+			script.src = bootstrapSrc;
+			script.addEventListener("load", init, { once: true });
+			document.body.appendChild(script);
+		}
+
+		return () => {
+			script.removeEventListener("load", init);
+		};
+	}, [orgId, deploymentName, siteURL, scrt2URL, language, devMode]);
+
+	return null;
+}
+
+export default CustomerWebClientChat;

package/lib/templates/project/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_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/reactexternalapp/_p_/_m_/_w_/_a_/src/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.,
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+/** Package entry point — re-exports the language switcher public API. */
+export * from "./features/language-switcher/index";

package/lib/templates/project/reactexternalapp/_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 },
 	});
@@ -156,7 +189,9 @@ function AccountDetailContent({ account }: { account: AccountNode }) {
 							<FieldItem label="Industry">{fieldValue(account.Industry)}</FieldItem>
 							<FieldItem label="Annual Revenue">{fieldValue(account.AnnualRevenue)}</FieldItem>
 						</FieldRow>
-						<FieldItem label="Description">{fieldValue(account.Description)}</FieldItem>
+						<dl>
+							<FieldItem label="Description">{fieldValue(account.Description)}</FieldItem>
+						</dl>
 					</Section>
 
 					<Separator />
@@ -216,7 +251,7 @@ function FieldItem({ label, children }: { label: string; children: React.ReactNo
 }
 
 function FieldRow({ children }: { children: React.ReactNode }) {
-	return <div className="grid grid-cols-2 gap-x-8 gap-y-4">{children}</div>;
+	return <dl className="grid grid-cols-2 gap-x-8 gap-y-4">{children}</dl>;
 }
 
 function Section({ title, children }: { title: string; children: React.ReactNode }) {

package/lib/templates/project/reactexternalapp/_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>
 	);
 }