@schandlergarcia/sf-web-components 2.0.0 → 2.1.0

package/CHANGELOG.md

@@ -5,6 +5,16 @@ 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.1.0] - 2026-04-04
+
+### Added
+- **Brand system** — `npm run brand:engine` applies Engine branding (colors, sample data, PRD, hooks, logo) on top of the generic framework. `npm run brand:reset` reverts to neutral. `npm run brand:list` shows available brands.
+- **`brands/engine/`** directory with Engine-branded `global.css` using official brand guidelines: Engine Black #0D1117, Cyan #7DCBD9, Green #1E9D6D, Blue #157DE5, Orange-Red #FD4B23, Amber #FFB200.
+- **`scripts/apply-brand.mjs`** — brand application script that copies brand CSS, sample data, hooks, configs, PRD, schema, and logo into the consuming project.
+- **`.brand` marker file** — tracks the active brand so `reset-command-center.sh` preserves it.
+- **Brand-aware reset** — when a brand is active, `reset-command-center.sh` restores the brand's `global.css` instead of neutral.
+- **Postinstall brand scripts** — `brand:engine`, `brand:reset`, `brand:list` npm scripts are automatically added to consuming projects.
+
 ## [2.0.0] - 2026-04-04
 
 ### Changed — Generic framework release

package/CLAUDE.md

@@ -67,8 +67,11 @@ sf-web-components/
 │   │   └── workspace/         # CommandCenter.tsx.template
 │   ├── lib/                   # Utilities (utils.ts)
 │   └── styles/                # global.css with neutral brand tokens
+├── brands/
+│   └── engine/                # Engine brand (global.css, sample data, PRD, hooks)
 ├── scripts/
 │   ├── postinstall.mjs        # Runs after npm install in consuming projects
+│   ├── apply-brand.mjs        # Apply/reset brand themes
 │   ├── reset-command-center.sh
 │   ├── validate-dashboard.sh
 │   └── verify-consistency.sh
@@ -81,6 +84,26 @@ sf-web-components/
     └── webapp-ui.md
 ```
 
+## Brand System
+
+The package ships with a **neutral theme** by default. Opt into a specific brand:
+
+```bash
+npm run brand:engine    # Apply Engine brand (colors, sample data, PRD, hooks)
+npm run brand:reset     # Revert to neutral theme
+npm run brand:list      # Show available brands
+```
+
+When a brand is active, the reset script (`npm run reset:command-center`) preserves the brand's `global.css` instead of restoring neutral. The `.brand` marker file tracks which brand is active.
+
+### Engine Brand
+- **Primary:** Engine Black `#0D1117`
+- **Accent:** Cyan `#7DCBD9`, Green `#1E9D6D`, Blue `#157DE5`
+- **Secondary:** Orange-Red `#FD4B23`, Amber `#FFB200`
+- **Neutrals:** Dark Gray `#616368`, Mid Gray `#B0B1B3`, Light Gray `#F3F3F4`
+
+Installs: Engine-branded `global.css`, sample data, live data, PRD, GraphQL schema, Eva agent hook, agent config, and Engine logo.
+
 ## Key Conventions
 
 ### Component Naming

package/brands/engine/agentApiConfig.ts

@@ -0,0 +1,36 @@
+/**
+ * Agentforce Agent API Configuration
+ *
+ * These values connect the ChatBar to the real Agentforce agent (Eva)
+ * via the REST-based Agent API instead of the iframe-based
+ * AgentforceConversationClient.
+ *
+ * Flow: OAuth token → create session → send messages → end session
+ *
+ * All requests are proxied through the Vite dev server to avoid CORS.
+ * See vite.config.ts proxy rules:
+ *   /sf-oauth/*  → myDomainUrl (for OAuth token)
+ *   /sf-agent/*  → agentApiBaseUrl (for Agent API calls)
+ */
+
+export const AGENT_API_CONFIG = {
+  myDomainUrl: "https://tdx26-keynote-org-1com.my.salesforce.com",
+
+  clientId:
+    "3MVG9Gm6vbdjgMWSOIAuIN3VSB5Rju6PgYQ5rl1yH3bVTTg9E2as4.C61Q0cyT.zqv2vUWNaxrm.A7SW5o3t7",
+  clientSecret:
+    "9ADF795A183A6B074A2E4B4CB1748B8DF7090C74191AF1C190213B512A733E03",
+
+  agentId: "0Xxa5000000rQlxCAE",
+
+  agentApiBaseUrl: "https://api.salesforce.com",
+
+  bypassUser: true,
+
+  demoTraveler: {
+    contactId: "003a500000mj4TlAAI",
+    email: "sarah.chen@arcline.ai",
+    firstName: "Sarah",
+    lastName: "Chen",
+  },
+};

package/brands/engine/brand.css

@@ -0,0 +1,40 @@
+/*
+ * Engine Brand Overrides
+ *
+ * Applied on top of the base global.css when `npm run brand:engine` is run.
+ * Colors sourced from the official Engine Brand Guidelines.
+ *
+ * Primary:    Engine Black #0D1117, White #FFFFFF
+ * Secondary:  Orange-Red #FD4B23, Amber #FFB200, Green #1E9D6D,
+ *             Cyan #7DCBD9, Blue #157DE5
+ * Neutrals:   Dark Gray #616368, Mid Gray #B0B1B3, Light Gray #F3F3F4
+ */
+
+/* ── Engine brand palette (injected into @theme inline block) ─────────────── */
+
+/*
+  --color-engine-black:    #0D1117
+  --color-engine-cyan:     #7DCBD9   (primary accent)
+  --color-engine-green:    #1E9D6D   (savings, FlexPro, Flex, BestPrice)
+  --color-engine-blue:     #157DE5   (finance, Credit, Charge)
+  --color-engine-orange:   #FD4B23   (secondary accent)
+  --color-engine-amber:    #FFB200   (alerts, warnings)
+  --color-engine-bg:       #F3F3F4   (light gray background)
+  --color-engine-border:   #B0B1B3   (mid gray)
+  --color-engine-text:     #0D1117   (engine black)
+  --color-engine-muted:    #616368   (dark gray)
+  --color-engine-label:    #B0B1B3   (mid gray)
+
+  Brand ramp (built from Cyan #7DCBD9):
+  --color-brand-50:   #F0FAFB
+  --color-brand-100:  #D9F2F5
+  --color-brand-200:  #B3E5EB
+  --color-brand-300:  #7DCBD9   (Cyan — primary)
+  --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
+*/