@schandlergarcia/sf-web-components 1.9.87 → 2.0.0

package/dist/styles/base.css

@@ -1,3 +1,25 @@
+@import '@heroui/styles';
+
+@layer base {
+  html,
+  body,
+  #root {
+    @apply min-h-screen;
+  }
+
+  body {
+    @apply antialiased bg-white;
+  }
+}
+
+@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);
@@ -36,39 +58,26 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* Engine brand palette */
-  --color-engine-black: #111111;
-  --color-engine-teal: #5BC8C8;
-  --color-engine-green: #3DAB5F;
-  --color-engine-coral: #FF5722;
-  --color-engine-orange: #F59E0B;
-  --color-engine-savings: #16A34A;
-  --color-engine-bg: #F7F8FA;
-  --color-engine-border: #E5E7EB;
-  --color-engine-text: #111111;
-  --color-engine-muted: #6B7280;
-  --color-engine-label: #9CA3AF;
-
-  /* Engine teal brand palette */
-  --color-brand-50:  #ECFDF9;
-  --color-brand-100: #D1FAF0;
-  --color-brand-200: #A7F3E1;
-  --color-brand-300: #6EE7C8;
-  --color-brand-400: #34D3AB;
-  --color-brand-500: #5BC8C8;
-  --color-brand-600: #0D9488;
-  --color-brand-700: #0F766E;
-  --color-brand-800: #115E59;
-  --color-brand-900: #134E4A;
-  --color-brand-950: #042F2E;
+  /* Brand palette — customize these to match your brand */
+  --color-brand-50:  #F0F9FF;
+  --color-brand-100: #E0F2FE;
+  --color-brand-200: #BAE6FD;
+  --color-brand-300: #7DD3FC;
+  --color-brand-400: #38BDF8;
+  --color-brand-500: #0EA5E9;
+  --color-brand-600: #0284C7;
+  --color-brand-700: #0369A1;
+  --color-brand-800: #075985;
+  --color-brand-900: #0C4A6E;
+  --color-brand-950: #082F49;
 
   --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, monospace;
 
-  /* Engine border radius tokens */
   --radius-pill: 9999px;
   --radius-card: 10px;
 }
+
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
@@ -103,6 +112,7 @@
   --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);
@@ -135,4 +145,79 @@
   --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.
+ * shadcn redefines --muted, --accent, --accent-foreground with different
+ * semantics (bg colors vs text colors). This scope restores HeroUI's values
+ * so HeroUI components render correctly.
+ */
+.heroui-scope {
+  --primary: #000000;
+  --primary-foreground: oklch(0.9911 0 0);
+  --secondary: #0EA5E9;
+  --secondary-foreground: oklch(0.9911 0 0);
+  --success: #16A34A;
+  --success-foreground: oklch(0.9911 0 0);
+  --warning: #F59E0B;
+  --warning-foreground: oklch(0.2103 0.0059 285.89);
+  --danger: #EF4444;
+  --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: oklch(0.9702 0 0);
+  --foreground: oklch(0.2103 0.0059 285.89);
+  --default: oklch(94% 0.001 286.375);
+  --default-foreground: oklch(0.2103 0.0059 285.89);
+  --border: oklch(90% 0.004 286.32);
+  --separator: oklch(92% 0.004 286.32);
+  --segment: oklch(100% 0 0);
+  --segment-foreground: oklch(0.2103 0.0059 285.89);
+  --surface: oklch(100% 0 0);
+  --surface-foreground: oklch(0.2103 0.0059 285.89);
+  --overlay: oklch(100% 0 0);
+  --overlay-foreground: oklch(0.2103 0.0059 285.89);
+  --focus: oklch(0.6204 0.195 253.83);
+  --link: oklch(0.2103 0.0059 285.89);
+}
+
+/* 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: oklch(0.2103 0.0059 285.89);
+  --danger: oklch(0.594 0.1967 24.63);
+  --danger-foreground: oklch(0.9911 0 0);
+  --focus: oklch(0.6204 0.195 253.83);
+  --link: oklch(0.9911 0 0);
+}

package/dist/styles/global.css

@@ -58,36 +58,22 @@
   --color-sidebar-border: var(--sidebar-border);
   --color-sidebar-ring: var(--sidebar-ring);
 
-  /* Engine brand palette */
-  --color-engine-black: #111111;
-  --color-engine-teal: #5BC8C8;
-  --color-engine-green: #3DAB5F;
-  --color-engine-coral: #FF5722;
-  --color-engine-orange: #F59E0B;
-  --color-engine-savings: #16A34A;
-  --color-engine-bg: #F7F8FA;
-  --color-engine-border: #E5E7EB;
-  --color-engine-text: #111111;
-  --color-engine-muted: #6B7280;
-  --color-engine-label: #9CA3AF;
-
-  /* Engine teal brand palette */
-  --color-brand-50:  #ECFDF9;
-  --color-brand-100: #D1FAF0;
-  --color-brand-200: #A7F3E1;
-  --color-brand-300: #6EE7C8;
-  --color-brand-400: #34D3AB;
-  --color-brand-500: #5BC8C8;
-  --color-brand-600: #0D9488;
-  --color-brand-700: #0F766E;
-  --color-brand-800: #115E59;
-  --color-brand-900: #134E4A;
-  --color-brand-950: #042F2E;
+  /* Brand palette — customize these to match your brand */
+  --color-brand-50:  #F0F9FF;
+  --color-brand-100: #E0F2FE;
+  --color-brand-200: #BAE6FD;
+  --color-brand-300: #7DD3FC;
+  --color-brand-400: #38BDF8;
+  --color-brand-500: #0EA5E9;
+  --color-brand-600: #0284C7;
+  --color-brand-700: #0369A1;
+  --color-brand-800: #075985;
+  --color-brand-900: #0C4A6E;
+  --color-brand-950: #082F49;
 
   --font-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
   --font-mono: 'JetBrains Mono', ui-monospace, monospace;
 
-  /* Engine border radius tokens */
   --radius-pill: 9999px;
   --radius-card: 10px;
 }
@@ -177,16 +163,15 @@
  * so HeroUI components render correctly.
  */
 .heroui-scope {
-  /* Engine HeroUI theme overrides */
   --primary: #000000;
   --primary-foreground: oklch(0.9911 0 0);
-  --secondary: #5BC8C8;
-  --secondary-foreground: oklch(0.2103 0.0059 285.89);
+  --secondary: #0EA5E9;
+  --secondary-foreground: oklch(0.9911 0 0);
   --success: #16A34A;
   --success-foreground: oklch(0.9911 0 0);
   --warning: #F59E0B;
   --warning-foreground: oklch(0.2103 0.0059 285.89);
-  --danger: #FF5722;
+  --danger: #EF4444;
   --danger-foreground: oklch(0.9911 0 0);
 
   --muted: oklch(0.5517 0.0138 285.94);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.9.87",
+  "version": "2.0.0",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,11 +27,10 @@
   "files": [
     "dist",
     "scripts",
-    "data",
-    "assets",
     "src/templates",
     "src/components",
     "src/lib",
+    "src/styles",
     "src/types",
     "README.md",
     "INSTALL.md",

package/scripts/postinstall.mjs

@@ -227,174 +227,29 @@ if (fs.existsSync(templatesDir)) {
   }
 }
 
-// Copy sample data files
-const dataSourceDir = path.join(packageRoot, 'data');
-const targetDataDir = path.join(cwd, 'src/data');
-
-console.log('\n📊 Installing sample data files...\n');
-
-let dataFilesInstalled = 0;
-
-if (fs.existsSync(dataSourceDir)) {
-  // Create target data directory if it doesn't exist
-  if (!fs.existsSync(targetDataDir)) {
-    fs.mkdirSync(targetDataDir, { recursive: true });
-  }
-
-  // Copy engine-sample-data.js
-  const engineDataSource = path.join(dataSourceDir, 'engine-sample-data.js');
-  const engineDataTarget = path.join(targetDataDir, 'engine-sample-data.js');
-
-  if (fs.existsSync(engineDataSource)) {
-    try {
-      fs.copyFileSync(engineDataSource, engineDataTarget);
-      console.log('  ✓ Installed engine-sample-data.js');
-      dataFilesInstalled++;
-    } catch (error) {
-      console.error(`  ✗ Failed to install engine-sample-data.js: ${error.message}`);
-    }
-  }
-
-  // Copy schema.graphql
-  const schemaSource = path.join(dataSourceDir, 'schema.graphql');
-  const schemaTarget = path.join(cwd, 'schema.graphql');
-
-  if (fs.existsSync(schemaSource)) {
-    try {
-      fs.copyFileSync(schemaSource, schemaTarget);
-      console.log('  ✓ Installed schema.graphql (pre-built from sample data)');
-      dataFilesInstalled++;
-    } catch (error) {
-      console.error(`  ✗ Failed to install schema.graphql: ${error.message}`);
-    }
-  }
-
-  // Copy engine-command-center-prd.md
-  const prdSource = path.join(dataSourceDir, 'engine-command-center-prd.md');
-  const prdTarget = path.join(cwd, 'engine-command-center-prd.md');
-
-  if (fs.existsSync(prdSource)) {
-    try {
-      fs.copyFileSync(prdSource, prdTarget);
-      console.log('  ✓ Installed engine-command-center-prd.md');
-      dataFilesInstalled++;
-    } catch (error) {
-      console.error(`  ✗ Failed to install engine-command-center-prd.md: ${error.message}`);
-    }
-  }
-
-  // Copy engine-live-data.js
-  const engineLiveDataSource = path.join(dataSourceDir, 'engine-live-data.js');
-  const engineLiveDataTarget = path.join(targetDataDir, 'engine-live-data.js');
-
-  if (fs.existsSync(engineLiveDataSource)) {
-    try {
-      fs.copyFileSync(engineLiveDataSource, engineLiveDataTarget);
-      console.log('  ✓ Installed engine-live-data.js');
-      dataFilesInstalled++;
-    } catch (error) {
-      console.error(`  ✗ Failed to install engine-live-data.js: ${error.message}`);
-    }
-  }
-
-  // Copy useEngineLiveData.ts
-  const targetHooksDir = path.join(cwd, 'src/hooks');
-  const useEngineLiveDataSource = path.join(dataSourceDir, 'useEngineLiveData.ts');
-  const useEngineLiveDataTarget = path.join(targetHooksDir, 'useEngineLiveData.ts');
-
-  if (fs.existsSync(useEngineLiveDataSource)) {
-    try {
-      if (!fs.existsSync(targetHooksDir)) {
-        fs.mkdirSync(targetHooksDir, { recursive: true });
-      }
-      fs.copyFileSync(useEngineLiveDataSource, useEngineLiveDataTarget);
-      console.log('  ✓ Installed useEngineLiveData.ts');
-      dataFilesInstalled++;
-    } catch (error) {
-      console.error(`  ✗ Failed to install useEngineLiveData.ts: ${error.message}`);
-    }
-  }
-
-  // Copy useEvaAgent.ts (Agentforce Agent API hook)
-  const useEvaAgentSource = path.join(dataSourceDir, 'useEvaAgent.ts');
-  const useEvaAgentTarget = path.join(targetHooksDir, 'useEvaAgent.ts');
-
-  if (fs.existsSync(useEvaAgentSource)) {
-    try {
-      if (!fs.existsSync(targetHooksDir)) {
-        fs.mkdirSync(targetHooksDir, { recursive: true });
-      }
-      fs.copyFileSync(useEvaAgentSource, useEvaAgentTarget);
-      console.log('  ✓ Installed useEvaAgent.ts');
-      dataFilesInstalled++;
-    } catch (error) {
-      console.error(`  ✗ Failed to install useEvaAgent.ts: ${error.message}`);
-    }
-  }
-
-  // Copy agentApiConfig.ts → src/config/agentApi.ts
-  const agentApiConfigSource = path.join(dataSourceDir, 'agentApiConfig.ts');
-  const targetConfigDir = path.join(cwd, 'src/config');
-  const agentApiConfigTarget = path.join(targetConfigDir, 'agentApi.ts');
-
-  if (fs.existsSync(agentApiConfigSource)) {
-    try {
-      if (!fs.existsSync(targetConfigDir)) {
-        fs.mkdirSync(targetConfigDir, { recursive: true });
-      }
-      fs.copyFileSync(agentApiConfigSource, agentApiConfigTarget);
-      console.log('  ✓ Installed src/config/agentApi.ts');
-      dataFilesInstalled++;
-    } catch (error) {
-      console.error(`  ✗ Failed to install agentApiConfig.ts: ${error.message}`);
-    }
-  }
-
-  // Copy engine_logo.png
-  const assetsSourceDir = path.join(packageRoot, 'assets/images');
-  const targetAssetsDir = path.join(cwd, 'src/assets/images');
-  const engineLogoSource = path.join(assetsSourceDir, 'engine_logo.png');
-  const engineLogoTarget = path.join(targetAssetsDir, 'engine_logo.png');
-
-  if (fs.existsSync(engineLogoSource)) {
-    try {
-      if (!fs.existsSync(targetAssetsDir)) {
-        fs.mkdirSync(targetAssetsDir, { recursive: true });
-      }
-      fs.copyFileSync(engineLogoSource, engineLogoTarget);
-      console.log('  ✓ Installed engine_logo.png');
-      dataFilesInstalled++;
-    } catch (error) {
-      console.error(`  ✗ Failed to install engine_logo.png: ${error.message}`);
-    }
-  }
-}
-
-// Copy GraphQL schema generator script
+// Copy GraphQL introspection script (generic — works with any Salesforce org)
 const scriptsSourceDir = path.join(packageRoot, 'scripts');
 const targetScriptsDir = path.join(cwd, 'scripts');
 
-console.log('\n📝 Installing GraphQL scripts...\n');
+console.log('\n📝 Installing utility scripts...\n');
 
 let scriptsInstalled = 0;
 
 if (fs.existsSync(scriptsSourceDir)) {
-  // Create target scripts directory if it doesn't exist
   if (!fs.existsSync(targetScriptsDir)) {
     fs.mkdirSync(targetScriptsDir, { recursive: true });
   }
 
-  // Copy generate-schema-from-sample.mjs
-  const generatorSource = path.join(scriptsSourceDir, 'generate-schema-from-sample.mjs');
-  const generatorTarget = path.join(targetScriptsDir, 'generate-schema-from-sample.mjs');
+  const getSchemaSource = path.join(scriptsSourceDir, 'get-graphql-schema.mjs');
+  const getSchemaTarget = path.join(targetScriptsDir, 'get-graphql-schema.mjs');
 
-  if (fs.existsSync(generatorSource)) {
+  if (fs.existsSync(getSchemaSource)) {
     try {
-      fs.copyFileSync(generatorSource, generatorTarget);
-      console.log('  ✓ Installed generate-schema-from-sample.mjs');
+      fs.copyFileSync(getSchemaSource, getSchemaTarget);
+      console.log('  ✓ Installed get-graphql-schema.mjs');
       scriptsInstalled++;
     } catch (error) {
-      console.error(`  ✗ Failed to install generate-schema-from-sample.mjs: ${error.message}`);
+      console.error(`  ✗ Failed to install get-graphql-schema.mjs: ${error.message}`);
     }
   }
 }
@@ -480,12 +335,6 @@ if (fs.existsSync(packageJsonPath)) {
       scriptsAdded.push('validate:dashboard');
     }
 
-    // Add the graphql:schema:sample script if it doesn't exist
-    if (!packageJson.scripts['graphql:schema:sample']) {
-      packageJson.scripts['graphql:schema:sample'] = 'node scripts/generate-schema-from-sample.mjs';
-      scriptsAdded.push('graphql:schema:sample');
-    }
-
     if (scriptsAdded.length > 0) {
       fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n', 'utf-8');
       scriptsAdded.forEach(script => {
@@ -501,35 +350,48 @@ if (fs.existsSync(packageJsonPath)) {
 
 // Copy .a4drules from package to project root (so AI assistants can discover them)
 const packageA4dRules = path.join(packageRoot, '.a4drules');
-const projectRootA4dRules = path.join(cwd, '../../../../../.a4drules'); // Go up from webapp to project root
 
 if (fs.existsSync(packageA4dRules)) {
   console.log('\n📋 Copying AI assistant rules to project root...\n');
 
-  // Resolve to absolute path
   const projectRootPath = path.resolve(cwd, '../../../../../');
   const targetA4dRules = path.join(projectRootPath, '.a4drules');
 
-  // Create .a4drules if it doesn't exist
   if (!fs.existsSync(targetA4dRules)) {
     fs.mkdirSync(targetA4dRules, { recursive: true });
   }
 
-  // Copy skills directory
-  const skillsSource = path.join(packageA4dRules, 'skills');
-  const skillsTarget = path.join(targetA4dRules, 'skills');
-  if (fs.existsSync(skillsSource)) {
-    const skillsCopied = copyDirectoryRecursive(skillsSource, skillsTarget);
-    console.log(`  ✓ Copied ${skillsCopied} skill files`);
+  let totalA4dCopied = 0;
+
+  // Force-copy root-level .md files first
+  const rootFiles = fs.readdirSync(packageA4dRules).filter(f => f.endsWith('.md'));
+  for (const file of rootFiles) {
+    try {
+      fs.copyFileSync(path.join(packageA4dRules, file), path.join(targetA4dRules, file));
+      totalA4dCopied++;
+    } catch (error) {
+      console.error(`  ✗ Failed to copy ${file}: ${error.message}`);
+    }
+  }
+  if (rootFiles.length > 0) {
+    console.log(`  ✓ Copied ${rootFiles.length} root rule files`);
   }
 
-  // Copy features directory
-  const featuresSource = path.join(packageA4dRules, 'features');
-  const featuresTarget = path.join(targetA4dRules, 'features');
-  if (fs.existsSync(featuresSource)) {
-    const featuresCopied = copyDirectoryRecursive(featuresSource, featuresTarget);
-    console.log(`  ✓ Copied ${featuresCopied} feature rule files`);
+  // Copy all subdirectories (skills, features, troubleshooting)
+  const subdirs = fs.readdirSync(packageA4dRules).filter(d => {
+    const full = path.join(packageA4dRules, d);
+    return fs.statSync(full).isDirectory();
+  });
+
+  for (const subdir of subdirs) {
+    const src = path.join(packageA4dRules, subdir);
+    const dst = path.join(targetA4dRules, subdir);
+    const copied = copyDirectoryRecursive(src, dst);
+    totalA4dCopied += copied;
+    console.log(`  ✓ Copied ${copied} files from ${subdir}/`);
   }
+
+  console.log(`  📋 Total: ${totalA4dCopied} rule files installed`);
 }
 
 // Migrate any dashboards from old location (src/components/pages/) to new location (src/pages/)
@@ -575,13 +437,12 @@ if (fs.existsSync(oldPagesDir)) {
 
 console.log('\n📊 Summary:');
 console.log(`  - Copied ${componentsCopied} UI components`);
-console.log(`  - Updated ${filesUpdated} files`);
+console.log(`  - Updated ${filesUpdated} import references`);
 console.log(`  - Installed ${templatesInstalled} page templates`);
-console.log(`  - Installed ${dataFilesInstalled} sample data files (including schema.graphql)`);
-console.log(`  - Installed ${scriptsInstalled} GraphQL scripts`);
+console.log(`  - Installed ${scriptsInstalled} utility scripts`);
 console.log(`  - Installed CommandCenter.tsx for dashboard management`);
 console.log(`  - Added "npm run reset:command-center" script`);
-console.log(`  - Installed AI assistant rules for command center building`);
+console.log(`  - Installed AI assistant rules (.a4drules)`);
 if (migratedFiles > 0) {
   console.log(`  - Migrated ${migratedFiles} dashboard files to correct location`);
 }