@schandlergarcia/sf-web-components 1.9.88 → 2.1.0

package/brands/engine/global.css

@@ -0,0 +1,234 @@
+@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);
+  --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/dist/components/library/cards/ActivityCard.js

@@ -1,4 +1,4 @@
-import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { jsxs as r, jsx as t } from "react/jsx-runtime";
 import "react";
 import { AnimatePresence as n, motion as o } from "framer-motion";
 import { ExclamationCircleIcon as c, CheckCircleIcon as d, ClockIcon as m, ArrowPathIcon as p } from "@heroicons/react/24/outline";
@@ -10,7 +10,7 @@ const l = {
   error: { Icon: c, color: "text-red-500", spin: !1 }
 };
 function u({ action: e }) {
-  const r = l[e.status] ?? l.pending;
+  const i = l[e.status] ?? l.pending;
   return /* @__PURE__ */ t(
     o.div,
     {
@@ -18,20 +18,20 @@ function u({ action: e }) {
       animate: { y: 0, opacity: 1 },
       exit: { y: -12, opacity: 0 },
       className: "rounded-lg border border-slate-100 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-950/40",
-      children: /* @__PURE__ */ i("div", { className: "flex items-start gap-2", children: [
-        /* @__PURE__ */ t(r.Icon, { className: `mt-0.5 h-4 w-4 shrink-0 ${r.color} ${r.spin ? "animate-spin" : ""}` }),
-        /* @__PURE__ */ i("div", { className: "min-w-0", children: [
+      children: /* @__PURE__ */ r("div", { className: "flex items-start gap-2", children: [
+        /* @__PURE__ */ t(i.Icon, { className: `mt-0.5 h-4 w-4 shrink-0 ${i.color} ${i.spin ? "animate-spin" : ""}` }),
+        /* @__PURE__ */ r("div", { className: "min-w-0", children: [
           /* @__PURE__ */ t("div", { className: "text-xs font-medium text-slate-700 dark:text-slate-200", children: e.title ?? e.action }),
-          (e.subtitle ?? e.traveler ?? e.timestamp ?? e.startedAt) && /* @__PURE__ */ t("div", { className: "mt-0.5 text-[10px] text-slate-400", children: [e.subtitle, e.traveler, e.timestamp ?? e.startedAt].filter(Boolean).join(" · ") })
+          (e.subtitle ?? e.description ?? e.timestamp ?? e.startedAt) && /* @__PURE__ */ t("div", { className: "mt-0.5 text-[10px] text-slate-400", children: [e.subtitle, e.description, e.timestamp ?? e.startedAt].filter(Boolean).join(" · ") })
         ] })
       ] })
     }
   );
 }
-function b({ title: e = "Activity", actions: r = [], className: a = "" }) {
-  return r.length === 0 ? null : /* @__PURE__ */ i("div", { className: a, children: [
+function b({ title: e = "Activity", actions: i = [], className: a = "" }) {
+  return i.length === 0 ? null : /* @__PURE__ */ r("div", { className: a, children: [
     e && /* @__PURE__ */ t(x, { as: "div", size: "xs", weight: "semibold", muted: !0, className: "mb-2 uppercase tracking-wider", children: e }),
-    /* @__PURE__ */ t("div", { className: "space-y-2", children: /* @__PURE__ */ t(n, { children: r.map((s) => /* @__PURE__ */ t(u, { action: s }, s.id)) }) })
+    /* @__PURE__ */ t("div", { className: "space-y-2", children: /* @__PURE__ */ t(n, { children: i.map((s) => /* @__PURE__ */ t(u, { action: s }, s.id)) }) })
   ] });
 }
 export {

package/dist/components/library/cards/ActivityCard.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActivityCard.js","sources":["../../../../src/components/library/cards/ActivityCard.jsx"],"sourcesContent":["import React from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ArrowPathIcon, CheckCircleIcon, ExclamationCircleIcon, ClockIcon } from \"@heroicons/react/24/outline\";\nimport UIText from \"../ui/Text\";\n\nconst STATUS_ICON = {\n  working:  { Icon: ArrowPathIcon,        color: \"text-indigo-500\",  spin: true },\n  pending:  { Icon: ClockIcon,            color: \"text-slate-400\",   spin: false },\n  complete: { Icon: CheckCircleIcon,      color: \"text-emerald-500\", spin: false },\n  error:    { Icon: ExclamationCircleIcon, color: \"text-red-500\",     spin: false },\n};\n\nfunction ActionItem({ action }) {\n  const s = STATUS_ICON[action.status] ?? STATUS_ICON.pending;\n  return (\n    <motion.div\n      initial={{ y: 12, opacity: 0 }}\n      animate={{ y: 0, opacity: 1 }}\n      exit={{ y: -12, opacity: 0 }}\n      className=\"rounded-lg border border-slate-100 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-950/40\"\n    >\n      <div className=\"flex items-start gap-2\">\n        <s.Icon className={`mt-0.5 h-4 w-4 shrink-0 ${s.color} ${s.spin ? \"animate-spin\" : \"\"}`} />\n        <div className=\"min-w-0\">\n          <div className=\"text-xs font-medium text-slate-700 dark:text-slate-200\">{action.title ?? action.action}</div>\n          {(action.subtitle ?? action.traveler ?? action.timestamp ?? action.startedAt) && (\n            <div className=\"mt-0.5 text-[10px] text-slate-400\">\n              {[action.subtitle, action.traveler, action.timestamp ?? action.startedAt].filter(Boolean).join(\" · \")}\n            </div>\n          )}\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\nexport default function ActivityCard({ title = \"Activity\", actions = [], className = \"\" }) {\n  if (actions.length === 0) return null;\n\n  return (\n    <div className={className}>\n      {title && (\n        <UIText as=\"div\" size=\"xs\" weight=\"semibold\" muted className=\"mb-2 uppercase tracking-wider\">\n          {title}\n        </UIText>\n      )}\n      <div className=\"space-y-2\">\n        <AnimatePresence>\n          {actions.map(a => (\n            <ActionItem key={a.id} action={a} />\n          ))}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n"],"names":["STATUS_ICON","ArrowPathIcon","ClockIcon","CheckCircleIcon","ExclamationCircleIcon","ActionItem","action","s","jsx","motion","jsxs","ActivityCard","title","actions","className","UIText","AnimatePresence","a"],"mappings":";;;;;AAKA,MAAMA,IAAc;AAAA,EAClB,SAAU,EAAE,MAAMC,GAAsB,OAAO,mBAAoB,MAAM,GAAA;AAAA,EACzE,SAAU,EAAE,MAAMC,GAAsB,OAAO,kBAAoB,MAAM,GAAA;AAAA,EACzE,UAAU,EAAE,MAAMC,GAAsB,OAAO,oBAAoB,MAAM,GAAA;AAAA,EACzE,OAAU,EAAE,MAAMC,GAAuB,OAAO,gBAAoB,MAAM,GAAA;AAC5E;AAEA,SAASC,EAAW,EAAE,QAAAC,KAAU;AAC9B,QAAMC,IAAIP,EAAYM,EAAO,MAAM,KAAKN,EAAY;AACpD,SACE,gBAAAQ;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,GAAG,IAAI,SAAS,EAAA;AAAA,MAC3B,SAAS,EAAE,GAAG,GAAG,SAAS,EAAA;AAAA,MAC1B,MAAM,EAAE,GAAG,KAAK,SAAS,EAAA;AAAA,MACzB,WAAU;AAAA,MAEV,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,QAAA,gBAAAF,EAACD,EAAE,MAAF,EAAO,WAAW,2BAA2BA,EAAE,KAAK,IAAIA,EAAE,OAAO,iBAAiB,EAAE,GAAA,CAAI;AAAA,QACzF,gBAAAG,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,UAAA,gBAAAF,EAAC,SAAI,WAAU,0DAA0D,UAAAF,EAAO,SAASA,EAAO,QAAO;AAAA,WACrGA,EAAO,YAAYA,EAAO,YAAYA,EAAO,aAAaA,EAAO,cACjE,gBAAAE,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA,CAACF,EAAO,UAAUA,EAAO,UAAUA,EAAO,aAAaA,EAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,KAAK,EAAA,CACtG;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAwBK,EAAa,EAAE,OAAAC,IAAQ,YAAY,SAAAC,IAAU,IAAI,WAAAC,IAAY,MAAM;AACzF,SAAID,EAAQ,WAAW,IAAU,OAG/B,gBAAAH,EAAC,SAAI,WAAAI,GACF,UAAA;AAAA,IAAAF,KACC,gBAAAJ,EAACO,GAAA,EAAO,IAAG,OAAM,MAAK,MAAK,QAAO,YAAW,OAAK,IAAC,WAAU,iCAC1D,UAAAH,GACH;AAAA,sBAED,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAJ,EAACQ,KACE,UAAAH,EAAQ,IAAI,CAAAI,MACX,gBAAAT,EAACH,KAAsB,QAAQY,EAAA,GAAdA,EAAE,EAAe,CACnC,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}
+{"version":3,"file":"ActivityCard.js","sources":["../../../../src/components/library/cards/ActivityCard.jsx"],"sourcesContent":["import React from \"react\";\nimport { motion, AnimatePresence } from \"framer-motion\";\nimport { ArrowPathIcon, CheckCircleIcon, ExclamationCircleIcon, ClockIcon } from \"@heroicons/react/24/outline\";\nimport UIText from \"../ui/Text\";\n\nconst STATUS_ICON = {\n  working:  { Icon: ArrowPathIcon,        color: \"text-indigo-500\",  spin: true },\n  pending:  { Icon: ClockIcon,            color: \"text-slate-400\",   spin: false },\n  complete: { Icon: CheckCircleIcon,      color: \"text-emerald-500\", spin: false },\n  error:    { Icon: ExclamationCircleIcon, color: \"text-red-500\",     spin: false },\n};\n\nfunction ActionItem({ action }) {\n  const s = STATUS_ICON[action.status] ?? STATUS_ICON.pending;\n  return (\n    <motion.div\n      initial={{ y: 12, opacity: 0 }}\n      animate={{ y: 0, opacity: 1 }}\n      exit={{ y: -12, opacity: 0 }}\n      className=\"rounded-lg border border-slate-100 bg-slate-50 p-3 dark:border-slate-800 dark:bg-slate-950/40\"\n    >\n      <div className=\"flex items-start gap-2\">\n        <s.Icon className={`mt-0.5 h-4 w-4 shrink-0 ${s.color} ${s.spin ? \"animate-spin\" : \"\"}`} />\n        <div className=\"min-w-0\">\n          <div className=\"text-xs font-medium text-slate-700 dark:text-slate-200\">{action.title ?? action.action}</div>\n          {(action.subtitle ?? action.description ?? action.timestamp ?? action.startedAt) && (\n            <div className=\"mt-0.5 text-[10px] text-slate-400\">\n              {[action.subtitle, action.description, action.timestamp ?? action.startedAt].filter(Boolean).join(\" · \")}\n            </div>\n          )}\n        </div>\n      </div>\n    </motion.div>\n  );\n}\n\nexport default function ActivityCard({ title = \"Activity\", actions = [], className = \"\" }) {\n  if (actions.length === 0) return null;\n\n  return (\n    <div className={className}>\n      {title && (\n        <UIText as=\"div\" size=\"xs\" weight=\"semibold\" muted className=\"mb-2 uppercase tracking-wider\">\n          {title}\n        </UIText>\n      )}\n      <div className=\"space-y-2\">\n        <AnimatePresence>\n          {actions.map(a => (\n            <ActionItem key={a.id} action={a} />\n          ))}\n        </AnimatePresence>\n      </div>\n    </div>\n  );\n}\n"],"names":["STATUS_ICON","ArrowPathIcon","ClockIcon","CheckCircleIcon","ExclamationCircleIcon","ActionItem","action","s","jsx","motion","jsxs","ActivityCard","title","actions","className","UIText","AnimatePresence","a"],"mappings":";;;;;AAKA,MAAMA,IAAc;AAAA,EAClB,SAAU,EAAE,MAAMC,GAAsB,OAAO,mBAAoB,MAAM,GAAA;AAAA,EACzE,SAAU,EAAE,MAAMC,GAAsB,OAAO,kBAAoB,MAAM,GAAA;AAAA,EACzE,UAAU,EAAE,MAAMC,GAAsB,OAAO,oBAAoB,MAAM,GAAA;AAAA,EACzE,OAAU,EAAE,MAAMC,GAAuB,OAAO,gBAAoB,MAAM,GAAA;AAC5E;AAEA,SAASC,EAAW,EAAE,QAAAC,KAAU;AAC9B,QAAMC,IAAIP,EAAYM,EAAO,MAAM,KAAKN,EAAY;AACpD,SACE,gBAAAQ;AAAA,IAACC,EAAO;AAAA,IAAP;AAAA,MACC,SAAS,EAAE,GAAG,IAAI,SAAS,EAAA;AAAA,MAC3B,SAAS,EAAE,GAAG,GAAG,SAAS,EAAA;AAAA,MAC1B,MAAM,EAAE,GAAG,KAAK,SAAS,EAAA;AAAA,MACzB,WAAU;AAAA,MAEV,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,QAAA,gBAAAF,EAACD,EAAE,MAAF,EAAO,WAAW,2BAA2BA,EAAE,KAAK,IAAIA,EAAE,OAAO,iBAAiB,EAAE,GAAA,CAAI;AAAA,QACzF,gBAAAG,EAAC,OAAA,EAAI,WAAU,WACb,UAAA;AAAA,UAAA,gBAAAF,EAAC,SAAI,WAAU,0DAA0D,UAAAF,EAAO,SAASA,EAAO,QAAO;AAAA,WACrGA,EAAO,YAAYA,EAAO,eAAeA,EAAO,aAAaA,EAAO,cACpE,gBAAAE,EAAC,OAAA,EAAI,WAAU,qCACZ,UAAA,CAACF,EAAO,UAAUA,EAAO,aAAaA,EAAO,aAAaA,EAAO,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,KAAK,EAAA,CACzG;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CACF;AAAA,IAAA;AAAA,EAAA;AAGN;AAEA,SAAwBK,EAAa,EAAE,OAAAC,IAAQ,YAAY,SAAAC,IAAU,IAAI,WAAAC,IAAY,MAAM;AACzF,SAAID,EAAQ,WAAW,IAAU,OAG/B,gBAAAH,EAAC,SAAI,WAAAI,GACF,UAAA;AAAA,IAAAF,KACC,gBAAAJ,EAACO,GAAA,EAAO,IAAG,OAAM,MAAK,MAAK,QAAO,YAAW,OAAK,IAAC,WAAU,iCAC1D,UAAAH,GACH;AAAA,sBAED,OAAA,EAAI,WAAU,aACb,UAAA,gBAAAJ,EAACQ,KACE,UAAAH,EAAQ,IAAI,CAAAI,MACX,gBAAAT,EAACH,KAAsB,QAAQY,EAAA,GAAdA,EAAE,EAAe,CACnC,GACH,EAAA,CACF;AAAA,EAAA,GACF;AAEJ;"}

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.88",
+  "version": "2.1.0",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -27,11 +27,11 @@
   "files": [
     "dist",
     "scripts",
-    "data",
-    "assets",
+    "brands",
     "src/templates",
     "src/components",
     "src/lib",
+    "src/styles",
     "src/types",
     "README.md",
     "INSTALL.md",
@@ -51,7 +51,10 @@
     "postinstall": "node scripts/postinstall.mjs",
     "reset:command-center": "bash scripts/reset-command-center.sh",
     "validate:dashboard": "bash scripts/validate-dashboard.sh",
-    "graphql:schema": "node scripts/get-graphql-schema.mjs"
+    "graphql:schema": "node scripts/get-graphql-schema.mjs",
+    "brand:engine": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs engine",
+    "brand:reset": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --reset",
+    "brand:list": "node node_modules/@schandlergarcia/sf-web-components/scripts/apply-brand.mjs --list"
   },
   "peerDependencies": {
     "@heroicons/react": "^2.0.0",