@salesforce/webapp-template-app-react-template-vibe-experimental 1.53.1 → 1.54.0

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

@@ -4,7 +4,7 @@
   "version": "1.0.0",
   "type": "module",
   "scripts": {
-    "start": "vite",
+    "dev": "vite",
     "build": "tsc -b && vite build",
     "build:e2e": "npm run build && node scripts/rewrite-e2e-assets.mjs",
     "lint": "eslint .",
@@ -14,7 +14,7 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/agentforce-conversation-client": "^1.53.0",
+    "@salesforce/agentforce-conversation-client": "^1.53.2",
     "@salesforce/sdk-data": "^1.11.2",
     "@salesforce/webapp-experimental": "*",
     "@tailwindcss/vite": "^4.1.17",

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/HomePage.tsx

@@ -190,7 +190,7 @@ Be sure to also change the footer background. Remember to change every component
 
 6. Limit the query to the first 20 accounts for performance.
 
-7. Use the existing executeGraphQL utility function from @/api/graphql for the GraphQL query."
+7. Use getDataSDK() from @salesforce/webapp-experimental/api, then call data.graphql?.() for the GraphQL query."
 						/>
 					</PromptHighlight>
 

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/api/utils/accounts.ts

@@ -1,4 +1,4 @@
-import { executeGraphQL } from '@salesforce/webapp-experimental/api';
+import { getDataSDK } from '@salesforce/webapp-experimental/api';
 import HIGH_REVENUE_ACCOUNTS_QUERY from './query/highRevenueAccountsQuery.graphql?raw';
 import type {
   GetHighRevenueAccountsQuery,
@@ -24,10 +24,18 @@ type AccountNode = NonNullable<
 export async function getHighRevenueAccounts(
   variables: GetHighRevenueAccountsQueryVariables
 ): Promise<(AccountNode | null | undefined)[]> {
-  const response = await executeGraphQL<GetHighRevenueAccountsQuery>(
-    HIGH_REVENUE_ACCOUNTS_QUERY,
-    variables
-  );
+  const data = await getDataSDK();
+  const response = await data.graphql?.<
+    GetHighRevenueAccountsQuery,
+    GetHighRevenueAccountsQueryVariables
+  >(HIGH_REVENUE_ACCOUNTS_QUERY, variables);
+
+  if (response?.errors?.length) {
+    const errorMessages = response.errors.map(e => e.message).join('; ');
+    throw new Error(`GraphQL Error: ${errorMessages}`);
+  }
 
-  return response.uiapi?.query?.Account?.edges?.map(edge => edge?.node) || [];
+  return (
+    response?.data?.uiapi?.query?.Account?.edges?.map(edge => edge?.node) || []
+  );
 }

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/appLayout.tsx

@@ -1,19 +1,83 @@
-/**
- * Copyright (c) 2026, Salesforce, Inc.
- * All rights reserved.
- * For full license text, see the LICENSE.txt file
- */
+import { Outlet, Link, useLocation } from 'react-router';
+import { getAllRoutes } from './router-utils';
+import { useState } from 'react';
 
-import { Outlet } from "react-router";
-import NavigationMenu from "./navigationMenu";
-import AgentforceConversationClient from "./components/AgentforceConversationClient";
+export default function AppLayout() {
+  const [isOpen, setIsOpen] = useState(false);
+  const location = useLocation();
 
-export default function AppLayout(): React.ReactElement {
-	return (
-		<>
-			<NavigationMenu />
-			<Outlet />
-			<AgentforceConversationClient />
-		</>
-	);
+  const isActive = (path: string) => location.pathname === path;
+
+  const toggleMenu = () => setIsOpen(!isOpen);
+
+  const navigationRoutes: { path: string; label: string }[] = getAllRoutes()
+    .filter(
+      route =>
+        route.handle?.showInNavigation === true &&
+        route.fullPath !== undefined &&
+        route.handle?.label !== undefined
+    )
+    .map(
+      route =>
+        ({
+          path: route.fullPath,
+          label: route.handle?.label,
+        }) as { path: string; label: string }
+    );
+
+  return (
+    <>
+      <nav className="bg-white border-b border-gray-200">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+          <div className="flex justify-between items-center h-16">
+            <Link to="/" className="text-xl font-semibold text-gray-900">
+              React App
+            </Link>
+            <button
+              onClick={toggleMenu}
+              className="p-2 rounded-md text-gray-700 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-blue-500"
+              aria-label="Toggle menu"
+            >
+              <div className="w-6 h-6 flex flex-col justify-center space-y-1.5">
+                <span
+                  className={`block h-0.5 w-6 bg-current transition-all ${
+                    isOpen ? 'rotate-45 translate-y-2' : ''
+                  }`}
+                />
+                <span
+                  className={`block h-0.5 w-6 bg-current transition-all ${isOpen ? 'opacity-0' : ''}`}
+                />
+                <span
+                  className={`block h-0.5 w-6 bg-current transition-all ${
+                    isOpen ? '-rotate-45 -translate-y-2' : ''
+                  }`}
+                />
+              </div>
+            </button>
+          </div>
+          {isOpen && (
+            <div className="pb-4">
+              <div className="flex flex-col space-y-2">
+                {navigationRoutes.map(item => (
+                  <Link
+                    key={item.path}
+                    to={item.path}
+                    onClick={() => setIsOpen(false)}
+                    className={`px-3 py-2 rounded-md text-sm font-medium transition-colors ${
+                      isActive(item.path)
+                        ? 'bg-blue-100 text-blue-700'
+                        : 'text-gray-700 hover:bg-gray-100'
+                    }`}
+                  >
+                    {item.label}
+                  </Link>
+                ))}
+              </div>
+            </div>
+          )}
+        </div>
+      </nav>
+      <Outlet />
+    </>
+  );
 }

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/auth/pages/Profile.tsx

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { z } from "zod";
 
-import { executeGraphQL } from "@salesforce/webapp-experimental/api";
+import { getDataSDK } from "@salesforce/webapp-experimental/api";
 
 import { CenteredPageLayout } from "../layout/centered-page-layout";
 import { CardSkeleton } from "../layout/card-skeleton";
@@ -81,10 +81,14 @@ export default function Profile() {
 			setSubmitError(null);
 			setSuccess(false);
 			try {
-				const result: any = await executeGraphQL(MUTATE_PROFILE_GRAPHQL, {
+				const data = await getDataSDK();
+				const response: any = await data.graphql?.(MUTATE_PROFILE_GRAPHQL, {
 					input: { Id: user.id, User: { ...value } },
 				});
-				setProfile(flattenGraphQLRecord(result?.uiapi?.UserUpdate?.Record));
+				if (response?.errors?.length) {
+					throw new Error(response.errors.map((e: any) => e.message).join("; "));
+				}
+				setProfile(flattenGraphQLRecord(response?.data?.uiapi?.UserUpdate?.Record));
 
 				setSuccess(true);
 				// Scroll to top of page after successful update so user sees it
@@ -99,11 +103,16 @@ export default function Profile() {
 	useEffect(() => {
 		let mounted = true;
 
-		executeGraphQL(QUERY_PROFILE_GRAPHQL, { userId: user.id })
-			.then(
-				(result: any) =>
-					mounted && setProfile(flattenGraphQLRecord(result?.uiapi?.query?.User?.edges?.[0]?.node)),
-			)
+		getDataSDK()
+			.then((data) => data.graphql?.(QUERY_PROFILE_GRAPHQL, { userId: user.id }))
+			.then((response: any) => {
+				if (response?.errors?.length) {
+					throw new Error(response.errors.map((e: any) => e.message).join("; "));
+				}
+				if (mounted) {
+					setProfile(flattenGraphQLRecord(response?.data?.uiapi?.query?.User?.edges?.[0]?.node));
+				}
+			})
 			.catch((err: any) => {
 				if (mounted) {
 					setLoadError(getErrorMessage(err, "Failed to load profile"));

package/dist/force-app/main/default/webapplications/appreacttemplatevibe/src/pages/TestAccPage.tsx

@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) 2026, Salesforce, Inc.
+ * All rights reserved.
+ * For full license text, see the LICENSE.txt file
+ */
+
+import AgentforceConversationClient from "../components/AgentforceConversationClient";
+
+export default function TestAccPage() {
+	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">ACC</h1>
+				<p className="text-lg text-gray-600 mb-8">Welcome to your ACC application.</p>
+			</div>
+			<AgentforceConversationClient />
+		</div>
+	);
+}

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

@@ -1,7 +1,6 @@
 import type { RouteObject } from 'react-router';
 import Home from './HomePage';
 import NotFound from './pages/NotFound';
-import AuthAppLayout from "./auth/layouts/AuthAppLayout";
 import Login from "./auth/pages/Login";
 import Register from "./auth/pages/Register";
 import ForgotPassword from "./auth/pages/ForgotPassword";
@@ -11,6 +10,8 @@ import ChangePassword from "./auth/pages/ChangePassword";
 import AuthenticationRoute from "./auth/layouts/authenticationRouteLayout";
 import PrivateRoute from "./auth/layouts/privateRouteLayout";
 import { ROUTES } from "./auth/authenticationConfig";
+import TestAccPage from "./pages/TestAccPage";
+import AuthAppLayout from "./auth/layouts/AuthAppLayout";
 
 export const routes: RouteObject[] = [
   {
@@ -65,6 +66,11 @@ export const routes: RouteObject[] = [
             handle: { showInNavigation: false, title: ROUTES.CHANGE_PASSWORD.TITLE }
           }
         ]
+      },
+      {
+        path: "test-acc",
+        element: <TestAccPage />,
+        handle: { showInNavigation: true, label: "Test ACC" }
       }
     ]
   }

package/dist/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.53.1",
+  "version": "1.54.0",
   "description": "Base SFDX project template",
   "private": true,
   "files": [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-template-vibe-experimental",
-  "version": "1.53.1",
+  "version": "1.54.0",
   "description": "Vibe coding starter app template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",
@@ -38,10 +38,10 @@
       "build:dist-app": {
         "executor": "@salesforce/webapp-template-cli-experimental:build-dist-app"
       },
-      "start": {
+      "dev": {
         "executor": "@salesforce/webapp-template-cli-experimental:dev-server"
       }
     }
   },
-  "gitHead": "c483d93820fdddc821cdb3706c51263999cbcf1f"
+  "gitHead": "b48827161c23db20c7e546a857fe8c9f5f560c20"
 }