@salesforce/templates 66.6.2 → 66.7.0

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

@@ -1,12 +1,34 @@
-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>
-  );
+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/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/routes.tsx

@@ -1,7 +1,10 @@
 import type { RouteObject } from 'react-router';
 import AppLayout from './appLayout';
-import Home from './features/object-search/__examples__/pages/Home';
+import Home from './pages/Home';
 import NotFound from './pages/NotFound';
+import AccountSearch from "./pages/AccountSearch";
+import AccountObjectDetail from "./pages/AccountObjectDetailPage";
+
 export const routes: RouteObject[] = [
   {
     path: "/",
@@ -15,6 +18,14 @@ export const routes: RouteObject[] = [
       {
         path: '*',
         element: <NotFound />
+      },
+      {
+        path: "accounts/:recordId",
+        element: <AccountObjectDetail />
+      },
+      {
+        path: "accounts",
+        element: <AccountSearch />
       }
     ]
   }

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/src/types/conversation.ts

@@ -18,6 +18,8 @@ export interface AgentforceConversationClientProps {
 	inline?: boolean;
 	/** Show/hide chat header. Defaults to true for floating; can only be set for inline mode. */
 	headerEnabled?: boolean;
+	/** Show/hide agent icon in the header. */
+	showHeaderIcon?: boolean;
 	/** Inline width. */
 	width?: string | number;
 	/** Inline height. */

package/lib/templates/project/reactinternalapp/_p_/_m_/_w_/_a_/vite.config.ts

@@ -4,7 +4,7 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import { resolve } from 'path';
 import tailwindcss from '@tailwindcss/vite';
-import salesforce from '@salesforce/vite-plugin-webapp-experimental';
+import salesforce from '@salesforce/vite-plugin-ui-bundle';
 import codegen from 'vite-plugin-graphql-codegen';
 
 const schemaPath = resolve(__dirname, '../../../../../schema.graphql');

package/lib/templates/project/reactinternalapp/package.json

@@ -1,6 +1,6 @@
 {
-  "name": "@salesforce/webapp-template-base-sfdx-project-experimental",
-  "version": "1.114.0",
+  "name": "@salesforce/ui-bundle-template-base-sfdx-project",
+  "version": "1.117.3",
   "description": "Base SFDX project template",
   "license": "SEE LICENSE IN LICENSE.txt",
   "publishConfig": {

package/lib/templates/project/reactinternalapp/scripts/graphql-search.sh

@@ -60,8 +60,8 @@ if [ ! -f "$SCHEMA" ]; then
   echo "ERROR: schema.graphql not found at $SCHEMA"
   echo "  Make sure you are running from the SFDX project root, or pass the path explicitly:"
   echo "    bash $0 --schema <path/to/schema.graphql> <EntityName>"
-  echo "  If the file is missing entirely, generate it from the webapp dir:"
-  echo "    cd force-app/main/default/webapplications/<app-name> && npm run graphql:schema"
+  echo "  If the file is missing entirely, generate it from the ui-bundle dir:"
+  echo "    cd force-app/main/default/uiBundles/<app-name> && npm run graphql:schema"
   exit 1
 fi
 
@@ -73,8 +73,8 @@ fi
 
 if [ ! -s "$SCHEMA" ]; then
   echo "ERROR: schema.graphql is empty at $SCHEMA"
-  echo "  Regenerate it from the webapp dir:"
-  echo "    cd force-app/main/default/webapplications/<app-name> && npm run graphql:schema"
+  echo "  Regenerate it from the ui-bundle dir:"
+  echo "    cd force-app/main/default/uiBundles/<app-name> && npm run graphql:schema"
   exit 1
 fi
 

package/lib/templates/project/reactinternalapp/scripts/setup-cli.mjs

@@ -1,23 +1,23 @@
 #!/usr/bin/env node
 /**
- * One-command setup: login, deploy, optional permset/data, GraphQL schema/codegen, web app build.
+ * One-command setup: login, deploy, optional permset/data, GraphQL schema/codegen, UI bundle build.
  * Use this script to make setup easier for each app generated from this template.
  *
  * Usage:
  *   node scripts/setup-cli.mjs --target-org <alias>           # interactive step picker (all selected)
  *   node scripts/setup-cli.mjs --target-org <alias> --yes     # skip picker, run all steps
  *   node scripts/setup-cli.mjs --target-org afv5 --skip-login
- *   node scripts/setup-cli.mjs --target-org afv5 --skip-data --skip-webapp-build
- *   node scripts/setup-cli.mjs --target-org myorg --webapp-name my-app
+ *   node scripts/setup-cli.mjs --target-org afv5 --skip-data --skip-ui-bundle-build
+ *   node scripts/setup-cli.mjs --target-org myorg --ui-bundle-name my-app
  *
  * Steps (in order):
  *   1. login     — sf org login web only if org not already connected (skip with --skip-login)
- *   2. webapp    — (all web apps) npm install && npm run build so dist exists for deploy (skip with --skip-webapp-build)
+ *   2. uiBundle  — (all UI bundles) npm install && npm run build so dist exists for deploy (skip with --skip-ui-bundle-build)
  *   3. deploy    — sf project deploy start --target-org <alias> (requires dist for entity deployment)
  *   4. permset   — sf org assign permset for each *.permissionset-meta.xml (skip with --skip-permset; override via --permset-name)
  *   5. data      — prepare unique fields + sf data import tree (skipped if no data dir/plan)
- *   6. graphql   — (in webapp) npm run graphql:schema then npm run graphql:codegen
- *   7. dev       — (in webapp) npm run dev — launch dev server (skip with --skip-dev)
+ *   6. graphql   — (in UI bundle) npm run graphql:schema then npm run graphql:codegen
+ *   7. dev       — (in UI bundle) npm run dev — launch dev server (skip with --skip-dev)
  */
 
 import { spawnSync } from 'node:child_process';
@@ -44,14 +44,14 @@ function resolveSfdxSource() {
 }
 
 const SFDX_SOURCE = resolveSfdxSource();
-const WEBAPPLICATIONS_DIR = resolve(SFDX_SOURCE, 'webapplications');
+const UIBUNDLES_DIR = resolve(SFDX_SOURCE, 'uiBundles');
 const DATA_DIR = resolve(SFDX_SOURCE, 'data');
 const DATA_PLAN = resolve(SFDX_SOURCE, 'data/data-plan.json');
 
 function parseArgs() {
   const args = process.argv.slice(2);
   let targetOrg = null;
-  let webappName = null;
+  let uiBundleName = null;
   /** If non-empty, only these names are assigned; otherwise all discovered from the project. */
   const permsetNamesExplicit = [];
   let yes = false;
@@ -61,14 +61,14 @@ function parseArgs() {
     skipPermset: false,
     skipData: false,
     skipGraphql: false,
-    skipWebappBuild: false,
+    skipUIBundleBuild: false,
     skipDev: false,
   };
   for (let i = 0; i < args.length; i++) {
     if (args[i] === '--target-org' && args[i + 1]) {
       targetOrg = args[++i];
-    } else if (args[i] === '--webapp-name' && args[i + 1]) {
-      webappName = args[++i];
+    } else if (args[i] === '--ui-bundle-name' && args[i + 1]) {
+      uiBundleName = args[++i];
     } else if (args[i] === '--permset-name' && args[i + 1]) {
       permsetNamesExplicit.push(args[++i]);
     } else if (args[i] === '--skip-login') flags.skipLogin = true;
@@ -76,7 +76,7 @@ function parseArgs() {
     else if (args[i] === '--skip-permset') flags.skipPermset = true;
     else if (args[i] === '--skip-data') flags.skipData = true;
     else if (args[i] === '--skip-graphql') flags.skipGraphql = true;
-    else if (args[i] === '--skip-webapp-build') flags.skipWebappBuild = true;
+    else if (args[i] === '--skip-ui-bundle-build') flags.skipUIBundleBuild = true;
     else if (args[i] === '--skip-dev') flags.skipDev = true;
     else if (args[i] === '--yes' || args[i] === '-y') yes = true;
     else if (args[i] === '--help' || args[i] === '-h') {
@@ -90,14 +90,14 @@ Required:
   --target-org <alias>   Target Salesforce org alias (e.g. myorg)
 
 Options:
-  --webapp-name <name>   Web app folder name under webapplications/ (default: auto-detect)
+  --ui-bundle-name <name> UI bundle folder name under uiBundles/ (default: auto-detect)
   --permset-name <name>  Assign only this permission set (repeatable). Default: all sets under permissionsets/
   --skip-login           Skip login step (login is auto-skipped if org is already connected)
   --skip-deploy          Do not deploy metadata
   --skip-permset         Do not assign permission set
   --skip-data            Do not prepare data or run data import
   --skip-graphql         Do not fetch schema or run GraphQL codegen
-  --skip-webapp-build    Do not npm install / build the web application
+  --skip-ui-bundle-build Do not npm install / build the UI bundle
   --skip-dev             Do not launch the dev server at the end
   -y, --yes              Skip interactive step picker; run all enabled steps immediately
   -h, --help             Show this help
@@ -109,35 +109,35 @@ Options:
     console.error('Error: --target-org <alias> is required.');
     process.exit(1);
   }
-  return { targetOrg, webappName, permsetNamesExplicit, yes, ...flags };
+  return { targetOrg, uiBundleName, permsetNamesExplicit, yes, ...flags };
 }
 
-function discoverAllWebappDirs(webappName) {
-  if (!existsSync(WEBAPPLICATIONS_DIR)) {
-    console.error(`Error: webapplications directory not found: ${WEBAPPLICATIONS_DIR}`);
+function discoverAllUIBundleDirs(uiBundleName) {
+  if (!existsSync(UIBUNDLES_DIR)) {
+    console.error(`Error: uiBundles directory not found: ${UIBUNDLES_DIR}`);
     process.exit(1);
   }
-  const entries = readdirSync(WEBAPPLICATIONS_DIR, { withFileTypes: true });
+  const entries = readdirSync(UIBUNDLES_DIR, { withFileTypes: true });
   const dirs = entries.filter((e) => e.isDirectory() && !e.name.startsWith('.'));
   if (dirs.length === 0) {
-    console.error(`Error: No web app folder found under ${WEBAPPLICATIONS_DIR}`);
+    console.error(`Error: No UI bundle folder found under ${UIBUNDLES_DIR}`);
     process.exit(1);
   }
-  if (webappName) {
-    const requested = dirs.find((d) => d.name === webappName);
+  if (uiBundleName) {
+    const requested = dirs.find((d) => d.name === uiBundleName);
     if (!requested) {
-      console.error(`Error: Web app directory not found: ${webappName}`);
+      console.error(`Error: UI bundle directory not found: ${uiBundleName}`);
       process.exit(1);
     }
-    return [resolve(WEBAPPLICATIONS_DIR, requested.name)];
+    return [resolve(UIBUNDLES_DIR, requested.name)];
   }
-  return dirs.map((d) => resolve(WEBAPPLICATIONS_DIR, d.name));
+  return dirs.map((d) => resolve(UIBUNDLES_DIR, d.name));
 }
 
-function discoverWebappDir(webappName) {
-  const all = discoverAllWebappDirs(webappName);
-  if (all.length > 1 && !webappName) {
-    console.log(`Multiple web apps found; using first: ${all[0].split(/[/\\]/).pop()}`);
+function discoverUIBundleDir(uiBundleName) {
+  const all = discoverAllUIBundleDirs(uiBundleName);
+  if (all.length > 1 && !uiBundleName) {
+    console.log(`Multiple UI bundles found; using first: ${all[0].split(/[/\\]/).pop()}`);
   }
   return all[0];
 }
@@ -294,7 +294,7 @@ function run(name, cmd, args, opts = {}) {
 async function main() {
   const {
     targetOrg,
-    webappName,
+    uiBundleName,
     permsetNamesExplicit,
     yes,
     skipLogin: argSkipLogin,
@@ -302,7 +302,7 @@ async function main() {
     skipPermset: argSkipPermset,
     skipData: argSkipData,
     skipGraphql: argSkipGraphql,
-    skipWebappBuild: argSkipWebappBuild,
+    skipUIBundleBuild: argSkipUIBundleBuild,
     skipDev: argSkipDev,
   } = parseArgs();
 
@@ -319,7 +319,7 @@ async function main() {
 
   const stepDefs = [
     { key: 'login', label: 'Login — org authentication', enabled: !argSkipLogin, available: true },
-    { key: 'webappBuild', label: 'Webapp Build — npm install + build (pre-deploy)', enabled: !argSkipWebappBuild, available: true },
+    { key: 'uiBundleBuild', label: 'UI Bundle Build — npm install + build (pre-deploy)', enabled: !argSkipUIBundleBuild, available: true },
     { key: 'deploy', label: 'Deploy — sf project deploy start', enabled: !argSkipDeploy, available: true },
     { key: 'permset', label: permsetStepLabel, enabled: !argSkipPermset, available: true },
     { key: 'data', label: 'Data — delete + import records via Apex', enabled: !argSkipData && hasDataPlan, available: hasDataPlan },
@@ -334,26 +334,26 @@ async function main() {
   });
 
   const skipLogin = !on.login;
-  const skipWebappBuild = !on.webappBuild;
+  const skipUIBundleBuild = !on.uiBundleBuild;
   const skipDeploy = !on.deploy;
   const skipPermset = !on.permset;
   const skipData = !on.data;
   const skipGraphql = !on.graphql;
   const skipDev = !on.dev;
 
-  const needsWebapp = !skipWebappBuild || !skipGraphql || !skipDev;
-  const webappDir = needsWebapp ? discoverWebappDir(webappName) : null;
+  const needsUIBundle = !skipUIBundleBuild || !skipGraphql || !skipDev;
+  const uiBundleDir = needsUIBundle ? discoverUIBundleDir(uiBundleName) : null;
   const doData = !skipData;
 
-  console.log('Setup — target org:', targetOrg, '| web app:', webappDir ?? '(none)');
+  console.log('Setup — target org:', targetOrg, '| UI bundle:', uiBundleDir ?? '(none)');
   console.log(
-    'Steps: login=%s deploy=%s permset=%s data=%s graphql=%s webapp=%s dev=%s',
+    'Steps: login=%s deploy=%s permset=%s data=%s graphql=%s uiBundle=%s dev=%s',
     !skipLogin,
     !skipDeploy,
     !skipPermset,
     doData,
     !skipGraphql,
-    !skipWebappBuild,
+    !skipUIBundleBuild,
     !skipDev
   );
 
@@ -366,13 +366,13 @@ async function main() {
     }
   }
 
-  // Build all web apps before deploy so dist exists for entity deployment
-  if (!skipDeploy && !skipWebappBuild) {
-    const allWebappDirs = discoverAllWebappDirs(webappName);
-    for (const dir of allWebappDirs) {
+  // Build all UI Bundles before deploy so dist exists for entity deployment
+  if (!skipDeploy && !skipUIBundleBuild) {
+    const allUIBundleDirs = discoverAllUIBundleDirs(uiBundleName);
+    for (const dir of allUIBundleDirs) {
       const name = dir.split(/[/\\]/).pop();
-      run(`Web app install (${name})`, 'npm', ['install'], { cwd: dir });
-      run(`Web app build (${name})`, 'npm', ['run', 'build'], { cwd: dir });
+      run(`UI Bundle install (${name})`, 'npm', ['install'], { cwd: dir });
+      run(`UI Bundle build (${name})`, 'npm', ['run', 'build'], { cwd: dir });
     }
   }
 
@@ -535,25 +535,25 @@ async function main() {
     if (existsSync(tmpApex)) unlinkSync(tmpApex);
   }
 
-  if (!skipGraphql || !skipWebappBuild) {
-    run('Web app npm install', 'npm', ['install'], { cwd: webappDir });
+  if (!skipGraphql || !skipUIBundleBuild) {
+    run('UI Bundle npm install', 'npm', ['install'], { cwd: uiBundleDir });
   }
 
   if (!skipGraphql) {
     run('Set default org for schema', 'sf', ['config', 'set', 'target-org', targetOrg, '--global']);
-    run('GraphQL schema (introspect)', 'npm', ['run', 'graphql:schema'], { cwd: webappDir });
-    run('GraphQL codegen', 'npm', ['run', 'graphql:codegen'], { cwd: webappDir });
+    run('GraphQL schema (introspect)', 'npm', ['run', 'graphql:schema'], { cwd: uiBundleDir });
+    run('GraphQL codegen', 'npm', ['run', 'graphql:codegen'], { cwd: uiBundleDir });
   }
 
-  if (!skipWebappBuild) {
-    run('Web app build', 'npm', ['run', 'build'], { cwd: webappDir });
+  if (!skipUIBundleBuild) {
+    run('UI Bundle build', 'npm', ['run', 'build'], { cwd: uiBundleDir });
   }
 
   console.log('\n--- Setup complete ---');
 
   if (!skipDev) {
     console.log('\n--- Launching dev server (Ctrl+C to stop) ---\n');
-    run('Dev server', 'npm', ['run', 'dev'], { cwd: webappDir });
+    run('Dev server', 'npm', ['run', 'dev'], { cwd: uiBundleDir });
   }
 }
 

package/lib/templates/project/reactinternalapp/scripts/sf-project-setup.mjs

@@ -1,7 +1,7 @@
 #!/usr/bin/env node
 /**
  * Run from SFDX project root: install dependencies, build, and launch the dev server
- * for the web app in force-app/main/default/webapplications/.
+ * for the UI bundle in force-app/main/default/uiBundles/.
  *
  * Usage: npm run sf-project-setup
  * (from the directory that contains force-app/ and sfdx-project.json)
@@ -15,7 +15,7 @@ import { readdirSync, existsSync, readFileSync } from 'node:fs';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const ROOT = resolve(__dirname, '..');
 
-function resolveWebapplicationsDir() {
+function resolveUIBundlesDir() {
   const sfdxPath = resolve(ROOT, 'sfdx-project.json');
   if (!existsSync(sfdxPath)) {
     console.error('Error: sfdx-project.json not found at project root.');
@@ -27,25 +27,25 @@ function resolveWebapplicationsDir() {
     console.error('Error: No packageDirectories[].path found in sfdx-project.json.');
     process.exit(1);
   }
-  return resolve(ROOT, pkgDir, 'main', 'default', 'webapplications');
+  return resolve(ROOT, pkgDir, 'main', 'default', 'uiBundles');
 }
 
-function discoverWebappDir() {
-  const webapplicationsDir = resolveWebapplicationsDir();
-  if (!existsSync(webapplicationsDir)) {
-    console.error(`Error: webapplications directory not found: ${webapplicationsDir}`);
+function discoverUIBundleDir() {
+  const uiBundlesDir = resolveUIBundlesDir();
+  if (!existsSync(uiBundlesDir)) {
+    console.error(`Error: uiBundles directory not found: ${uiBundlesDir}`);
     process.exit(1);
   }
-  const entries = readdirSync(webapplicationsDir, { withFileTypes: true });
+  const entries = readdirSync(uiBundlesDir, { withFileTypes: true });
   const dirs = entries.filter((e) => e.isDirectory() && !e.name.startsWith('.'));
   if (dirs.length === 0) {
-    console.error(`Error: No web app folder found under ${webapplicationsDir}`);
+    console.error(`Error: No UI bundle folder found under ${uiBundlesDir}`);
     process.exit(1);
   }
   if (dirs.length > 1) {
-    console.log(`Multiple web apps found; using first: ${dirs[0].name}`);
+    console.log(`Multiple UI bundles found; using first: ${dirs[0].name}`);
   }
-  return resolve(webapplicationsDir, dirs[0].name);
+  return resolve(uiBundlesDir, dirs[0].name);
 }
 
 function run(label, cmd, args, opts) {
@@ -56,11 +56,11 @@ function run(label, cmd, args, opts) {
   }
 }
 
-const webappDir = discoverWebappDir();
+const uiBundleDir = discoverUIBundleDir();
 console.log('SFDX project root:', ROOT);
-console.log('Web app directory:', webappDir);
+console.log('UI bundle directory:', uiBundleDir);
 
-run('npm install', 'npm', ['install'], { cwd: webappDir });
-run('npm run build', 'npm', ['run', 'build'], { cwd: webappDir });
+run('npm install', 'npm', ['install', '--registry', 'https://registry.npmjs.org/'], { cwd: uiBundleDir });
+run('npm run build', 'npm', ['run', 'build'], { cwd: uiBundleDir });
 console.log('\n--- Launching dev server (Ctrl+C to stop) ---\n');
-run('npm run dev', 'npm', ['run', 'dev'], { cwd: webappDir });
+run('npm run dev', 'npm', ['run', 'dev'], { cwd: uiBundleDir });

package/lib/templates/{webapplication → uiBundles}/reactbasic/CHANGELOG.md

@@ -7,4 +7,4 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ### Features
 
-- auto bump base react app versions and fix issue with base webapplication json ([#175](https://github.com/salesforce-experience-platform-emu/webapps/issues/175)) ([048b5a8](https://github.com/salesforce-experience-platform-emu/webapps/commit/048b5a8449c899fc923aeebc3c76bc5bf1c5e0d4))
+- auto bump base react app versions and fix issue with base ui-bundle json ([#175](https://github.com/salesforce-experience-platform-emu/webapps/issues/175)) ([048b5a8](https://github.com/salesforce-experience-platform-emu/webapps/commit/048b5a8449c899fc923aeebc3c76bc5bf1c5e0d4))

package/lib/templates/{webapplication → uiBundles}/reactbasic/README.md

@@ -1,8 +1,8 @@
 # Base React App
 
-Base React App is a template application that demonstrates how to build a React web app on the Salesforce platform with Vite, TypeScript, Tailwind, shadcn/ui, and the Salesforce Web App SDK. It provides a minimal shell (home, 404), routing, and GraphQL codegen support so feature apps can extend it via the patches pipeline.
+Base React App is a template application that demonstrates how to build a React UI Bundle on the Salesforce platform with Vite, TypeScript, Tailwind, shadcn/ui, and the Salesforce UI Bundle SDK. It provides a minimal shell (home, 404), routing, and GraphQL codegen support so feature apps can extend it via the patches pipeline.
 
-This web application lives inside an SFDX project. The project root is the directory that contains `force-app/` and `sfdx-project.json`. Run the commands in the sections below from the paths indicated.
+This UI Bundle lives inside an SFDX project. The project root is the directory that contains `force-app/` and `sfdx-project.json`. Run the commands in the sections below from the paths indicated.
 
 ## Table of contents
 
@@ -13,7 +13,7 @@ This web application lives inside an SFDX project. The project root is the direc
 
 ## Run (development)
 
-From the web app directory (`force-app/main/default/webapplications/base-react-app`):
+From the UI Bundle directory (`force-app/main/default/uiBundles/base-react-app`):
 
 ```bash
 npm install
@@ -24,29 +24,29 @@ This starts the Vite dev server (e.g. http://localhost:5173). Use `npm run dev:d
 
 ## Build
 
-From the web app directory:
+From the UI Bundle directory:
 
 ```bash
 npm install
 npm run build
 ```
 
-The production build is written to `dist/` inside the web app folder. Deploy using the steps in [Deploy](#deploy).
+The production build is written to `dist/` inside the UI Bundle folder. Deploy using the steps in [Deploy](#deploy).
 
 ## Deploy
 
 From the **SFDX project root** (the directory that contains `force-app/`):
 
-1. Build the web app:
+1. Build the UI Bundle:
 
    ```bash
-   cd force-app/main/default/webapplications/base-react-app && npm install && npm run build && cd -
+   cd force-app/main/default/uiBundles/base-react-app && npm install && npm run build && cd -
    ```
 
-2. Deploy the web app only:
+2. Deploy the UI Bundle only:
 
    ```bash
-   sf project deploy start --source-dir force-app/main/default/webapplications --target-org <alias>
+   sf project deploy start --source-dir force-app/main/default/ui-bundles --target-org <alias>
    ```
 
    Or deploy all metadata:
@@ -59,7 +59,7 @@ From the **SFDX project root** (the directory that contains `force-app/`):
 
 ## Test
 
-From the web app directory:
+From the UI Bundle directory:
 
 ```bash
 npm install

package/lib/templates/{webapplication/reactbasic/_webapplication.webapplication-meta.xml → uiBundles/reactbasic/_uibundle.uibundle-meta.xml}

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<WebApplication xmlns="http://soap.sforce.com/2006/04/metadata">
+<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
     <masterLabel><%= masterLabel %></masterLabel>
-    <description>A Salesforce web application.</description>
+    <description>A Salesforce UI Bundle.</description>
     <isActive>true</isActive>
     <version>1</version>
-</WebApplication>
+</UIBundle>

package/lib/templates/{webapplication → uiBundles}/reactbasic/eslint.config.js

@@ -18,7 +18,12 @@ const schemaExists = existsSync(schemaPath);
 const config = [
   // Global ignores
   {
-    ignores: ['build/**/*', 'dist/**/*', 'coverage/**/*'],
+    ignores: [
+      'build/**/*',
+      'dist/**/*',
+      'coverage/**/*',
+      'src/api/graphql-operations-types.ts',
+    ],
   },
   // Config files and build tools (first to avoid inheritance)
   {
@@ -89,11 +94,17 @@ const config = [
       'react/no-unescaped-entities': 'off',
       '@typescript-eslint/no-unused-vars': [
         'error',
-        { argsIgnorePattern: '^_' },
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          caughtErrorsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
       ],
       '@typescript-eslint/explicit-function-return-type': 'off',
       '@typescript-eslint/explicit-module-boundary-types': 'off',
       '@typescript-eslint/no-explicit-any': 'off',
+      'react-hooks/set-state-in-effect': 'warn',
     },
     settings: {
       react: {

package/lib/templates/{webapplication → uiBundles}/reactbasic/package.json

@@ -15,8 +15,8 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/sdk-data": "^1.114.0",
-    "@salesforce/webapp-experimental": "^1.114.0",
+    "@salesforce/sdk-data": "^1.117.3",
+    "@salesforce/ui-bundle": "^1.117.3",
     "@tailwindcss/vite": "^4.1.17",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
@@ -41,7 +41,7 @@
     "@graphql-eslint/eslint-plugin": "^4.1.0",
     "@graphql-tools/utils": "^11.0.0",
     "@playwright/test": "^1.49.0",
-    "@salesforce/vite-plugin-webapp-experimental": "^1.114.0",
+    "@salesforce/vite-plugin-ui-bundle": "^1.117.3",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/lib/templates/{webapplication → uiBundles}/reactbasic/scripts/get-graphql-schema.mjs

@@ -10,7 +10,7 @@
  */
 import { writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
-import { getOrgInfo } from '@salesforce/webapp-experimental/app';
+import { getOrgInfo } from '@salesforce/ui-bundle/app';
 import { buildClientSchema, getIntrospectionQuery, printSchema } from 'graphql';
 import { pruneSchema } from '@graphql-tools/utils';
 

package/lib/templates/{webapplication → uiBundles}/reactbasic/vite.config.ts

@@ -4,7 +4,7 @@ import react from '@vitejs/plugin-react';
 import path from 'path';
 import { resolve } from 'path';
 import tailwindcss from '@tailwindcss/vite';
-import salesforce from '@salesforce/vite-plugin-webapp-experimental';
+import salesforce from '@salesforce/vite-plugin-ui-bundle';
 import codegen from 'vite-plugin-graphql-codegen';
 
 const schemaPath = resolve(__dirname, '../../../../../schema.graphql');

package/lib/templates/uiBundles/webappbasic/README.md

@@ -0,0 +1,15 @@
+# Base Web App
+
+Base Web App is a minimal UI Bundle template for the Salesforce platform. It provides a static HTML entry point and UI Bundle metadata so you can deploy a simple UI Bundle or use it as a starting point for a custom build. It does not include a framework; it is HTML and configuration only.
+
+## Layout
+
+This directory is the **UI Bundle payload**. It contains:
+
+| Path                          | Description                                                                                                                                                                  |
+| ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `ui-bundle.json`              | Web app config: `outputDir` (where the app content lives), routing, fallback.                                                                                                |
+| `_uibundle.uibundle-meta.xml` | Salesforce UI Bundle metadata (label, description, version).                                                                                                                 |
+| `src/`                        | **App content directory.** Matches `outputDir` in `ui-bundle.json`. Entry point is `src/index.html`; add other static assets (HTML, CSS, JS, images) under `src/` as needed. |
+
+The nested `src/` is intentional: this folder holds the actual UI Bundle content (e.g. `index.html`). The platform uses `outputDir` from `ui-bundle.json` to know which subfolder contains the app.

package/lib/templates/{webapplication/webappbasic/_webapplication.webapplication-meta.xml → uiBundles/webappbasic/_uibundle.uibundle-meta.xml}

@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<WebApplication xmlns="http://soap.sforce.com/2006/04/metadata">
+<UIBundle xmlns="http://soap.sforce.com/2006/04/metadata">
     <masterLabel><%= masterLabel %></masterLabel>
-    <description>A Salesforce web application.</description>
+    <description>A Salesforce UI Bundle.</description>
     <isActive>true</isActive>
     <version>1</version>
-</WebApplication>
+</UIBundle>