@schandlergarcia/sf-web-components 1.9.88 → 2.1.0

package/.a4drules/skills/command-center-guide/SKILL.md

@@ -1,11 +1,11 @@
 ---
 name: command-center-guide
 description: >-
-  Overview of the development workflow for the Engine Travel Command Center
-  and other command center dashboards. Maps tasks to the right skills:
-  component-library for API reference, command-center-builder for layout
-  and conventions, command-center-project for file structure and routing.
-  Also covers Salesforce GraphQL data integration and Agentforce agent setup.
+  Overview of the development workflow for Command Center dashboards.
+  Maps tasks to the right skills: component-library for API reference,
+  command-center-builder for layout and conventions, command-center-project
+  for file structure and routing. Also covers Salesforce GraphQL data
+  integration and Agentforce agent setup.
 ---
 
 # Command Center Development Guide
@@ -15,14 +15,14 @@ description: >-
 **Read these two files, then start building. Do not load other skills or explore component source files.**
 
 1. **`.a4drules/skills/command-center-builder/SKILL.md`** — has the wiring steps, conventions, component APIs, and everything you need
-2. **`engine-command-center-prd.md`** — the product spec (layout, data model, brand tokens)
+2. **Your PRD / spec document** — the product spec (layout, data model, brand tokens)
 
 That's it. The builder skill already contains the component API reference inline. Do NOT separately load `component-library`, `command-center-project`, or `outer-app` skills — they add latency and you don't need them for the initial build. Do NOT read individual component source files (GeoMap.jsx, Avatar.jsx, etc.) — the builder skill documents all the props.
 
 ## Build Order (write files in this exact order)
 
 1. **Read** the PRD and builder skill
-2. **Write** `src/pages/EngineDashboard.tsx` (or your dashboard name) — the full dashboard in one pass
+2. **Write** `src/pages/MyDashboard.tsx` (or your dashboard name) — the full dashboard in one pass
 3. **Write** `src/components/workspace/CommandCenter.tsx` — import your dashboard
 4. **Write** `src/pages/Home.tsx` — REPLACE with CommandCenter (it ships as Account Search):
    ```tsx
@@ -42,13 +42,13 @@ That's it. The builder skill already contains the component API reference inline
 
 ## Salesforce Data Integration
 
-For live data (prompt 2), use these global skills:
+For live data, use these global skills:
 - **exploring-webapp-graphql-schema** — Look up objects and fields in `schema.graphql`
 - **generating-webapp-graphql-read-query** — Generate typed GraphQL queries
 - **using-webapp-graphql** — Create data hooks with `{ data, loading, error }`
 
 ## Agentforce Integration
 
-For AI agent features (prompt 3), use:
+For AI agent features, use:
 - **managing-webapp-agentforce-conversation-client** — Full Agentforce setup
 - **component-library** (`chat-data.md`) — ChatBar component API

package/.a4drules/skills/command-center-project/SKILL.md

@@ -1,14 +1,14 @@
 ---
 name: command-center-project
 description: >-
-  Project architecture, tech stack, and file conventions for the Engine Travel
-  Command Center app. Vite + React 19 + TypeScript + Tailwind CSS 4. Covers
+  Project architecture, tech stack, and file conventions for
+  Command Center apps. Vite + React 19 + TypeScript + Tailwind CSS 4. Covers
   project structure, route architecture, path aliases, two UI systems
   (shadcn for outer app, component library for command center), and how
   dashboards wire into CommandCenter.tsx and the route tree.
 ---
 
-# Enginebespokeapp — Project Context
+# Command Center App — Project Context
 
 Vite 7 + React 19 + TypeScript 5.9 + Tailwind CSS 4 + React Router 7. SPA (not Next.js).
 
@@ -84,7 +84,7 @@ Configured in both `vite.config.ts` and `tsconfig.json`:
 - **Dashboard pages** go in `src/pages/` (NOT `src/components/pages/`). Wire into `CommandCenter.tsx` by importing and rendering.
 - **Outer app pages** go in `src/pages/` or `src/features/*/pages/`. Wire into `src/routes.tsx`.
 - **TypeScript** preferred for all code (`.tsx`/`.ts`). Core UI components converted to TypeScript. Legacy `.jsx` files being migrated.
-- **Component library** is a vendored copy from command-center-starter — not an npm package. Changes sync manually.
+- **Component library** is a vendored copy installed by the package postinstall — not loaded at runtime.
 - Vite config has `loader: { '.js': 'jsx' }` in `optimizeDeps` to support the `.js`→JSX library files.
 - **Reset script:** `npm run reset:command-center` wipes custom dashboards and restores blank canvas.
 
@@ -99,7 +99,6 @@ Configured in both `vite.config.ts` and `tsconfig.json`:
 ## Scripts
 
 - `npm run dev` — Start dev server
-- `npm run dev:design` — Design mode (standalone)
 - `npm run build` — TypeScript check + Vite build
 - `npm run test` — Vitest
 - `npm run reset:command-center` — Reset dashboard to blank canvas

package/.a4drules/skills/component-library/SKILL.md

@@ -119,7 +119,7 @@ import type { MetricCardProps } from "@/components/library";
   subtitle="Currently on trips"   // secondary text
   change="+5.2%"                  // change amount string
   changeType="positive"           // "positive" | "negative" | "neutral"
-  icon={<UsersIcon className="h-5 w-5 text-engine-teal" />}
+  icon={<UsersIcon className="h-5 w-5 text-brand-500" />}
   color="default"                 // "default" | "primary" | "success" | "warning" | "danger"
   trend="vs last month"           // trend label text
   layout="default"                // "default" | "compact"
@@ -247,7 +247,7 @@ Status icons: `"complete"` → green check, `"working"` → spinning (indigo), `
 
 ```jsx
 <SectionCard
-  title="Eva · Agentforce Agent"
+  title="AI Assistant"
   description="Powered by Agentforce"
   label="LIVE"                      // small pill badge
   variant="default"                 // "default" | "primary" | "secondary" | "accent"
@@ -291,11 +291,11 @@ Status icons: `"complete"` → green check, `"working"` → spinning (indigo), `
 // Single-section wrapper for custom interactive content (e.g., expandable list)
 // NOTE: BaseCard already applies p-4 padding — do NOT add extra p-* to header/section content
 <WidgetCard
-  header={<h2 className="text-lg font-semibold text-engine-text">Active Travelers</h2>}
+  header={<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-50">Active Items</h2>}
   sections={[{
     id: "travelers",
     content: (
-      <div className="divide-y divide-engine-border">
+      <div className="divide-y divide-slate-200 dark:divide-slate-800">
         {travelers.map(t => (
           <div key={t.id} onClick={() => toggle(t.id)}>
             {/* collapsed row + expanded details — any JSX works here */}
@@ -494,8 +494,8 @@ Integrates with AppThemeProvider automatically.
 ### ChatBar (command palette — use on dashboards)
 ```jsx
 <ChatBar
-  title="Eva · Travel Assistant"
-  placeholder="Ask Eva..."
+  title="AI Assistant"
+  placeholder="Ask me anything..."
   suggestions={["Show spend", "Who has flags?", "Active trips"]}
   onSend={async (userMsg, allMessages, helpers) => {
     // Return message object to add to chat:
@@ -672,12 +672,10 @@ Dropdown select. Value `"all"` skips filtering.
 ## Data Utilities
 
 ### DataModeToggle
-> ⚠️ **Do NOT use in the Engine Command Center dashboard.** The Engine dashboard controls data mode via `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` — there is no UI toggle. Only use `DataModeToggle` in non-Engine dashboards that explicitly need a manual toggle.
-
 ```jsx
 <DataModeToggle className="ml-4" />
 ```
-Pill button switching between "Sample" (beaker icon, amber) and "Live" (signal icon, emerald). Reads/writes to `DataModeProvider` context.
+Pill button switching between "Sample" (beaker icon, amber) and "Live" (signal icon, emerald). Reads/writes to `DataModeProvider` context. Use only if your dashboard needs a manual sample/live toggle in the UI. If data mode is controlled via `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts`, you do not need this toggle.
 
 ### usePageFilters
 **When:** Complete filtering + sorting state for a data page.
@@ -780,7 +778,7 @@ Row of sparkle-icon pill buttons for quick prompts. Returns null if empty.
 ### ChatToolCall
 ```jsx
 <ChatToolCall
-  toolCall={{ id: "tc1", name: "queryRecords", args: { object: "Trip__c" },
+  toolCall={{ id: "tc1", name: "queryRecords", args: { object: "Account" },
     status: "complete", result: "Found 6 records" }}
 />
 ```

package/.a4drules/skills/component-library/card-components.md

@@ -10,7 +10,7 @@
   subtitle="Currently on trips"   // secondary text
   change="+5.2%"                  // change amount string
   changeType="positive"           // "positive" | "negative" | "neutral"
-  icon={<UsersIcon className="h-5 w-5 text-engine-teal" />}
+  icon={<UsersIcon className="h-5 w-5 text-brand-500" />}
   color="default"                 // "default" | "primary" | "success" | "warning" | "danger"
   trend="vs last month"           // trend label text
   layout="default"                // "default" | "compact"
@@ -182,11 +182,11 @@ Status icons: `"complete"` → green check, `"working"` → spinning (indigo), `
 // Single-section wrapper for custom interactive content (e.g., expandable list)
 // NOTE: BaseCard already applies p-4 padding — do NOT add extra p-* to header/section content
 <WidgetCard
-  header={<h2 className="text-lg font-semibold text-engine-text">Active Travelers</h2>}
+  header={<h2 className="text-lg font-semibold text-slate-900 dark:text-slate-50">Active Items</h2>}
   sections={[{
     id: "travelers",
     content: (
-      <div className="divide-y divide-engine-border">
+      <div className="divide-y divide-slate-200 dark:divide-slate-700">
         {travelers.map(t => (
           <div key={t.id} onClick={() => toggle(t.id)}>
             {/* collapsed row + expanded details — any JSX works here */}

package/.a4drules/skills/component-library/chat-data.md

@@ -3,8 +3,8 @@
 ### ChatBar (command palette — use on dashboards)
 ```jsx
 <ChatBar
-  title="Eva · Travel Assistant"
-  placeholder="Ask Eva..."
+  title="AI Assistant"
+  placeholder="Ask me anything..."
   suggestions={["Show spend", "Who has flags?", "Active trips"]}
   onSend={async (userMsg, allMessages, helpers) => {
     // Return message object to add to chat:
@@ -54,12 +54,10 @@ Wraps app. Provides `useDataMode()` → `{ mode, isSample, isLive, toggle, setMo
 ## Data Utilities
 
 ### DataModeToggle
-> ⚠️ **Do NOT use in the Engine Command Center dashboard.** The Engine dashboard controls data mode via `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts` — there is no UI toggle. Only use `DataModeToggle` in non-Engine dashboards that explicitly need a manual toggle.
-
 ```jsx
 <DataModeToggle className="ml-4" />
 ```
-Pill button switching between "Sample" (beaker icon, amber) and "Live" (signal icon, emerald). Reads/writes to `DataModeProvider` context.
+Pill button switching between "Sample" (beaker icon, amber) and "Live" (signal icon, emerald). Reads/writes to `DataModeProvider` context. Use only if your dashboard needs a manual sample/live toggle in the UI. If data mode is controlled via `ENABLE_SAMPLE_DATA_CACHE` in `src/lib/dataStrategy.ts`, you do not need this toggle.
 
 ### usePageFilters
 **When:** Complete filtering + sorting state for a data page.
@@ -162,7 +160,7 @@ Row of sparkle-icon pill buttons for quick prompts. Returns null if empty.
 ### ChatToolCall
 ```jsx
 <ChatToolCall
-  toolCall={{ id: "tc1", name: "queryRecords", args: { object: "Trip__c" },
+  toolCall={{ id: "tc1", name: "queryRecords", args: { object: "Account" },
     status: "complete", result: "Found 6 records" }}
 />
 ```

package/.a4drules/troubleshooting/codegen-overwrites-types.md

@@ -1,181 +1,40 @@
-# GraphQL Codegen Overwrites Complete Types File
+# Codegen Overwrites Types
 
 ## Problem
 
-When running `npm run dev`, the GraphQL codegen plugin auto-runs and regenerates `graphql-operations-types.ts` from the minimal `schema.graphql` file, overwriting the complete types file with a minimal version.
-
-**Symptoms:**
-- TypeScript errors like "Cannot find name 'NullOrder'"
-- Missing type definitions for Account fields
-- graphql-operations-types.ts file suddenly shrinks from ~11,000 lines to ~50 lines
-- Errors appear after running `npm run dev`
+Running `npm run dev` or `npm run build` triggers GraphQL codegen, which regenerates the types file from `schema.graphql`. If the schema is minimal (only a subset of objects), codegen will overwrite a complete types file with a partial one — breaking imports for objects not in the schema.
 
 ## Root Cause
 
-The problem occurs when Vite codegen plugin has these settings enabled:
-
-```typescript
-codegen({
-  runOnStart: true,      // ❌ Runs codegen when dev server starts
-  runOnBuild: true,      // ❌ Runs codegen during build
-  enableWatcher: true,   // ❌ Watches for schema changes and re-runs
-})
-```
-
-**What happens:**
-
-1. Vite config has codegen enabled with auto-run settings
-2. When you run `npm run dev`, codegen regenerates types from `schema.graphql`
-3. The minimal `schema.graphql` only has Engine objects (Trip__c, Flight__c, etc.)
-4. It's missing standard objects like Account and their types
-5. Codegen overwrites the good ~11,000 line types file with a bad ~50 line file
-6. TypeScript errors: "Cannot find name 'NullOrder'" and other missing types
-
-## Why This Happens
-
-**Two different schema sources:**
-
-1. **Minimal schema.graphql** (6KB)
-   - Pre-built from Engine sample data field names
-   - Only has Engine custom objects (Trip__c, Flight__c, Booking__c, etc.)
-   - Missing standard objects (Account, Contact, etc.)
-   - Missing standard types (NullOrder, etc.)
-   - Used when org introspection is broken
-   - Good for: GraphQL skills, IDE autocomplete for Engine objects
-   - Bad for: Complete type generation
-
-2. **Complete org schema** (from working org introspection)
-   - Has all standard objects (Account, Contact, Lead, etc.)
-   - Has all custom objects
-   - Has all standard types (NullOrder, etc.)
-   - Generates complete ~11,000 line types file
-   - Used when: `npm run graphql:schema` works on a different org
+1. The codegen plugin in `vite.config.ts` watches for changes and auto-regenerates
+2. If `schema.graphql` only has custom objects, standard objects (Account, Contact, etc.) get dropped
+3. The generated types file loses type definitions that other code depends on
 
 ## Solution
 
-**The fix is already in the package** (v1.9.53+). The vite.config.ts template has codegen auto-run **disabled**:
-
-```typescript
-codegen({
-  configFilePathOverride: resolve(__dirname, 'codegen.yml'),
-  runOnStart: false,      // ✅ Disabled - no auto-run on dev server start
-  runOnBuild: false,      // ✅ Disabled - no auto-run on build
-  enableWatcher: false,   // ✅ Disabled - no watching for changes
-  throwOnBuild: false,
-})
-```
-
-**This prevents codegen from auto-running** and overwriting your complete types file.
-
-## When to Run Codegen Manually
-
-**Only run codegen manually when you WANT to regenerate types from the minimal schema:**
-
-```bash
-npm run graphql:codegen
-```
-
-**Use cases for manual codegen:**
-- After adding new fields to the minimal schema.graphql
-- When building Engine dashboard with only Engine objects
-- When you want to use the minimal Engine-only types
-
-**DO NOT run codegen if:**
-- You have a complete types file from another org (like react5)
-- You need Account or other standard object types
-- Your current types file is working correctly
-
-## Recovery Steps
-
-If codegen already overwrote your complete types file:
-
-### Option 1: Copy from Working Project
+The `vite.config.ts` template ships with codegen **disabled** (`runOnStart: false`, `runOnBuild: false`, `enableWatcher: false`). This prevents automatic overwrites.
 
-If you have a working project (e.g., react5) with complete types:
+### When to Enable Codegen
 
-```bash
-# From the broken project
-cp ../react5/force-app/main/default/webapplications/react5/src/api/graphql-operations-types.ts src/api/
-```
+- After running full introspection (`npm run graphql:schema`) successfully
+- When `schema.graphql` contains all objects your app queries
+- Set `runOnBuild: true` only if you want types regenerated on each build
 
-### Option 2: Regenerate from Working Org
+### When NOT to Enable Codegen
 
-If you have access to an org with working introspection:
+- If `schema.graphql` is minimal or partial
+- If you have a manually curated types file
+- If introspection fails (see `graphql-introspection-failure.md`)
 
-```bash
-npm run graphql:schema     # Fetch complete schema from org
-npm run graphql:codegen    # Generate types from complete schema
-```
+## Quick Fix
 
-### Option 3: Use Minimal Types (Engine Dashboard Only)
+If codegen overwrote your types:
 
-If you only need Engine objects:
-
-```bash
-npm run graphql:codegen    # Generates from minimal schema.graphql
-```
-
-This is fine for Engine Travel dashboard since it only queries Engine objects.
-
-## Prevention
-
-**The package now prevents this automatically** (v1.9.53+):
-
-1. ✅ vite.config.ts template has codegen auto-run disabled
-2. ✅ Postinstall only installs vite.config.ts if it doesn't exist (doesn't overwrite)
-3. ✅ Documentation explains when to run codegen manually
-
-**For existing projects:**
-
-If your vite.config.ts has codegen enabled with auto-run, update it:
-
-```typescript
-// Find this in your vite.config.ts
-codegen({
-  configFilePathOverride: resolve(__dirname, 'codegen.yml'),
-  runOnStart: false,       // Change from true to false
-  runOnBuild: false,       // Change from true to false
-  enableWatcher: false,    // Change from true to false
-  throwOnBuild: false,
-})
-```
-
-## For Agent Building Engine Dashboard
-
-**The complete types file is not required for Engine dashboard.** The Engine dashboard only queries Engine objects (Trip__c, Flight__c, etc.), which are in the minimal schema.graphql.
-
-If you encounter "Cannot find name 'NullOrder'" errors:
-
-1. Check if the error is in Engine dashboard code or other code
-2. If it's in Engine dashboard code: You shouldn't be using NullOrder (it's for Account queries)
-3. If it's in other code (like Account search): You need the complete types file
-
-**Two strategies:**
-
-**Strategy 1: Engine Dashboard Only (Minimal Types)**
-- Use the minimal schema.graphql and types
-- Only query Engine objects
-- NullOrder not needed
-
-**Strategy 2: Engine + Account Search (Complete Types)**
-- Get complete types file from working project or org
-- Don't run codegen (it will overwrite)
-- Both Engine and standard object queries work
+1. Restore the complete types file from git: `git checkout -- src/api/graphql-operations-types.ts`
+2. Ensure codegen is disabled in `vite.config.ts` (`runOnStart: false`)
 
 ## Related Files
 
-- `vite.config.ts` - Codegen plugin configuration
-- `schema.graphql` - Minimal schema (Engine objects only)
-- `src/api/graphql-operations-types.ts` - Generated types file
-- `codegen.yml` - Codegen configuration file
-- `.a4drules/troubleshooting/graphql-introspection-failure.md` - Why minimal schema exists
-
-## Success Indicators
-
-You've successfully prevented the issue when:
-
-- ✅ vite.config.ts has codegen with auto-run disabled
-- ✅ `npm run dev` doesn't regenerate types file
-- ✅ Types file stays at ~11,000 lines (or whatever size you want)
-- ✅ No "Cannot find name 'NullOrder'" errors
-- ✅ TypeScript compilation succeeds
+- `vite.config.ts` — Codegen plugin configuration
+- `schema.graphql` — GraphQL schema used for type generation
+- `src/api/graphql-operations-types.ts` — Generated types file