@salesforce/ui-bundle-template-app-react-template-b2x 1.117.2

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/pages/AccountSearch.tsx

@@ -0,0 +1,305 @@
+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: "datetime" },
+	{ field: "LastModifiedDate", label: "Last Modified Date", type: "datetimerange" },
+];
+
+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-1 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" filterType="datetime" />
+										<DateRangeFilter
+											field="LastModifiedDate"
+											label="Last Modified Date"
+											filterType="datetimerange"
+										/>
+									</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/uiBundles/reactexternalapp/src/pages/Home.tsx

@@ -0,0 +1,34 @@
+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/uiBundles/reactexternalapp/src/pages/NotFound.tsx

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

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/router-utils.tsx

@@ -0,0 +1,35 @@
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
+
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
+
+  const routeWithPath = { ...route, fullPath };
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/routes.tsx

@@ -0,0 +1,81 @@
+import type { RouteObject } from 'react-router';
+import Home from './pages/Home';
+import NotFound from './pages/NotFound';
+import Login from "./features/authentication/pages/Login";
+import Register from "./features/authentication/pages/Register";
+import ForgotPassword from "./features/authentication/pages/ForgotPassword";
+import ResetPassword from "./features/authentication/pages/ResetPassword";
+import Profile from "./features/authentication/pages/Profile";
+import ChangePassword from "./features/authentication/pages/ChangePassword";
+import AuthenticationRoute from "./features/authentication/layouts/authenticationRouteLayout";
+import PrivateRoute from "./features/authentication/layouts/privateRouteLayout";
+import { ROUTES } from "./features/authentication/authenticationConfig";
+import AccountSearch from "./pages/AccountSearch";
+import AccountObjectDetail from "./pages/AccountObjectDetailPage";
+import AuthAppLayout from "./features/authentication/layouts/AuthAppLayout";
+
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AuthAppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, label: "Home" }
+      },
+      {
+        path: '*',
+        element: <NotFound />
+      },
+      {
+        element: <AuthenticationRoute />,
+        children: [
+          {
+            path: ROUTES.LOGIN.PATH,
+            element: <Login />,
+            handle: { showInNavigation: true, label: "Login", title: ROUTES.LOGIN.TITLE }
+          },
+          {
+            path: ROUTES.REGISTER.PATH,
+            element: <Register />,
+            handle: { showInNavigation: false, title: ROUTES.REGISTER.TITLE }
+          },
+          {
+            path: ROUTES.FORGOT_PASSWORD.PATH,
+            element: <ForgotPassword />,
+            handle: { showInNavigation: false, title: ROUTES.FORGOT_PASSWORD.TITLE }
+          },
+          {
+            path: ROUTES.RESET_PASSWORD.PATH,
+            element: <ResetPassword />,
+            handle: { showInNavigation: false, title: ROUTES.RESET_PASSWORD.TITLE }
+          }
+        ]
+      },
+      {
+        element: <PrivateRoute showCardSkeleton />,
+        children: [
+          {
+            path: ROUTES.PROFILE.PATH,
+            element: <Profile />,
+            handle: { showInNavigation: true, label: "Profile", title: ROUTES.PROFILE.TITLE }
+          },
+          {
+            path: ROUTES.CHANGE_PASSWORD.PATH,
+            element: <ChangePassword />,
+            handle: { showInNavigation: false, title: ROUTES.CHANGE_PASSWORD.TITLE }
+          }
+        ]
+      },
+      {
+        path: "accounts/:recordId",
+        element: <AccountObjectDetail />
+      },
+      {
+        path: "accounts",
+        element: <AccountSearch />
+      }
+    ]
+  }
+];

package/dist/force-app/main/default/uiBundles/reactexternalapp/src/styles/global.css

@@ -0,0 +1,135 @@
+@import 'tailwindcss';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @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/uiBundles/reactexternalapp/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+
+    /* Path mapping */
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@api/*": ["./src/api/*"],
+      "@components/*": ["./src/components/*"],
+      "@utils/*": ["./src/utils/*"],
+      "@styles/*": ["./src/styles/*"],
+      "@assets/*": ["./src/assets/*"]
+    }
+  },
+  "include": [
+    "src",
+    "e2e",
+    "vite-env.d.ts",
+    "vitest-env.d.ts",
+    "vitest.setup.ts"
+  ],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/dist/force-app/main/default/uiBundles/reactexternalapp/tsconfig.node.json

@@ -0,0 +1,13 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "outDir": "./build"
+  },
+  "include": ["vite.config.ts"]
+}

package/dist/force-app/main/default/uiBundles/reactexternalapp/ui-bundle.json

@@ -0,0 +1,7 @@
+{
+  "outputDir": "dist",
+  "routing": {
+    "trailingSlash": "never",
+    "fallback": "index.html"
+  }
+}

package/dist/force-app/main/default/uiBundles/reactexternalapp/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />