@schandlergarcia/sf-web-components 2.3.13 → 2.3.15

package/CHANGELOG.md

@@ -5,6 +5,20 @@ 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.15] - 2026-04-14
+
+### Changed
+- **Renamed agent to "Partner Hub Agent"** — Header title changed from "Engine Virtual Agent" to "Partner Hub Agent", subtitle from "Eva · Online" to "Agentforce · Online", and greeting updated to "I'm your Partner Hub assistant".
+- **Removed Booking Segments (Data360Widget) from dashboard** — Removed the Data360Widget import and usage from PartnerHubDashboard. The component file remains in the library for future use.
+- **Simplified appLayout** — Removed the nav bar header; appLayout now renders only the Outlet.
+
+## [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,5 @@
-import { AgentforceConversationClient } from "./components/AgentforceConversationClient";
-import { Outlet, Link, useLocation } from "react-router";
-import { getAllRoutes } from "./router-utils";
-import { useState } from "react";
+import { Outlet } from "react-router";
 
 export default function AppLayout() {
-	return (
-		<>
-			<Outlet />
-			<AgentforceConversationClient agentId="<USER_AGENT_ID_18_CHAR_0Xx...>" />
-		</>
-	);
+	return <Outlet />;
 }

package/brands/engine/app/components/AgentPanel.tsx

@@ -22,7 +22,7 @@ const SCRIPT: ScriptStep[] = [
   // --- Auto-play greeting ---
   {
     role: "agent",
-    text: "Hi Jamie! 👋 I'm Eva, your Engine partner assistant. How can I help you today?",
+    text: "Hi Jamie! 👋 I'm your Partner Hub assistant. How can I help you today?",
   },
 
   // --- Prompt 1: Ask about the canceled booking ---
@@ -296,9 +296,9 @@ export default function AgentPanel() {
                 </div>
                 <div>
                   <h3 className="text-sm font-semibold text-white">
-                    Engine Virtual Agent
+                    Partner Hub Agent
                   </h3>
-                  <p className="text-xs text-white/60">Eva · Online</p>
+                  <p className="text-xs text-white/60">Agentforce · Online</p>
                 </div>
               </div>
               <button

package/brands/engine/app/pages/PartnerHubDashboard.tsx

@@ -33,7 +33,6 @@ import {
 } from "@heroicons/react/24/outline";
 import * as d3 from "d3";
 import engineLogo from "@/assets/images/engine_logo.png";
-import Data360Widget from "@/components/Data360Widget";
 
 /**
  * Partner Hub Dashboard
@@ -968,9 +967,6 @@ export default function PartnerHubDashboard() {
           </div>
         </div>
 
-        {/* Data 360 Widget */}
-        <Data360Widget />
-
         {/* Property Leaderboard - NEW SECTION */}
         {isLoading ? (
           <div className="bg-gradient-to-br from-white via-[var(--color-dash-surface)] to-white dark:from-[var(--color-dash-text)] dark:via-[var(--color-dash-dark)] dark:to-[var(--color-dash-text)] rounded-2xl p-8 shadow-xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30">

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.15",
   "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);
 }