@schandlergarcia/sf-web-components 2.2.1 → 2.3.1

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

@@ -0,0 +1,13 @@
+export default function Search() {
+	return (
+		<div className="flex min-h-[80vh] items-center justify-center px-4 sm:px-6 lg:px-8 bg-slate-50 dark:bg-slate-950 transition-colors">
+			<div className="w-full max-w-4xl">
+				<div className="text-center mb-8">
+					<h1 className="text-4xl font-bold text-slate-900 dark:text-slate-50 mb-4">Search</h1>
+					<p className="text-lg text-slate-600 dark:text-slate-300">Find records across your organization.</p>
+				</div>
+				<p className="text-center text-slate-500 dark:text-slate-400">Search functionality coming soon...</p>
+			</div>
+		</div>
+	);
+}

package/brands/engine/app/router-utils.tsx

@@ -0,0 +1,35 @@
+import type { RouteObject } from 'react-router';
+import { routes } from './routes';
+
+export type RouteWithFullPath = RouteObject & { fullPath: string };
+
+const flatMapRoutes = (
+  route: RouteObject,
+  parentPath: string = ''
+): RouteWithFullPath[] => {
+  let fullPath: string;
+
+  if (route.index) {
+    fullPath = parentPath || '/';
+  } else if (route.path) {
+    if (route.path.startsWith('/')) {
+      fullPath = route.path;
+    } else {
+      fullPath =
+        parentPath === '/' ? `/${route.path}` : `${parentPath}/${route.path}`;
+    }
+  } else {
+    fullPath = parentPath;
+  }
+
+  const routeWithPath = { ...route, fullPath };
+
+  const childRoutes =
+    route.children?.flatMap(child => flatMapRoutes(child, fullPath)) || [];
+
+  return [routeWithPath, ...childRoutes];
+};
+
+export const getAllRoutes = (): RouteWithFullPath[] => {
+  return routes.flatMap(route => flatMapRoutes(route));
+};

package/brands/engine/app/routes.tsx

@@ -0,0 +1,39 @@
+import type { RouteObject } from 'react-router';
+import AppLayout from './appLayout';
+import Home from './pages/Home';
+import DataTest from './pages/DataTest';
+import AccountSearch from './features/object-search/__examples__/pages/AccountSearch';
+import AccountObjectDetailPage from './features/object-search/__examples__/pages/AccountObjectDetailPage';
+import NotFound from './pages/NotFound';
+
+export const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <AppLayout />,
+    children: [
+      {
+        index: true,
+        element: <Home />,
+        handle: { showInNavigation: true, showNavBar: true, label: "Partner Hub" }
+      },
+      {
+        path: 'data-test',
+        element: <DataTest />,
+        handle: { showInNavigation: true, showNavBar: true, label: "Data Test" }
+      },
+      {
+        path: 'accounts',
+        element: <AccountSearch />,
+        handle: { showInNavigation: true, showNavBar: true, label: "Accounts" }
+      },
+      {
+        path: 'accounts/:recordId',
+        element: <AccountObjectDetailPage />
+      },
+      {
+        path: '*',
+        element: <NotFound />
+      }
+    ]
+  }
+];

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

@@ -0,0 +1,270 @@
+@import '@heroui/styles';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  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';
+@import 'shadcn/tailwind.css';
+
+@custom-variant dark (&:is(.dark *));
+
+@source "../components/library";
+@source "../components/pages";
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-destructive-foreground: var(--destructive-foreground);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+
+  /* Engine brand palette — official guidelines */
+  --color-engine-black:  #0D1117;
+  --color-engine-cyan:   #7DCBD9;
+  --color-engine-green:  #1E9D6D;
+  --color-engine-blue:   #157DE5;
+  --color-engine-orange: #FD4B23;
+  --color-engine-amber:  #FFB200;
+  --color-engine-bg:     #F3F3F4;
+  --color-engine-border: #B0B1B3;
+  --color-engine-text:   #0D1117;
+  --color-engine-muted:  #616368;
+  --color-engine-label:  #B0B1B3;
+
+  /* Engine Cyan brand ramp */
+  --color-brand-50:  #F0FAFB;
+  --color-brand-100: #D9F2F5;
+  --color-brand-200: #B3E5EB;
+  --color-brand-300: #7DCBD9;
+  --color-brand-400: #5BB8CA;
+  --color-brand-500: #3AA0B5;
+  --color-brand-600: #2D849A;
+  --color-brand-700: #266B7E;
+  --color-brand-800: #235768;
+  --color-brand-900: #1F4858;
+  --color-brand-950: #112E3A;
+
+  --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
+  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
+
+  --radius-pill: 9999px;
+  --radius-card: 10px;
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/*
+ * Restore HeroUI theme variables inside the Command Center scope.
+ * Uses Engine brand colors: Cyan #7DCBD9 as secondary, Orange-Red #FD4B23 as danger.
+ */
+.heroui-scope {
+  --primary: #0D1117;
+  --primary-foreground: oklch(0.9911 0 0);
+  --secondary: #7DCBD9;
+  --secondary-foreground: #0D1117;
+  --success: #1E9D6D;
+  --success-foreground: oklch(0.9911 0 0);
+  --warning: #FFB200;
+  --warning-foreground: #0D1117;
+  --danger: #FD4B23;
+  --danger-foreground: oklch(0.9911 0 0);
+
+  --muted: oklch(0.5517 0.0138 285.94);
+  --accent: oklch(0.6204 0.195 253.83);
+  --accent-foreground: oklch(0.9911 0 0);
+  --background: #F3F3F4;
+  --foreground: #0D1117;
+  --default: oklch(94% 0.001 286.375);
+  --default-foreground: #0D1117;
+  --border: #B0B1B3;
+  --separator: oklch(92% 0.004 286.32);
+  --segment: oklch(100% 0 0);
+  --segment-foreground: #0D1117;
+  --surface: oklch(100% 0 0);
+  --surface-foreground: #0D1117;
+  --overlay: oklch(100% 0 0);
+  --overlay-foreground: #0D1117;
+  --focus: #157DE5;
+  --link: #0D1117;
+}
+
+/* ChatBar expanded overlay — horizontal padding so it doesn't hit window edges */
+body > .fixed.inset-x-0.rounded-2xl {
+  left: 1.5rem !important;
+  right: 1.5rem !important;
+}
+
+.dark .heroui-scope,
+.heroui-scope.dark {
+  --muted: oklch(70.5% 0.015 286.067);
+  --background: oklch(12% 0.005 285.823);
+  --foreground: oklch(0.9911 0 0);
+  --default: oklch(27.4% 0.006 286.033);
+  --default-foreground: oklch(0.9911 0 0);
+  --border: oklch(28% 0.006 286.033);
+  --separator: oklch(25% 0.006 286.033);
+  --segment: oklch(0.3964 0.01 285.93);
+  --segment-foreground: oklch(0.9911 0 0);
+  --surface: oklch(0.2103 0.0059 285.89);
+  --surface-foreground: oklch(0.9911 0 0);
+  --overlay: oklch(0.2103 0.0059 285.89);
+  --overlay-foreground: oklch(0.9911 0 0);
+  --warning: oklch(0.8203 0.1388 76.34);
+  --warning-foreground: #0D1117;
+  --danger: oklch(0.594 0.1967 24.63);
+  --danger-foreground: oklch(0.9911 0 0);
+  --focus: #157DE5;
+  --link: oklch(0.9911 0 0);
+}

package/package.json

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

package/scripts/apply-brand.mjs

@@ -1,15 +1,17 @@
 #!/usr/bin/env node
 
 /**
- * apply-brand.mjs — Apply a brand theme to the project.
+ * apply-brand.mjs — Apply a brand theme or install a full demo app.
  *
  * Usage:
- *   node scripts/apply-brand.mjs engine     # Apply Engine brand
- *   node scripts/apply-brand.mjs --list     # List available brands
- *   node scripts/apply-brand.mjs --reset    # Remove brand, restore neutral theme
+ *   node scripts/apply-brand.mjs engine          # Apply Engine brand colors only
+ *   node scripts/apply-brand.mjs --demo engine   # Install full Engine demo app (neutral theme)
+ *   node scripts/apply-brand.mjs --list          # List available brands
+ *   node scripts/apply-brand.mjs --reset         # Remove brand, restore neutral theme
  *
- * When run from a consuming project (via npm run brand:engine), the script
- * detects the package location automatically.
+ * The demo command installs the full app (dashboard, routes, hooks, queries,
+ * features) but keeps the neutral color palette. Run brand:engine afterwards
+ * to switch to Engine colors.
  */
 
 import fs from 'fs';
@@ -19,10 +21,17 @@ import { fileURLToPath } from 'url';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
-const arg = process.argv[2];
+const args = process.argv.slice(2);
+const isDemo = args.includes('--demo');
+const positionalArgs = args.filter(a => !a.startsWith('--'));
+const flagArgs = args.filter(a => a.startsWith('--'));
 
-if (!arg) {
-  console.error('Usage: node scripts/apply-brand.mjs <brand-name|--list|--reset>');
+if (args.length === 0) {
+  console.error('Usage:');
+  console.error('  node scripts/apply-brand.mjs <brand>          # Apply brand colors');
+  console.error('  node scripts/apply-brand.mjs --demo <brand>   # Install full demo app');
+  console.error('  node scripts/apply-brand.mjs --list           # List brands');
+  console.error('  node scripts/apply-brand.mjs --reset          # Reset to neutral');
   process.exit(1);
 }
 
@@ -47,7 +56,30 @@ if (!packageRoot) {
 
 const brandsDir = path.join(packageRoot, 'brands');
 
-if (arg === '--list') {
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+function copyDirectoryRecursive(source, target) {
+  if (!fs.existsSync(source)) return 0;
+  let count = 0;
+  if (!fs.existsSync(target)) fs.mkdirSync(target, { recursive: true });
+
+  for (const item of fs.readdirSync(source)) {
+    if (item.startsWith('.')) continue;
+    const srcPath = path.join(source, item);
+    const dstPath = path.join(target, item);
+    if (fs.statSync(srcPath).isDirectory()) {
+      count += copyDirectoryRecursive(srcPath, dstPath);
+    } else {
+      fs.copyFileSync(srcPath, dstPath);
+      count++;
+    }
+  }
+  return count;
+}
+
+// ── --list ──────────────────────────────────────────────────────────────────
+
+if (flagArgs.includes('--list')) {
   if (!fs.existsSync(brandsDir)) {
     console.log('No brands available.');
     process.exit(0);
@@ -56,10 +88,16 @@ if (arg === '--list') {
     fs.statSync(path.join(brandsDir, d)).isDirectory()
   );
   console.log(`Available brands: ${brands.join(', ') || '(none)'}`);
+  for (const b of brands) {
+    const hasApp = fs.existsSync(path.join(brandsDir, b, 'app'));
+    console.log(`  ${b}${hasApp ? ' (has demo app)' : ''}`);
+  }
   process.exit(0);
 }
 
-if (arg === '--reset') {
+// ── --reset ─────────────────────────────────────────────────────────────────
+
+if (flagArgs.includes('--reset')) {
   const neutralCSS = path.join(packageRoot, 'src/styles/global.css');
   const targetCSS = path.join(cwd, 'src/styles/global.css');
   if (fs.existsSync(neutralCSS)) {
@@ -72,7 +110,14 @@ if (arg === '--reset') {
   process.exit(0);
 }
 
-const brandName = arg;
+// ── Resolve brand name ──────────────────────────────────────────────────────
+
+const brandName = positionalArgs[0];
+if (!brandName) {
+  console.error('Brand name required. Run with --list to see available brands.');
+  process.exit(1);
+}
+
 const brandDir = path.join(brandsDir, brandName);
 
 if (!fs.existsSync(brandDir)) {
@@ -84,85 +129,124 @@ if (!fs.existsSync(brandDir)) {
   process.exit(1);
 }
 
-console.log(`\n🎨 Applying "${brandName}" brand...\n`);
+// ── --demo: Install the full demo app (with NEUTRAL theme) ──────────────────
 
-let installed = 0;
+if (isDemo) {
+  const appDir = path.join(brandDir, 'app');
+  if (!fs.existsSync(appDir)) {
+    console.error(`Brand "${brandName}" does not have a demo app (no app/ directory).`);
+    process.exit(1);
+  }
 
-// 1. global.css → src/styles/global.css (always overwrite)
-const brandCSS = path.join(brandDir, 'global.css');
-const targetCSS = path.join(cwd, 'src/styles/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++;
-}
+  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'];
+
+  for (const sub of appSubdirs) {
+    const src = path.join(appDir, sub);
+    const dst = path.join(cwd, 'src', sub);
+    if (fs.existsSync(src)) {
+      const count = copyDirectoryRecursive(src, dst);
+      if (count > 0) {
+        console.log(`  ✓ Installed ${count} files in src/${sub}/`);
+        installed += count;
+      }
+    }
+  }
 
-// 2. Sample data files → src/data/
-const dataFiles = [
-  { src: 'engine-sample-data.js', dst: 'src/data/engine-sample-data.js' },
-  { src: 'engine-live-data.js', dst: 'src/data/engine-live-data.js' },
-  { src: 'partner-hub-sample-data.js', dst: 'src/data/partner-hub-sample-data.js' },
-];
-for (const { src, dst } of dataFiles) {
-  const srcPath = path.join(brandDir, src);
-  const dstPath = path.join(cwd, dst);
-  if (fs.existsSync(srcPath)) {
-    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
-    fs.copyFileSync(srcPath, dstPath);
-    console.log(`  ✓ Installed ${dst}`);
+  // Copy AgentforceConversationClient to src/components/
+  const agentClient = path.join(appDir, 'components/AgentforceConversationClient.tsx');
+  const agentClientInherit = path.join(appDir, 'components/__inherit_AgentforceConversationClient.tsx');
+  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++;
   }
-}
 
-// 3. Hooks → src/hooks/
-const hooks = [
-  { src: 'useEngineLiveData.ts', dst: 'src/hooks/useEngineLiveData.ts' },
-  { src: 'useEvaAgent.ts', dst: 'src/hooks/useEvaAgent.ts' },
-];
-for (const { src, dst } of hooks) {
-  const srcPath = path.join(brandDir, src);
-  const dstPath = path.join(cwd, dst);
-  if (fs.existsSync(srcPath)) {
-    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
-    fs.copyFileSync(srcPath, dstPath);
-    console.log(`  ✓ Installed ${dst}`);
+  // Copy root-level app files (routes, appLayout, etc.)
+  const rootFiles = ['routes.tsx', 'appLayout.tsx', 'navigationMenu.tsx', 'router-utils.tsx'];
+  for (const file of rootFiles) {
+    const src = path.join(appDir, file);
+    const dst = path.join(cwd, 'src', file);
+    if (fs.existsSync(src)) {
+      fs.copyFileSync(src, dst);
+      console.log(`  ✓ Installed src/${file}`);
+      installed++;
+    }
+  }
+
+  // Copy sample data files
+  const dataFiles = ['engine-sample-data.js', 'engine-live-data.js', 'partner-hub-sample-data.js'];
+  for (const file of dataFiles) {
+    const src = path.join(brandDir, file);
+    const dst = path.join(cwd, 'src/data', file);
+    if (fs.existsSync(src)) {
+      fs.mkdirSync(path.dirname(dst), { recursive: true });
+      fs.copyFileSync(src, dst);
+      console.log(`  ✓ Installed src/data/${file}`);
+      installed++;
+    }
+  }
+
+  // Copy PRDs to project root
+  const prds = fs.readdirSync(brandDir).filter(f => f.endsWith('_PRD.md') || f.endsWith('-prd.md'));
+  for (const prdFile of prds) {
+    fs.copyFileSync(path.join(brandDir, prdFile), path.join(cwd, prdFile));
+    console.log(`  ✓ Installed ${prdFile}`);
     installed++;
   }
-}
 
-// 4. Config files → src/config/
-const configs = [
-  { src: 'agentApiConfig.ts', dst: 'src/config/agentApi.ts' },
-];
-for (const { src, dst } of configs) {
-  const srcPath = path.join(brandDir, src);
-  const dstPath = path.join(cwd, dst);
-  if (fs.existsSync(srcPath)) {
-    fs.mkdirSync(path.dirname(dstPath), { recursive: true });
-    fs.copyFileSync(srcPath, dstPath);
-    console.log(`  ✓ Installed ${dst}`);
+  // Copy schema
+  const schema = path.join(brandDir, 'schema.graphql');
+  if (fs.existsSync(schema)) {
+    fs.copyFileSync(schema, path.join(cwd, 'schema.graphql'));
+    console.log('  ✓ Installed schema.graphql');
     installed++;
   }
-}
 
-// 5. PRDs → project root
-const prds = fs.readdirSync(brandDir).filter(f => f.endsWith('_PRD.md') || f.endsWith('-prd.md'));
-for (const prdFile of prds) {
-  fs.copyFileSync(path.join(brandDir, prdFile), path.join(cwd, prdFile));
-  console.log(`  ✓ Installed ${prdFile}`);
-  installed++;
+  // Copy logo
+  const logo = path.join(brandDir, 'engine_logo.png');
+  if (fs.existsSync(logo)) {
+    const logoTarget = path.join(cwd, 'src/assets/images/engine_logo.png');
+    fs.mkdirSync(path.dirname(logoTarget), { recursive: true });
+    fs.copyFileSync(logo, logoTarget);
+    console.log('  ✓ Installed engine_logo.png');
+    installed++;
+  }
+
+  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`);
+  process.exit(0);
 }
 
-// 6. Schema → project root
-const schema = path.join(brandDir, 'schema.graphql');
-if (fs.existsSync(schema)) {
-  fs.copyFileSync(schema, path.join(cwd, 'schema.graphql'));
-  console.log('  ✓ Installed schema.graphql');
+// ── Default: Apply brand colors only ────────────────────────────────────────
+
+console.log(`\n🎨 Applying "${brandName}" brand colors...\n`);
+
+let installed = 0;
+
+// 1. global.css → src/styles/global.css (always overwrite)
+const brandCSS = path.join(brandDir, 'global.css');
+const targetCSS = path.join(cwd, 'src/styles/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++;
 }
 
-// 7. Logo → src/assets/images/
+// 2. Logo → src/assets/images/
 const logo = path.join(brandDir, 'engine_logo.png');
 if (fs.existsSync(logo)) {
   const logoTarget = path.join(cwd, 'src/assets/images/engine_logo.png');
@@ -172,8 +256,8 @@ if (fs.existsSync(logo)) {
   installed++;
 }
 
-// 8. Write .brand marker so reset script knows which brand is active
+// 3. Write .brand marker
 fs.writeFileSync(path.join(cwd, '.brand'), brandName + '\n', 'utf-8');
 
-console.log(`\n✅ "${brandName}" brand applied (${installed} files installed).`);
+console.log(`\n✅ "${brandName}" brand colors applied (${installed} files).`);
 console.log('   Run "npm run brand:reset" to revert to neutral theme.\n');