@schandlergarcia/sf-web-components 2.3.12 → 2.3.14

package/CHANGELOG.md

@@ -5,6 +5,18 @@ 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
+- **Rewrote AgentPanel demo script to Partner Upsell story** — Replaced the penalties placeholder conversation with the full 3-prompt demo flow: (1) User asks about a canceled block booking at Summit Austin Convention Center, Eva surfaces cancellation details (TechCorp, 40 rooms, $24k lost revenue); (2) User asks what can be done, Eva pivots to SDR mode and presents a rich Engine Network Promotion offer card with $159/night rate, 8% commission, projected 70% fill / $12,287 net; (3) User accepts, Eva launches the promo and confirms with a PROMO-SUM-0519 confirmation. Increased typing delay cap to 5.5s for longer card-style messages.
+
 ## [2.3.12] - 2026-04-13
 
 ### 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/components/AgentPanel.tsx

@@ -0,0 +1,402 @@
+import React, { useState, useRef, useEffect, useCallback } from "react";
+import { createPortal } from "react-dom";
+import { SparklesIcon } from "@heroicons/react/24/solid";
+import {
+  PaperAirplaneIcon,
+  ChevronDownIcon,
+} from "@heroicons/react/24/outline";
+
+interface Message {
+  id: string;
+  role: "user" | "agent";
+  text: string;
+  timestamp: string;
+}
+
+interface ScriptStep {
+  role: "user" | "agent";
+  text: string;
+}
+
+const SCRIPT: ScriptStep[] = [
+  // --- Auto-play greeting ---
+  {
+    role: "agent",
+    text: "Hi Jamie! 👋 I'm Eva, your Engine partner assistant. How can I help you today?",
+  },
+
+  // --- Prompt 1: Ask about the canceled booking ---
+  {
+    role: "user",
+    text: "I just got an alert that a block booking was canceled at our Austin Convention Center for next week. What happened?",
+  },
+  {
+    role: "agent",
+    text: "Let me pull up that reservation for you...",
+  },
+  {
+    role: "agent",
+    text: "🔴 CANCELED BOOKING\n\n🏨 Summit Austin Convention Center\n🏢 Client: TechCorp Inc.\n\n📋 Details:\n• Original block: 40 rooms\n• Dates: May 19 – 21 (3 nights)\n• Room rate: $200/night\n• Lost revenue: $24,000\n\n📅 Canceled: Apr 11, 2026\n⚠️ Status: Within penalty window",
+  },
+  {
+    role: "agent",
+    text: "TechCorp canceled their 40-room block for May 19–21. The reason given was that their annual conference is moving to a virtual format this year. This was within the attrition penalty window, so a penalty may apply — but that still leaves 40 rooms open for next week.",
+  },
+
+  // --- Prompt 2: What can be done ---
+  {
+    role: "user",
+    text: "That's a lot of empty rooms. Is there anything we can do to fill them on short notice?",
+  },
+  {
+    role: "agent",
+    text: "Actually, yes — I have an idea. Let me put together an option for you.",
+  },
+  {
+    role: "agent",
+    text: "⚡ ENGINE NETWORK PROMOTION\nFill your open rooms through Engine's network\n\n━━━━━━━━━━━━━━━━━━━━━━━━━\nSummit Austin Convention Center\n40 rooms · May 19–21 · 3 nights\n━━━━━━━━━━━━━━━━━━━━━━━━━\n\n💰 YOUR RATE\n$159/night (20% off rack rate)\n\n📡 ENGINE PROMOTES TO\n2,400+ corporate travel managers\n\n📉 COMMISSION\n12% standard → 8% promotional\nYou save $1,526 vs. standard bookings\n\n━━━━━━━━━━━━━━━━━━━━━━━━━\n📈 PROJECTED OUTCOME\n• Est. fill: 28 rooms (70%)\n• Revenue: $13,356\n• Net after commission: $12,287\n━━━━━━━━━━━━━━━━━━━━━━━━━",
+  },
+  {
+    role: "agent",
+    text: "Here's the play: we run a targeted promotion across Engine's corporate travel network — 2,400+ travel managers get notified about discounted rates at Summit Austin for May 19–21.\n\nWe'd list the rooms at $159/night, and your commission drops from 12% to 8% for promo bookings. On a projected 70% fill, that's $12,287 net — versus $0 if the rooms sit empty.\n\nWant to launch it?",
+  },
+
+  // --- Prompt 3: Accept the offer ---
+  {
+    role: "user",
+    text: "That makes sense — empty rooms earn nothing. Let's launch it.",
+  },
+  {
+    role: "agent",
+    text: "Launching your promotion now...",
+  },
+  {
+    role: "agent",
+    text: "✅ PROMOTION LIVE\n\n🆔 PROMO-SUM-0519\n🏨 Summit Austin Convention Center\n📅 May 19–21 (3 nights)\n💰 Rate: $159/night\n📉 Commission: 8% (promotional)\n📡 Distribution: Engine corporate travel network\n\nYour promotion is live and going out to 2,400+ travel managers now. I'll send you a fill-rate update in 48 hours.",
+  },
+];
+
+function typingDelay(text: string): number {
+  const base = 900;
+  const perChar = 10;
+  const jitter = Math.random() * 500;
+  return Math.min(base + text.length * perChar + jitter, 5500);
+}
+
+function now() {
+  return new Date().toLocaleTimeString([], { hour: "numeric", minute: "2-digit" });
+}
+
+function TypingIndicator() {
+  return (
+    <div className="flex items-center gap-1 px-4 py-1.5">
+      <div className="flex items-end gap-3">
+        <div className="flex-shrink-0 h-7 w-7 rounded-full bg-[var(--color-dash-dark)] flex items-center justify-center">
+          <SparklesIcon className="h-3.5 w-3.5 text-white" />
+        </div>
+        <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 rounded-2xl rounded-bl-md px-4 py-3">
+          <div className="flex items-center gap-1.5">
+            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "0ms" }} />
+            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "150ms" }} />
+            <span className="h-2 w-2 rounded-full bg-[var(--color-dash-label)] animate-bounce" style={{ animationDelay: "300ms" }} />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function AgentMessage({ text, timestamp }: { text: string; timestamp: string }) {
+  return (
+    <div className="px-4 py-1.5">
+      <div className="flex items-end gap-3">
+        <div className="flex-shrink-0 h-7 w-7 rounded-full bg-[var(--color-dash-dark)] flex items-center justify-center">
+          <SparklesIcon className="h-3.5 w-3.5 text-white" />
+        </div>
+        <div className="max-w-[80%]">
+          <div className="bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/20 rounded-2xl rounded-bl-md px-4 py-3 border border-[var(--color-dash-border)]/30 dark:border-[var(--color-dash-muted)]/30">
+            <p className="text-sm text-[var(--color-dash-text)] dark:text-white leading-relaxed whitespace-pre-wrap">
+              {text}
+            </p>
+          </div>
+          <p className="text-[10px] text-[var(--color-dash-label)] mt-1 ml-1">{timestamp}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function UserMessage({ text, timestamp }: { text: string; timestamp: string }) {
+  return (
+    <div className="px-4 py-1.5">
+      <div className="flex items-end justify-end gap-3">
+        <div className="max-w-[80%]">
+          <div className="bg-[var(--color-dash-accent)] rounded-2xl rounded-br-md px-4 py-3">
+            <p className="text-sm text-white leading-relaxed">{text}</p>
+          </div>
+          <p className="text-[10px] text-[var(--color-dash-label)] mt-1 text-right mr-1">{timestamp}</p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default function AgentPanel() {
+  const [isOpen, setIsOpen] = useState(false);
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [isTyping, setIsTyping] = useState(false);
+  const [inputValue, setInputValue] = useState("");
+  const [scriptIndex, setScriptIndex] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+  const hasStartedRef = useRef(false);
+  const messagesEndRef = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  useEffect(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, [messages, isTyping]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setTimeout(() => inputRef.current?.focus(), 300);
+    }
+  }, [isOpen]);
+
+  // Auto-play the first agent message when panel opens
+  useEffect(() => {
+    if (isOpen && !hasStartedRef.current && scriptIndex === 0) {
+      hasStartedRef.current = true;
+      playNextStep();
+    }
+  }, [isOpen]);
+
+  const playNextStep = useCallback(async () => {
+    if (scriptIndex >= SCRIPT.length || isAnimating) return;
+
+    const step = SCRIPT[scriptIndex];
+    setIsAnimating(true);
+
+    if (step.role === "agent") {
+      setIsTyping(true);
+      await delay(typingDelay(step.text));
+      setIsTyping(false);
+    }
+
+    const msg: Message = {
+      id: `msg-${Date.now()}`,
+      role: step.role,
+      text: step.text,
+      timestamp: now(),
+    };
+    setMessages((prev) => [...prev, msg]);
+    setScriptIndex((prev) => prev + 1);
+    setIsAnimating(false);
+
+    // If we just played a user message, auto-play all following agent messages
+    const nextIndex = scriptIndex + 1;
+    if (step.role === "user" && nextIndex < SCRIPT.length && SCRIPT[nextIndex].role === "agent") {
+      await delay(400);
+      await playAgentChain(nextIndex);
+    }
+  }, [scriptIndex, isAnimating]);
+
+  async function playAgentChain(startIndex: number) {
+    let idx = startIndex;
+    setIsAnimating(true);
+    while (idx < SCRIPT.length && SCRIPT[idx].role === "agent") {
+      const step = SCRIPT[idx];
+      setIsTyping(true);
+      await delay(typingDelay(step.text));
+      setIsTyping(false);
+
+      const msg: Message = {
+        id: `msg-${Date.now()}-${idx}`,
+        role: "agent",
+        text: step.text,
+        timestamp: now(),
+      };
+      setMessages((prev) => [...prev, msg]);
+      setScriptIndex(idx + 1);
+      idx++;
+      if (idx < SCRIPT.length && SCRIPT[idx].role === "agent") {
+        await delay(500);
+      }
+    }
+    setIsAnimating(false);
+  }
+
+  // Right arrow key stages the next user message into the input
+  useEffect(() => {
+    function onKey(e: KeyboardEvent) {
+      if (e.key === "ArrowRight" && isOpen && !isAnimating && scriptIndex < SCRIPT.length) {
+        e.preventDefault();
+        const next = SCRIPT[scriptIndex];
+        if (next.role === "user") {
+          setInputValue(next.text);
+          inputRef.current?.focus();
+        }
+      }
+    }
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [isOpen, scriptIndex, isAnimating]);
+
+  function handleSend() {
+    const text = inputValue.trim();
+    if (!text) return;
+    setInputValue("");
+
+    // Check if this matches the next scripted user message
+    if (scriptIndex < SCRIPT.length && SCRIPT[scriptIndex].role === "user" && text === SCRIPT[scriptIndex].text) {
+      playNextStep();
+      return;
+    }
+
+    const userMsg: Message = {
+      id: `u-${Date.now()}`,
+      role: "user",
+      text,
+      timestamp: now(),
+    };
+    setMessages((prev) => [...prev, userMsg]);
+
+    setIsTyping(true);
+    setTimeout(() => {
+      setIsTyping(false);
+      const agentMsg: Message = {
+        id: `a-${Date.now()}`,
+        role: "agent",
+        text: "I'm looking into that for you — one moment please.",
+        timestamp: now(),
+      };
+      setMessages((prev) => [...prev, agentMsg]);
+    }, 1500);
+  }
+
+  const scriptDone = scriptIndex >= SCRIPT.length;
+
+  const panel = isOpen
+    ? createPortal(
+        <>
+          <div
+            className="fixed inset-0 z-[9998] bg-black/20 backdrop-blur-sm lg:hidden"
+            onClick={() => setIsOpen(false)}
+          />
+          <div
+            className="fixed z-[9999] bottom-6 right-6 w-[380px] h-[520px] flex flex-col rounded-2xl shadow-2xl border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 overflow-hidden"
+            style={{
+              animation: "agent-panel-in 0.25s cubic-bezier(0.16, 1, 0.3, 1)",
+            }}
+          >
+            {/* Header */}
+            <div className="bg-[var(--color-dash-dark)] px-5 py-4 flex items-center justify-between flex-shrink-0">
+              <div className="flex items-center gap-3">
+                <div className="h-8 w-8 rounded-full bg-white/10 flex items-center justify-center">
+                  <SparklesIcon className="h-4 w-4 text-white" />
+                </div>
+                <div>
+                  <h3 className="text-sm font-semibold text-white">
+                    Engine Virtual Agent
+                  </h3>
+                  <p className="text-xs text-white/60">Eva · Online</p>
+                </div>
+              </div>
+              <button
+                onClick={() => setIsOpen(false)}
+                className="rounded-lg p-1.5 text-white/60 hover:text-white hover:bg-white/10 transition-colors"
+              >
+                <ChevronDownIcon className="h-5 w-5" />
+              </button>
+            </div>
+
+            {/* Messages */}
+            <div className="flex-1 overflow-y-auto bg-white dark:bg-[var(--color-dash-text)] py-4">
+              {messages.length === 0 && !isTyping && (
+                <div className="flex flex-col items-center justify-center h-full gap-3 px-6 text-center">
+                  <div className="h-12 w-12 rounded-full bg-[var(--color-dash-accent)]/10 flex items-center justify-center">
+                    <SparklesIcon className="h-6 w-6 text-[var(--color-dash-accent)]" />
+                  </div>
+                  <p className="text-sm text-[var(--color-dash-muted)] dark:text-[var(--color-dash-label)]">
+                    Eva is connecting...
+                  </p>
+                </div>
+              )}
+              {messages.map((msg) =>
+                msg.role === "agent" ? (
+                  <AgentMessage key={msg.id} text={msg.text} timestamp={msg.timestamp} />
+                ) : (
+                  <UserMessage key={msg.id} text={msg.text} timestamp={msg.timestamp} />
+                )
+              )}
+              {isTyping && <TypingIndicator />}
+              <div ref={messagesEndRef} />
+            </div>
+
+            {/* Input */}
+            <div className="flex-shrink-0 bg-white dark:bg-[var(--color-dash-text)] border-t border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 px-4 py-3">
+              <form
+                onSubmit={(e) => {
+                  e.preventDefault();
+                  handleSend();
+                }}
+                className="flex items-center gap-2"
+              >
+                <input
+                  ref={inputRef}
+                  type="text"
+                  value={inputValue}
+                  onChange={(e) => setInputValue(e.target.value)}
+                  placeholder="Type your message..."
+                  className="flex-1 bg-[var(--color-dash-surface)] dark:bg-[var(--color-dash-muted)]/10 border border-[var(--color-dash-label)]/20 dark:border-[var(--color-dash-muted)]/30 rounded-xl px-4 py-2.5 text-sm text-[var(--color-dash-text)] dark:text-white placeholder:text-[var(--color-dash-label)] focus:outline-none focus:ring-2 focus:ring-[var(--color-dash-accent)]/30 focus:border-[var(--color-dash-accent)] transition-all"
+                />
+                <button
+                  type="submit"
+                  disabled={!inputValue.trim()}
+                  className="flex-shrink-0 h-10 w-10 rounded-xl bg-[var(--color-dash-accent)] hover:brightness-110 disabled:opacity-40 disabled:cursor-not-allowed flex items-center justify-center transition-all"
+                >
+                  <PaperAirplaneIcon className="h-4 w-4 text-white" />
+                </button>
+              </form>
+              <p className="text-[10px] text-[var(--color-dash-label)] text-center mt-2">
+                Powered by Agentforce
+              </p>
+            </div>
+          </div>
+        </>,
+        document.body
+      )
+    : null;
+
+  return (
+    <>
+      {panel}
+
+      {!isOpen && (
+        <button
+          onClick={() => setIsOpen(true)}
+          className="fixed z-[9999] bottom-6 right-6 h-14 w-14 rounded-full bg-[var(--color-dash-dark)] hover:scale-110 shadow-xl hover:shadow-2xl flex items-center justify-center transition-all duration-200"
+          style={{
+            animation: "agent-bubble-in 0.3s cubic-bezier(0.16, 1, 0.3, 1)",
+          }}
+        >
+          <SparklesIcon className="h-6 w-6 text-white" />
+        </button>
+      )}
+
+      <style>{`
+        @keyframes agent-panel-in {
+          from { opacity: 0; transform: translateY(20px) scale(0.95); }
+          to { opacity: 1; transform: translateY(0) scale(1); }
+        }
+        @keyframes agent-bubble-in {
+          from { opacity: 0; transform: scale(0.5); }
+          to { opacity: 1; transform: scale(1); }
+        }
+      `}</style>
+    </>
+  );
+}
+
+function delay(ms: number) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}

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