@schandlergarcia/sf-web-components 1.9.54 → 1.9.56

package/CHANGELOG.md

@@ -5,6 +5,51 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.9.56] - 2026-04-01
+
+### Fixed
+- **scripts/reset-command-center.sh** - Fixed reset script creating broken Home.tsx
+  - Issue 1: Home.tsx template used UIButton/UIInput (command center components) instead of shadcn Button/Input (outer app components)
+  - Issue 2: Home.tsx "Browse All" button navigated to `/accounts` route that doesn't exist after reset → 404
+  - Issue 3: Search button navigated to `/accounts` instead of `/search`
+  - Solution: Updated Home.tsx template in reset script to:
+    - Use shadcn `Button`/`Input` from `@/components/ui/` (correct for outer app context)
+    - Removed "Browse All" button (baseline state = no accounts feature)
+    - Changed search to navigate to `/search?q=...` instead of `/accounts`
+  - Now reset creates a working baseline app with no 404 errors
+
+### Context
+The reset script creates a baseline app state (Home search page + Search page + BlankDashboard). The routes.tsx reset only includes `/` (Home) and `/search` (Search) - no `/accounts` route. But Home.tsx was trying to navigate to `/accounts`, causing 404.
+
+The postinstall routes.tsx.template DOES include `/accounts` route (pointing to __examples__/AccountSearch), but the reset script deliberately overwrites this with a simpler baseline that doesn't include accounts functionality.
+
+## [1.9.55] - 2026-04-01
+
+### Fixed
+- **src/templates/pages/Home.tsx.template** - Fixed incorrect component usage for outer app context
+  - Issue: Template used `UIButton`/`UIInput` from `@/components/library` (command center components)
+  - Template is installed to `src/pages/` which is outer app context (wrapped by AppLayout)
+  - Outer app pages should use shadcn components: `Button` from `@/components/ui/button`
+  - This was causing agent confusion - agents found both the installed Home.tsx (wrong) and __examples__/Home.tsx (correct) and didn't know which to follow
+  - Changed imports: `UIButton`/`UIInput` → `Button`/`Input` from shadcn
+  - Changed button variants: `variant="primary"` → default, `variant="secondary"` → `variant="outline"`
+
+- **src/templates/pages/NotFound.tsx.template** - Fixed incorrect component usage for outer app context
+  - Same issue: used `UIButton` when it should use shadcn `Button`
+  - NotFound is rendered in outer app (AppLayout), not command center
+  - Changed import: `import UIButton from '@/components/library/ui/UIButton'` → `import { Button } from "@/components/ui/button"`
+  - Changed usage: `<UIButton>` → `<Button>`
+
+### Context
+**Two UI Contexts:**
+1. **Outer app** (src/pages/Home.tsx, NotFound.tsx, Search.tsx) - uses shadcn `Button`, Lucide icons, rendered in AppLayout
+2. **Command center** (src/pages/BlankDashboard.tsx, all dashboard pages) - uses library `UIButton`, Heroicons, rendered in CommandCenter.tsx with `.heroui-scope`
+
+BlankDashboard.tsx.template correctly uses library components because it's rendered inside the command center context. But Home.tsx and NotFound.tsx are outer app pages and must use shadcn components.
+
+### Impact
+After reinstalling package, react4 will now get the correct outer app pattern. No more agent confusion about which components to use.
+
 ## [1.9.54] - 2026-04-01
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.54",
+  "version": "1.9.56",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",

package/scripts/reset-command-center.sh

@@ -152,8 +152,8 @@ echo "→ Restoring ${HOME} from template..."
 cat > "$HOME" << 'HOME_EOF'
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import UIInput from '@/components/library/ui/UIInput';
-import UIButton from '@/components/library/ui/UIButton';
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { Search } from "lucide-react";
 
 export default function HomePage() {
@@ -163,9 +163,7 @@ export default function HomePage() {
 	const handleSearch = () => {
 		const trimmed = searchQuery.trim();
 		if (trimmed) {
-			navigate(`/accounts?search=${encodeURIComponent(trimmed)}`);
-		} else {
-			navigate('/accounts');
+			navigate(`/search?q=${encodeURIComponent(trimmed)}`);
 		}
 	};
 
@@ -186,7 +184,7 @@ export default function HomePage() {
 				<div className="flex flex-col gap-4">
 					<div className="relative">
 						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
-						<UIInput
+						<Input
 							type="text"
 							value={searchQuery}
 							onChange={(e) => setSearchQuery(e.target.value)}
@@ -196,12 +194,9 @@ export default function HomePage() {
 						/>
 					</div>
 					<div className="flex gap-3 justify-center">
-						<UIButton onClick={handleSearch} variant="primary">
+						<Button onClick={handleSearch}>
 							Search
-						</UIButton>
-						<UIButton onClick={() => navigate('/accounts')} variant="secondary">
-							Browse All
-						</UIButton>
+						</Button>
 					</div>
 				</div>
 			</div>

package/scripts/verify-consistency.sh

@@ -81,56 +81,58 @@ fi
 echo ""
 
 # Check 4: Template imports
+# Note: Outer app templates (Home, NotFound, Search) should use shadcn Button from @/components/ui/
+#       Command center dashboard templates (BlankDashboard) should use UIButton from @/components/library/
 echo "📄 Checking template imports..."
 TEMPLATE_ERRORS=0
 
-# Check NotFound.tsx.template
+# Check NotFound.tsx.template (outer app - should use shadcn Button)
 if [ -f "$ROOT/src/templates/pages/NotFound.tsx.template" ]; then
-  if grep -q "from '@/components/library/ui/UIButton'" "$ROOT/src/templates/pages/NotFound.tsx.template"; then
-    echo -e "  ${GREEN}✓${NC} NotFound.tsx.template imports UIButton correctly"
+  if grep -q 'from "@/components/ui/button"' "$ROOT/src/templates/pages/NotFound.tsx.template"; then
+    echo -e "  ${GREEN}✓${NC} NotFound.tsx.template uses shadcn Button (correct for outer app)"
   else
-    echo -e "  ${RED}✗${NC} NotFound.tsx.template does not import UIButton correctly"
+    echo -e "  ${RED}✗${NC} NotFound.tsx.template should import Button from @/components/ui/button (outer app context)"
     TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
   fi
 fi
 
-# Check Home.tsx.template
+# Check Home.tsx.template (outer app - should use shadcn Button/Input)
 if [ -f "$ROOT/src/templates/pages/Home.tsx.template" ]; then
-  if grep -q "from '@/components/library/ui/UIInput'" "$ROOT/src/templates/pages/Home.tsx.template"; then
-    echo -e "  ${GREEN}✓${NC} Home.tsx.template imports UIInput correctly"
+  if grep -q 'from "@/components/ui/input"' "$ROOT/src/templates/pages/Home.tsx.template"; then
+    echo -e "  ${GREEN}✓${NC} Home.tsx.template uses shadcn Input (correct for outer app)"
   else
-    echo -e "  ${RED}✗${NC} Home.tsx.template does not import UIInput correctly"
+    echo -e "  ${RED}✗${NC} Home.tsx.template should import Input from @/components/ui/input (outer app context)"
     TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
   fi
 
-  if grep -q "from '@/components/library/ui/UIButton'" "$ROOT/src/templates/pages/Home.tsx.template"; then
-    echo -e "  ${GREEN}✓${NC} Home.tsx.template imports UIButton correctly"
+  if grep -q 'from "@/components/ui/button"' "$ROOT/src/templates/pages/Home.tsx.template"; then
+    echo -e "  ${GREEN}✓${NC} Home.tsx.template uses shadcn Button (correct for outer app)"
   else
-    echo -e "  ${RED}✗${NC} Home.tsx.template does not import UIButton correctly"
+    echo -e "  ${RED}✗${NC} Home.tsx.template should import Button from @/components/ui/button (outer app context)"
     TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
   fi
 fi
 
-# Check Search.tsx.template
-if [ -f "$ROOT/src/templates/pages/Search.tsx.template" ]; then
-  if grep -q "from '@/components/library/ui/UIInput'" "$ROOT/src/templates/pages/Search.tsx.template"; then
-    echo -e "  ${GREEN}✓${NC} Search.tsx.template imports UIInput correctly"
+# Check BlankDashboard.tsx.template (command center - should use library components)
+if [ -f "$ROOT/src/templates/pages/BlankDashboard.tsx.template" ]; then
+  if grep -q 'from "@/components/library"' "$ROOT/src/templates/pages/BlankDashboard.tsx.template"; then
+    echo -e "  ${GREEN}✓${NC} BlankDashboard.tsx.template uses library components (correct for command center)"
   else
-    echo -e "  ${YELLOW}⚠${NC} Search.tsx.template does not import UIInput (may not need it)"
+    echo -e "  ${YELLOW}⚠${NC} BlankDashboard.tsx.template may not import from library (check if needed)"
   fi
 fi
 
-# Check for wrong imports in templates
-WRONG_IMPORTS=$(grep -r "from '@/components/library/ui/Button'" "$ROOT/src/templates/" 2>/dev/null || true)
+# Check for incorrect library imports in outer app templates
+WRONG_IMPORTS=$(grep -E "(Home|NotFound|Search)\.tsx\.template" "$ROOT/src/templates/pages/" | xargs grep -l "from '@/components/library/ui/UIButton'" 2>/dev/null || true)
 if [ -n "$WRONG_IMPORTS" ]; then
-  echo -e "  ${RED}✗${NC} Templates importing Button instead of UIButton:"
+  echo -e "  ${RED}✗${NC} Outer app templates incorrectly importing UIButton (should use shadcn Button):"
   echo "$WRONG_IMPORTS" | sed 's/^/    /'
   TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
 fi
 
-WRONG_IMPORTS=$(grep -r "from '@/components/library/ui/Input'" "$ROOT/src/templates/" 2>/dev/null || true)
+WRONG_IMPORTS=$(grep -E "(Home|NotFound|Search)\.tsx\.template" "$ROOT/src/templates/pages/" | xargs grep -l "from '@/components/library/ui/UIInput'" 2>/dev/null || true)
 if [ -n "$WRONG_IMPORTS" ]; then
-  echo -e "  ${RED}✗${NC} Templates importing Input instead of UIInput:"
+  echo -e "  ${RED}✗${NC} Outer app templates incorrectly importing UIInput (should use shadcn Input):"
   echo "$WRONG_IMPORTS" | sed 's/^/    /'
   TEMPLATE_ERRORS=$((TEMPLATE_ERRORS + 1))
 fi

package/src/templates/pages/Home.tsx.template

@@ -1,7 +1,7 @@
 import { useState } from "react";
 import { useNavigate } from "react-router";
-import UIInput from '@/components/library/ui/UIInput';
-import UIButton from '@/components/library/ui/UIButton';
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
 import { Search } from "lucide-react";
 
 export default function HomePage() {
@@ -34,7 +34,7 @@ export default function HomePage() {
 				<div className="flex flex-col gap-4">
 					<div className="relative">
 						<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-5 w-5 text-slate-400" />
-						<UIInput
+						<Input
 							type="text"
 							value={searchQuery}
 							onChange={(e) => setSearchQuery(e.target.value)}
@@ -44,12 +44,12 @@ export default function HomePage() {
 						/>
 					</div>
 					<div className="flex gap-3 justify-center">
-						<UIButton onClick={handleSearch} variant="primary">
+						<Button onClick={handleSearch}>
 							Search
-						</UIButton>
-						<UIButton onClick={() => navigate('/accounts')} variant="secondary">
+						</Button>
+						<Button onClick={() => navigate('/accounts')} variant="outline">
 							Browse All
-						</UIButton>
+						</Button>
 					</div>
 				</div>
 			</div>

package/src/templates/pages/NotFound.tsx.template

@@ -1,5 +1,5 @@
 import { useNavigate } from "react-router";
-import UIButton from '@/components/library/ui/UIButton';
+import { Button } from "@/components/ui/button";
 
 export default function NotFound() {
 	const navigate = useNavigate();
@@ -12,7 +12,7 @@ export default function NotFound() {
 				<p className="text-lg text-slate-600 dark:text-slate-400 mb-8">
 					The page you're looking for doesn't exist.
 				</p>
-				<UIButton onClick={() => navigate("/")}>Go Home</UIButton>
+				<Button onClick={() => navigate("/")}>Go Home</Button>
 			</div>
 		</div>
 	);