@salesforce/webapp-template-app-react-template-b2e-experimental 1.84.0 → 1.85.0

package/dist/.a4drules/skills/{webapp-react-add-component → webapp-react}/SKILL.md

@@ -1,9 +1,11 @@
 ---
-name: webapp-react-add-component
-description: Creates React components, pages, headers, and footers using shadcn UI and Tailwind CSS. Use when the user asks to create a component, add a widget, build a UI element, add a page, create a new page, add a section (e.g. "add a contacts page"), add a header, add a footer, add a navigation bar, or add anything to the web application.
+name: webapp-react
+description: Use when editing any React code in the web application — creating or modifying components, pages, layout, headers, footers, or any TSX/JSX files. Follow this skill for add component, add page, header/footer, and general React UI implementation patterns (shadcn UI and Tailwind CSS).
 ---
 
-# Add React Component
+# React Web App (Components, Pages, Layout)
+
+Use this skill whenever you are editing React/TSX code in the web app (creating or modifying components, pages, header/footer, or layout).
 
 ## Step 1 — Identify the type of component
 

package/dist/.a4drules/skills/{webapp-react-add-component → webapp-react}/implementation/header-footer.md

@@ -116,6 +116,14 @@ AppLayout (appLayout.tsx)
 - **Icons:** `lucide-react`; add `aria-hidden="true"` on decorative icons
 - **Design tokens:** `bg-background`, `text-foreground`, `text-muted-foreground`, `border`, `bg-primary`
 
+### Mobile hamburger / Menu icon — Must be functional
+
+If the header includes a hamburger or `Menu` icon for mobile:
+
+- **Do not** add a Menu/hamburger icon that does nothing. It must toggle a visible mobile menu.
+- **Required:** (1) State: `const [isOpen, setIsOpen] = useState(false)`. (2) Button: `onClick={() => setIsOpen(!isOpen)}`, `aria-label="Toggle menu"`. (3) Conditional panel: `{isOpen && ( <div>...nav links...</div> )}` with responsive visibility (e.g. `md:hidden`). (4) Close on navigate: each link in the panel should `onClick={() => setIsOpen(false)}`.
+- Implement in `appLayout.tsx` (or the component that owns the header). Use the `Menu` icon from `lucide-react`.
+
 ### Confirm — Header / Footer
 
 - Header and footer appear on every page (navigate to at least two routes)

package/dist/.a4drules/skills/{webapp-react-add-component → webapp-react}/implementation/page.md

@@ -2,13 +2,14 @@
 
 ### Rules
 
-1. **`routes.tsx` is the only route registry** — never add routes in `app.tsx` or inside page files.
-2. **All pages are children of the AppLayout route** — do not create top-level routes that bypass the layout shell.
-3. **Default export per page** — each page file has exactly one default-export component.
-4. **Path aliases in all imports** — use `@/pages/...`, `@/components/...`; no deep relative paths.
-5. **No inline styles** — Tailwind utility classes and design tokens only.
-6. **Catch-all last** — `path: '*'` (NotFound) must always remain the last child in the layout route.
-7. **Never modify `appLayout.tsx`** when adding a page — layout changes are a separate concern.
+1. **Edit the component that owns the UI, never output raw HTML** — When editing the home page or any page content, modify the actual `.tsx` file that renders the target. If the target is inside a child component (e.g. `<GlobalSearchInput />` in `Home.tsx`), edit the child's file (e.g. `GlobalSearchInput.tsx`), not the parent. Do not wrap the component with extra elements in the parent; go into the component and change its JSX. Do not paste or generate raw HTML.
+2. **`routes.tsx` is the only route registry** — never add routes in `app.tsx` or inside page files.
+3. **All pages are children of the AppLayout route** — do not create top-level routes that bypass the layout shell.
+4. **Default export per page** — each page file has exactly one default-export component.
+5. **Path aliases in all imports** — use `@/pages/...`, `@/components/...`; no deep relative paths.
+6. **No inline styles** — Tailwind utility classes and design tokens only.
+7. **Catch-all last** — `path: '*'` (NotFound) must always remain the last child in the layout route.
+8. **Never modify `appLayout.tsx`** when adding a page — layout changes are a separate concern.
 
 ### Step 1 — Create the page file
 

package/dist/.a4drules/skills/webapp-ui-ux/SKILL.md

@@ -1,11 +1,13 @@
 ---
-name: ui-ux
-description: Comprehensive design guide for React + Tailwind + shadcn/ui applications. Searchable database with priority-based recommendations for styles, color palettes, font pairings, UX guidelines, and chart types.
+name: webapp-ui-ux
+description: Use when editing any UI code in the web application — styling, layout, design, appearance, Tailwind, shadcn, colors, typography, icons, or visual/UX changes. Comprehensive design guide and searchable database for React + Tailwind + shadcn/ui (styles, color palettes, font pairings, UX guidelines, chart types).
 ---
 
-# ui-ux
+# Web App UI/UX
 
-Comprehensive design guide for React + Tailwind + shadcn/ui applications. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types. Searchable database with priority-based recommendations.
+Use this skill whenever you are editing UI code in the web application — styling, layout, design, appearance, Tailwind, shadcn, colors, typography, icons, or any visual/UX change.
+
+Comprehensive design guide for React + Tailwind + shadcn/ui. Contains 67 styles, 96 color palettes, 57 font pairings, 99 UX guidelines, and 25 chart types. Searchable database with priority-based recommendations.
 
 ## Prerequisites
 
@@ -200,9 +202,10 @@ These are frequently overlooked issues that make UI look unprofessional:
 
 | Rule | Do | Don't |
 |------|----|----- |
-| **No emoji icons** | Use SVG icons (Heroicons, Lucide, Simple Icons) | Use emojis like 🎨 🚀 ⚙️ as UI icons |
+| **Icons: Lucide only** | Use **lucide-react** for all UI icons: `import { IconName } from 'lucide-react'` | Use Heroicons, react-icons, or other icon libraries; use emojis as icons |
+| **No emojis ever** | Use words + Lucide icons for labels, empty states, tooltips, headings | Use emojis anywhere in UI or user-facing text (e.g. 🎨 🚀 ⚙️) |
 | **Stable hover states** | Use color/opacity transitions on hover | Use scale transforms that shift layout |
-| **Correct brand logos** | Research official SVG from Simple Icons | Guess or use incorrect logo paths |
+| **Correct brand logos** | Research official SVG from Simple Icons (when needed outside Lucide) | Guess or use incorrect logo paths |
 | **Consistent icon sizing** | Use fixed viewBox (24x24) with w-6 h-6 | Mix different icon sizes randomly |
 
 ### Interaction & Cursor
@@ -237,8 +240,8 @@ These are frequently overlooked issues that make UI look unprofessional:
 Before delivering UI code, verify these items:
 
 ### Visual Quality
-- [ ] No emojis used as icons (use SVG instead)
-- [ ] All icons from consistent icon set (Heroicons/Lucide)
+- [ ] No emojis anywhere (UI, labels, empty states, tooltips—use words + Lucide icons only)
+- [ ] All icons from **lucide-react** only (no Heroicons, react-icons, or emojis)
 - [ ] Brand logos are correct (verified from Simple Icons)
 - [ ] Hover states don't cause layout shift
 - [ ] Use theme colors directly (bg-primary) not var() wrapper

package/dist/.a4drules/webapp-react.md

@@ -18,6 +18,15 @@ For layout, navigation, and generation rules, see **webapp.md**.
 - Dev server: `npm run dev`
 - Build: `npm run build`
 
+## Routing (React Router)
+
+Use a **single** router package for the app. When using `createBrowserRouter` and `RouterProvider` from `react-router`, all routing imports must come from **`react-router`** — not from `react-router-dom`.
+
+- ✅ `import { createBrowserRouter, RouterProvider, Link, useNavigate, useLocation, Outlet } from 'react-router';`
+- ❌ `import { Link } from 'react-router-dom';` when the app uses `RouterProvider` from `react-router`
+
+Mixing packages causes "Cannot destructure property 'basename' of ... as it is null" because `Link`/hooks from `react-router-dom` read a different context than the one provided by `RouterProvider` from `react-router`.
+
 ## Component Library (MANDATORY)
 
 Use **shadcn/ui** for UI components:
@@ -28,6 +37,42 @@ import { Card, CardHeader, CardContent } from '@/components/ui/card';
 import { Input } from '@/components/ui/input';
 ```
 
+## Icons & No Emojis (MANDATORY)
+
+- **Icons:** Use **lucide-react** only. Do not use Heroicons, Simple Icons, or other icon libraries in the web app.
+  - ✅ `import { Menu, Settings, Bell } from 'lucide-react';` then `<Menu className="w-5 h-5" />`
+  - ❌ Any emoji character as an icon or visual element (e.g. 🎨 🚀 ⚙️ 🔔)
+  - ❌ Other icon libraries (e.g. `@heroicons/react`, `react-icons`, custom SVG icon sets)
+- **No emojis ever:** Do not use emojis anywhere in the app: no emojis in UI labels, buttons, headings, empty states, tooltips, or any user-facing text. Use words and lucide-react icons instead.
+  - ✅ "Settings" with `<Settings />` icon
+  - ❌ "⚙️ Settings" or "Settings 🔧"
+- For icon usage patterns and naming, see the **webapp-ui-ux** skill (`.a4drules/skills/webapp-ui-ux/`, especially `data/icons.csv`).
+
+## Editing UI — Source Files Only (CRITICAL)
+
+When asked to edit the home page, a section, or any on-screen UI:
+
+- **Always edit the actual React/TSX source files.** Never output, paste, or generate raw HTML. The UI is built from components; the agent must locate the component file(s) that render the target area and change **JSX in those files**.
+- **Do not** replace JSX with HTML strings, and do not copy browser-rendered DOM (e.g. expanded `<div>`, `data-slot`, long class strings) into the codebase. That is the output of React + shadcn; the source is `.tsx` with `<Card>`, `<Input>`, etc.
+- **Edit inside the component that owns the UI.** If the element to change is rendered by a **child component** (e.g. `<GlobalSearchInput />` in `Home.tsx`), make the edit **inside that component's file** (e.g. `GlobalSearchInput.tsx`). Do **not** only wrap the component with extra elements in the parent (e.g. adding a `<section>` or `<div>` around `<GlobalSearchInput />`). The parent composes components; the visual/content change belongs in the component that actually renders that part of the UI.
+- **Where to edit:**
+  - **Home page content:** `src/pages/Home.tsx` — but if the target is inside a child (e.g. `<GlobalSearchInput />`), edit the child's file, not the parent.
+  - **Layout, header, nav:** `src/appLayout.tsx`.
+  - **Feature-specific UI (e.g. search, list):** open the **specific component file** that renders the target (e.g. `GlobalSearchInput.tsx` for the search input UI).
+- **Steps:** (1) Identify which **component** owns the section (follow the import: e.g. `GlobalSearchInput` → its file). (2) Open that component's file and modify the JSX there. (3) Only change the parent (e.g. `Home.tsx`) if the change is layout/ordering of components, not the internals of a child. Do not emit a standalone HTML snippet as the “edit.”
+
+## Mobile Nav / Hamburger — Must Be Functional
+
+When adding a navigation menu that includes a hamburger (or Menu icon) for mobile:
+
+- **Do not** add a hamburger/Menu icon that does nothing. The icon must **toggle a visible mobile menu**.
+- **Required implementation:**
+  1. **State:** e.g. `const [isOpen, setIsOpen] = useState(false);`
+  2. **Toggle button:** The hamburger/Menu button must have `onClick={() => setIsOpen(!isOpen)}` and `aria-label="Toggle menu"` (or equivalent).
+  3. **Conditional panel:** A mobile-only menu panel that renders when `isOpen` is true, e.g. `{isOpen && ( <div className="..."> ... nav links ... </div> )}`. Use responsive classes (e.g. `md:hidden`) so the panel is shown only on small screens if the desktop nav is separate.
+  4. **Close on navigation:** Each nav link in the mobile panel should call `onClick={() => setIsOpen(false)}` (or similar) so the menu closes when the user navigates.
+- Implement this in `appLayout.tsx` (or the component that owns the header/nav). See existing apps for the full pattern (state + button + conditional panel + link onClick).
+
 ## Styling
 
 - Use **Tailwind CSS** utility classes
@@ -137,11 +182,20 @@ window.location.reload();
 - ❌ Using LWC patterns (`@wire`, LDS) in React
 - ❌ Hardcoded Salesforce IDs or URLs
 - ❌ Missing error handling for async operations
+- ❌ Mixing `react-router` and `react-router-dom` (e.g. `RouterProvider` from `react-router` but `Link` from `react-router-dom`) — use one package for all routing imports
+- ❌ Using emojis anywhere in the app (labels, icons, empty states, headings, tooltips)
+- ❌ Using any icon library other than **lucide-react** (no Heroicons, react-icons, or emoji-as-icon)
+- ❌ Outputting or pasting raw HTML when editing UI — always edit the React/TSX source files (e.g. `Home.tsx`, `appLayout.tsx`, feature components)
+- ❌ Adding a hamburger or Menu icon for mobile nav without implementing toggle state, conditional menu panel, and close-on-navigate
 
 ## Quality Checklist
 
 - [ ] Entry point maintained (`app.tsx`)
 - [ ] Uses shadcn/ui and Tailwind
+- [ ] Icons from **lucide-react** only; no emojis anywhere in UI or user-facing text
+- [ ] UI changes made by editing .tsx source files (never by pasting raw HTML)
+- [ ] If mobile hamburger exists: it has toggle state, conditional menu panel, and close on link click
+- [ ] All routing imports from same package as router (e.g. `react-router` only)
 - [ ] DataSDK used for all Salesforce API calls
 - [ ] Proper error handling with try/catch
 - [ ] Loading and error states implemented

package/dist/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.85.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.84.1...v1.85.0) (2026-03-10)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
+## [1.84.1](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.84.0...v1.84.1) (2026-03-10)
+
+**Note:** Version bump only for package @salesforce/webapp-template-base-sfdx-project-experimental
+
+
+
+
+
 # [1.84.0](https://github.com/salesforce-experience-platform-emu/webapps/compare/v1.83.0...v1.84.0) (2026-03-09)
 
 

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

@@ -15,9 +15,9 @@
     "graphql:schema": "node scripts/get-graphql-schema.mjs"
   },
   "dependencies": {
-    "@salesforce/agentforce-conversation-client": "^1.84.0",
-    "@salesforce/sdk-data": "^1.84.0",
-    "@salesforce/webapp-experimental": "^1.84.0",
+    "@salesforce/agentforce-conversation-client": "^1.85.0",
+    "@salesforce/sdk-data": "^1.85.0",
+    "@salesforce/webapp-experimental": "^1.85.0",
     "@tailwindcss/vite": "^4.1.17",
     "@tanstack/react-form": "^1.28.4",
     "class-variance-authority": "^0.7.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.84.0",
+    "@salesforce/vite-plugin-webapp-experimental": "^1.85.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.1.0",
     "@testing-library/user-event": "^14.5.2",

package/dist/package.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforce/webapp-template-app-react-template-b2e-experimental",
-  "version": "1.84.0",
+  "version": "1.85.0",
   "description": "B2E template app (from BYO)",
   "license": "SEE LICENSE IN LICENSE.txt",
   "author": "",