@schandlergarcia/sf-web-components 2.3.13 → 2.3.14

package/CHANGELOG.md

@@ -5,6 +5,13 @@ 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).
 
+## [2.3.14] - 2026-04-14
+
+### Fixed
+- **demo:engine now installs complete working state** — Synced all working project files (appLayout, routes, CommandCenter, AgentPanel, hooks, api, config, styles) into the brands/engine/app/ backup so `--demo engine` installs the full working Partner Hub with correct nav bar, Engine theme, and AgentPanel chat.
+- **apply-brand.mjs --demo now copies styles and all top-level components** — The `--demo` command previously excluded the styles directory and only copied AgentforceConversationClient. Now it copies `app/styles/` (including Engine theme global.css), all top-level component files (AgentPanel, Data360Widget, etc.), and writes a `.brand` marker for theme-aware resets.
+- **Fixed broken appLayout.tsx in backup** — Removed placeholder `AgentforceConversationClient` with invalid agent ID from the Engine brand backup. Restored working nav bar with dynamic route-driven navigation.
+
 ## [2.3.13] - 2026-04-14
 
 ### Changed

package/brands/engine/app/appLayout.tsx

@@ -1,13 +1,90 @@
-import { AgentforceConversationClient } from "./components/AgentforceConversationClient";
-import { Outlet, Link, useLocation } from "react-router";
+import { Outlet, Link, useLocation, useMatches } from "react-router";
 import { getAllRoutes } from "./router-utils";
 import { useState } from "react";
 
 export default function AppLayout() {
+	const [isOpen, setIsOpen] = useState(false);
+	const location = useLocation();
+	const matches = useMatches();
+
+	const showNavBar = matches.some(
+		(m) => (m.handle as Record<string, unknown>)?.showNavBar === true,
+	);
+
+	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 (
 		<>
+			{showNavBar && (
+				<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">
+								Partner Hub
+							</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 />
-			<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />
 		</>
 	);
 }

package/brands/engine/app/styles/global.css

@@ -10,42 +10,6 @@
   body {
     @apply antialiased bg-white;
   }
-
-  /* Smooth scrolling */
-  html {
-    scroll-behavior: smooth;
-  }
-
-  /* Custom animations */
-  @keyframes fade-in {
-    from {
-      opacity: 0;
-      transform: translateY(10px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes slide-up {
-    from {
-      opacity: 0;
-      transform: translateY(20px);
-    }
-    to {
-      opacity: 1;
-      transform: translateY(0);
-    }
-  }
-
-  .animate-fade-in {
-    animation: fade-in 0.6s ease-out;
-  }
-
-  .animate-slide-up {
-    animation: slide-up 0.5s ease-out;
-  }
 }
 
 @import 'tw-animate-css';
@@ -128,6 +92,41 @@
 }
 
 :root {
+  --dash-text:    #0D1117;
+  --dash-muted:   #3d4047;
+  --dash-label:   #8b8d91;
+  --dash-surface: #fef9ef;
+  --dash-border:  #e2c97a;
+  --dash-accent:  #FFB200;
+  --dash-success: #34d399;
+  --dash-info:    #67e8f9;
+  --dash-warning: #FD4B23;
+  --dash-danger:  #dc2626;
+  --dash-dark:    #0D1117;
+  --dash-darker:  #06090d;
+  --dash-chart-1: #FFB200;
+  --dash-chart-2: #1E9D6D;
+  --dash-chart-3: #7DCBD9;
+  --dash-chart-4: #FD4B23;
+  --dash-metric-size: 3.25rem;
+  --dash-metric-sub: 2.25rem;
+  --color-dash-text:    var(--dash-text);
+  --color-dash-muted:   var(--dash-muted);
+  --color-dash-label:   var(--dash-label);
+  --color-dash-surface: var(--dash-surface);
+  --color-dash-border:  var(--dash-border);
+  --color-dash-accent:  var(--dash-accent);
+  --color-dash-success: var(--dash-success);
+  --color-dash-info:    var(--dash-info);
+  --color-dash-warning: var(--dash-warning);
+  --color-dash-danger:  var(--dash-danger);
+  --color-dash-dark:    var(--dash-dark);
+  --color-dash-darker:  var(--dash-darker);
+  --color-dash-chart-1: var(--dash-chart-1);
+  --color-dash-chart-2: var(--dash-chart-2);
+  --color-dash-chart-3: var(--dash-chart-3);
+  --color-dash-chart-4: var(--dash-chart-4);
+
   --radius: 0.625rem;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);

package/package.json

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

package/scripts/apply-brand.mjs

@@ -141,9 +141,8 @@ if (isDemo) {
   console.log(`\n🚀 Installing "${brandName}" demo app...\n`);
   let installed = 0;
 
-  // Copy the full app directory tree into src/
-  // Note: 'styles' is deliberately excluded — demo keeps the neutral theme
-  const appSubdirs = ['pages', 'hooks', 'api', 'config', 'features', 'components/workspace', 'components/alerts', 'components/layouts'];
+  // Copy the full app directory tree into src/ (including styles for brand theming)
+  const appSubdirs = ['pages', 'hooks', 'api', 'config', 'features', 'styles', 'components/workspace', 'components/alerts', 'components/layouts'];
 
   for (const sub of appSubdirs) {
     const src = path.join(appDir, sub);
@@ -157,20 +156,20 @@ if (isDemo) {
     }
   }
 
-  // Copy AgentforceConversationClient to src/components/
-  const agentClient = path.join(appDir, 'components/AgentforceConversationClient.tsx');
-  const agentClientInherit = path.join(appDir, 'components/__inherit_AgentforceConversationClient.tsx');
+  // Copy top-level component files to src/components/
   const componentsDir = path.join(cwd, 'src/components');
   if (!fs.existsSync(componentsDir)) fs.mkdirSync(componentsDir, { recursive: true });
 
-  if (fs.existsSync(agentClient)) {
-    fs.copyFileSync(agentClient, path.join(componentsDir, 'AgentforceConversationClient.tsx'));
-    console.log('  ✓ Installed src/components/AgentforceConversationClient.tsx');
-    installed++;
-  }
-  if (fs.existsSync(agentClientInherit)) {
-    fs.copyFileSync(agentClientInherit, path.join(componentsDir, '__inherit_AgentforceConversationClient.tsx'));
-    installed++;
+  const componentFiles = fs.readdirSync(path.join(appDir, 'components')).filter(f =>
+    f.endsWith('.tsx') || f.endsWith('.jsx') || f.endsWith('.ts') || f.endsWith('.js')
+  );
+  for (const file of componentFiles) {
+    const src = path.join(appDir, 'components', file);
+    if (fs.statSync(src).isFile()) {
+      fs.copyFileSync(src, path.join(componentsDir, file));
+      console.log(`  ✓ Installed src/components/${file}`);
+      installed++;
+    }
   }
 
   // Copy root-level app files (routes, appLayout, etc.)
@@ -224,9 +223,23 @@ if (isDemo) {
     installed++;
   }
 
+  // If app/styles didn't exist, apply brand colors from the brand root global.css
+  const targetCSS = path.join(cwd, 'src/styles/global.css');
+  if (!fs.existsSync(path.join(appDir, 'styles'))) {
+    const brandCSS = path.join(brandDir, 'global.css');
+    if (fs.existsSync(brandCSS)) {
+      fs.mkdirSync(path.dirname(targetCSS), { recursive: true });
+      fs.copyFileSync(brandCSS, targetCSS);
+      console.log('  ✓ Brand theme applied (global.css)');
+      installed++;
+    }
+  }
+
+  // Write .brand marker
+  fs.writeFileSync(path.join(cwd, '.brand'), brandName + '\n', 'utf-8');
+
   console.log(`\n✅ "${brandName}" demo app installed (${installed} files).`);
-  console.log('   The app uses the NEUTRAL color palette.');
-  console.log(`   Run "npm run brand:${brandName}" to switch to ${brandName} colors.\n`);
+  console.log(`   Brand colors applied. Run "npm run brand:reset" to revert to neutral.\n`);
   process.exit(0);
 }