@apteva/apteva-kit 0.1.41 → 0.1.42

package/dist/index.js

@@ -700,14 +700,14 @@ Widgets: @ui:type[{props}]. Types: ${widgets.join(", ")}. Add "meta" at root (no
 var _jsxruntime = require('react/jsx-runtime');
 function Card({ widget, onAction }) {
   const { title, description, image, footer } = widget.props;
-  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: [
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: [
     image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: image, alt: title, className: "w-full h-48 object-cover" }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "!text-lg font-semibold !text-gray-900 dark:!text-white", children: title }),
-      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-gray-600 dark:!text-gray-400 mt-2", children: description })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h3", { className: "!text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
+      description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-neutral-600 dark:!text-neutral-400 mt-2", children: description })
     ] }),
-    (footer || widget.actions && widget.actions.length > 0) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border-t border-gray-200 dark:border-gray-700 p-4 flex justify-between items-center", children: [
-      footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm !text-gray-600 dark:!text-gray-400", children: footer }),
+    (footer || widget.actions && widget.actions.length > 0) && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "border-t border-neutral-200 dark:border-neutral-700 p-4 flex justify-between items-center", children: [
+      footer && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm !text-neutral-600 dark:!text-neutral-400", children: footer }),
       widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
         {
@@ -730,17 +730,17 @@ function Card({ widget, onAction }) {
 
 function List({ widget, onAction }) {
   const { items } = widget.props;
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: items.map((item, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
     "div",
     {
-      className: `flex items-center p-4 transition-colors ${index !== items.length - 1 ? "border-b border-gray-200 dark:border-gray-700" : ""} ${!item.backgroundColor ? "hover:bg-gray-50 dark:hover:bg-gray-800" : ""}`,
+      className: `flex items-center p-4 transition-colors ${index !== items.length - 1 ? "border-b border-neutral-200 dark:border-neutral-700" : ""} ${!item.backgroundColor ? "hover:bg-neutral-50 dark:hover:bg-neutral-800" : ""}`,
       style: item.backgroundColor ? { backgroundColor: item.backgroundColor } : void 0,
       children: [
         item.image && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: item.image, alt: item.title, className: "w-16 h-16 rounded object-cover" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: `flex-1 ${item.image ? "ml-4" : ""}`, children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold !text-gray-900 dark:!text-white", children: item.title }),
-          item.subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-sm !text-gray-600 dark:!text-gray-400", children: item.subtitle }),
-          item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-xs !text-gray-500 dark:!text-gray-500 mt-1", children: item.description })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold !text-neutral-900 dark:!text-white", children: item.title }),
+          item.subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-sm !text-neutral-600 dark:!text-neutral-400", children: item.subtitle }),
+          item.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "!text-xs !text-neutral-500 dark:!text-neutral-500 mt-1", children: item.description })
         ] }),
         widget.actions && widget.actions.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex gap-2", children: widget.actions.map((action, idx) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
@@ -768,7 +768,7 @@ function Button({ widget, onAction }) {
   const { label, variant = "primary", disabled = false } = widget.props;
   const variantClasses = {
     primary: "bg-blue-500 !text-white hover:bg-blue-600",
-    secondary: "bg-gray-500 !text-white hover:bg-gray-600",
+    secondary: "bg-neutral-500 !text-white hover:bg-neutral-600",
     outline: "border-2 border-blue-500 !text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900",
     ghost: "!text-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900"
   };
@@ -796,8 +796,8 @@ function ButtonGroup({ widget, onAction }) {
   const { layout = "horizontal", buttons } = widget.props;
   const variantClasses = {
     primary: "bg-blue-500 !text-white hover:bg-blue-600",
-    secondary: "bg-gray-200 dark:bg-gray-700 !text-gray-800 dark:!text-gray-200 hover:bg-gray-300 dark:hover:bg-gray-600",
-    outline: "border border-gray-300 dark:border-gray-600 !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800"
+    secondary: "bg-neutral-200 dark:bg-neutral-700 !text-neutral-800 dark:!text-neutral-200 hover:bg-neutral-300 dark:hover:bg-neutral-600",
+    outline: "border border-neutral-300 dark:border-neutral-600 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800"
   };
   const getActionForButton = (buttonId) => {
     return _optionalChain([widget, 'access', _7 => _7.actions, 'optionalAccess', _8 => _8.find, 'call', _9 => _9((action) => _optionalChain([action, 'access', _10 => _10.payload, 'optionalAccess', _11 => _11.buttonId]) === buttonId)]) || _optionalChain([widget, 'access', _12 => _12.actions, 'optionalAccess', _13 => _13[0]]);
@@ -851,13 +851,13 @@ function Table({ widget, onAction }) {
         return "text-left";
     }
   };
-  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border border-gray-200 dark:border-gray-700 rounded-xl bg-white dark:bg-gray-900 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { className: "w-full", children: [
-    caption && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "caption", { className: "px-4 py-2 text-sm text-gray-600 dark:text-gray-400 text-left bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: caption }),
-    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { className: "bg-gray-50 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700", children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "border border-neutral-200 dark:border-neutral-700 rounded-xl bg-white dark:bg-neutral-900 overflow-hidden", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "overflow-x-auto", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "table", { className: "w-full", children: [
+    caption && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "caption", { className: "px-4 py-2 text-sm text-neutral-600 dark:text-neutral-400 text-left bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: caption }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "thead", { children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "tr", { className: "bg-neutral-50 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: columns.map((column) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "th",
       {
         className: cn(
-          "font-semibold text-gray-900 dark:text-white",
+          "font-semibold text-neutral-900 dark:text-white",
           compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm",
           getAlignment(column.align)
         ),
@@ -871,9 +871,9 @@ function Table({ widget, onAction }) {
         "tr",
         {
           className: cn(
-            "border-b border-gray-200 dark:border-gray-700 last:border-b-0",
-            "transition-colors hover:bg-gray-50 dark:hover:bg-gray-800",
-            striped && rowIndex % 2 === 1 && "bg-gray-50/50 dark:bg-gray-800/50"
+            "border-b border-neutral-200 dark:border-neutral-700 last:border-b-0",
+            "transition-colors hover:bg-neutral-50 dark:hover:bg-neutral-800",
+            striped && rowIndex % 2 === 1 && "bg-neutral-50/50 dark:bg-neutral-800/50"
           ),
           onClick: () => {
             if (widget.actions && widget.actions.length > 0) {
@@ -890,7 +890,7 @@ function Table({ widget, onAction }) {
             "td",
             {
               className: cn(
-                "text-gray-700 dark:text-gray-300",
+                "text-neutral-700 dark:text-neutral-300",
                 compact ? "px-3 py-2 text-xs" : "px-4 py-3 text-sm",
                 getAlignment(column.align)
               ),
@@ -905,7 +905,7 @@ function Table({ widget, onAction }) {
         "td",
         {
           colSpan: columns.length,
-          className: "px-4 py-8 text-center text-sm text-gray-500 dark:text-gray-400",
+          className: "px-4 py-8 text-center text-sm text-neutral-500 dark:text-neutral-400",
           children: "No data available"
         }
       ) })
@@ -972,71 +972,71 @@ function Widgets({
 function WidgetSkeleton({ type, className }) {
   switch (type) {
     case "card":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 space-y-3", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-gray-200 dark:bg-gray-600 rounded w-3/4" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-600 rounded w-full" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-600 rounded w-5/6" })
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-4 space-y-3", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-5/6" })
       ] }) });
     case "list":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3 p-3 rounded-lg border border-gray-200 dark:border-gray-600", children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 bg-gray-200 dark:bg-gray-600 rounded-full flex-shrink-0" }),
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse space-y-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3 p-3 rounded-lg border border-neutral-200 dark:border-neutral-800", children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-10 h-10 bg-neutral-200 dark:bg-neutral-700 rounded-full flex-shrink-0" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 space-y-2", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-600 rounded w-1/2" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-2 bg-gray-200 dark:bg-gray-600 rounded w-3/4" })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-2 bg-neutral-200 dark:bg-neutral-700 rounded w-3/4" })
         ] })
       ] }, i)) });
     case "button_group":
       return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse flex gap-2", className), children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-gray-200 dark:bg-gray-600 rounded-lg w-20" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-gray-200 dark:bg-gray-600 rounded-lg w-20" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-gray-200 dark:bg-gray-600 rounded-lg w-20" })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded-lg w-20" })
       ] });
     case "form":
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-600 p-4 space-y-4", className), children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/3" }),
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4 space-y-4", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/3" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "space-y-3", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-10 bg-gray-200 dark:bg-gray-600 rounded" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-10 bg-gray-200 dark:bg-gray-600 rounded" })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-10 bg-neutral-200 dark:bg-neutral-700 rounded" })
         ] }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-gray-200 dark:bg-gray-600 rounded w-24" })
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-9 bg-neutral-200 dark:bg-neutral-700 rounded w-24" })
       ] });
     case "chart":
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-600 p-4", className), children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/4 mb-4" }),
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/4 mb-4" }),
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-end gap-2 h-32", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-600 rounded-t h-1/2" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-600 rounded-t h-3/4" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-600 rounded-t h-1/3" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-600 rounded-t h-full" }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-gray-200 dark:bg-gray-600 rounded-t h-2/3" })
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/2" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-3/4" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-1/3" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-full" }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 bg-neutral-200 dark:bg-neutral-700 rounded-t h-2/3" })
         ] })
       ] });
     case "image":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aspect-video bg-gray-200 dark:bg-gray-600 rounded-lg" }) });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aspect-video bg-neutral-200 dark:bg-neutral-700 rounded-lg" }) });
     case "gallery":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aspect-square bg-gray-200 dark:bg-gray-600 rounded-lg" }, i)) });
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse grid grid-cols-3 gap-2", className), children: [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "aspect-square bg-neutral-200 dark:bg-neutral-700 rounded-lg" }, i)) });
     case "map":
-      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-48 bg-gray-200 dark:bg-gray-600 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "w-8 h-8 text-gray-300 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
+      return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("animate-pulse", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-48 bg-neutral-200 dark:bg-neutral-700 rounded-lg flex items-center justify-center", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { className: "w-8 h-8 text-neutral-400 dark:text-neutral-500", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15 11a3 3 0 11-6 0 3 3 0 016 0z" })
       ] }) }) });
     case "table":
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-600 overflow-hidden", className), children: [
-        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex bg-gray-100 dark:bg-gray-600 border-b border-gray-200 dark:border-gray-600", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-300 dark:bg-gray-400 rounded w-16" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-300 dark:bg-gray-400 rounded w-20" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-300 dark:bg-gray-400 rounded w-14" }) })
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 overflow-hidden", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-700", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-16" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-20" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-300 dark:bg-neutral-600 rounded w-14" }) })
         ] }),
-        [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex border-b border-gray-200 dark:border-gray-600 last:border-b-0", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-600 rounded w-24" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-600 rounded w-16" }) }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-600 rounded w-20" }) })
+        [1, 2, 3].map((i) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex border-b border-neutral-200 dark:border-neutral-800 last:border-b-0", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-24" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-16" }) }),
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 px-4 py-3", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-20" }) })
         ] }, i))
       ] });
     default:
-      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-gray-200 dark:border-gray-600 p-4", className), children: [
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-gray-200 dark:bg-gray-600 rounded w-1/2 mb-2" }),
-        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-gray-200 dark:bg-gray-600 rounded w-full" })
+      return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn("animate-pulse rounded-lg border border-neutral-200 dark:border-neutral-800 p-4", className), children: [
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-4 bg-neutral-200 dark:bg-neutral-700 rounded w-1/2 mb-2" }),
+        /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "h-3 bg-neutral-200 dark:bg-neutral-700 rounded w-full" })
       ] });
   }
 }
@@ -1474,7 +1474,7 @@ function WelcomeScreen({
   const hasPrompts = normalizedPrompts.length > 0;
   const hasHeader = title || subtitle || icon;
   if (!hasHeader && !hasPrompts) {
-    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center h-full !text-gray-500 dark:!text-gray-400", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center space-y-2", children: [
+    return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center justify-center h-full !text-neutral-500 dark:!text-neutral-400", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center space-y-2", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex justify-center", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultIcon, {}) }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm", children: "No messages yet. Start a conversation!" })
     ] }) });
@@ -1482,8 +1482,8 @@ function WelcomeScreen({
   if (variant === "minimal") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full px-4 py-4", children: [
       hasHeader && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "mb-4", children: [
-        title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-lg font-semibold !text-gray-900 dark:!text-white", children: title }),
-        subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm !text-gray-500 dark:!text-gray-400 mt-1", children: subtitle })
+        title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-lg font-semibold !text-neutral-900 dark:!text-white", children: title }),
+        subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm !text-neutral-500 dark:!text-neutral-400 mt-1", children: subtitle })
       ] }),
       hasPrompts && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-1 space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
         "button",
@@ -1491,18 +1491,18 @@ function WelcomeScreen({
           onClick: () => onPromptClick(prompt.text),
           className: cn(
             "w-full text-left px-4 py-3 rounded-xl",
-            "bg-gray-50 dark:bg-gray-800/50",
-            "border border-gray-200 dark:border-gray-700",
-            "hover:bg-gray-100 dark:hover:bg-gray-800",
-            "hover:border-gray-300 dark:hover:border-gray-600",
+            "bg-neutral-50 dark:bg-neutral-800/50",
+            "border border-neutral-200 dark:border-neutral-700",
+            "hover:bg-neutral-100 dark:hover:bg-neutral-800",
+            "hover:border-neutral-300 dark:hover:border-neutral-600",
             "transition-all duration-200",
             "group"
           ),
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 !text-gray-400 dark:!text-gray-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 !text-neutral-400 dark:!text-neutral-500 group-hover:!text-blue-500 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-gray-900 dark:!text-white truncate", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 truncate", children: prompt.description })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white truncate", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 truncate", children: prompt.description })
             ] })
           ] })
         },
@@ -1512,9 +1512,9 @@ function WelcomeScreen({
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col items-center justify-center h-full px-4 py-6 sm:py-8", children: [
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "text-center mb-6 sm:mb-8 max-w-md", children: [
-      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 !text-gray-400 dark:!text-gray-500 flex justify-center", children: icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultIcon, {}) }),
-      title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "text-xl sm:text-2xl font-semibold !text-gray-900 dark:!text-white mb-2", children: title }),
-      subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm sm:text-base !text-gray-500 dark:!text-gray-400", children: subtitle })
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-4 !text-neutral-400 dark:!text-neutral-500 flex justify-center", children: icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, DefaultIcon, {}) }),
+      title && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h1", { className: "text-xl sm:text-2xl font-semibold !text-neutral-900 dark:!text-white mb-2", children: title }),
+      subtitle && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm sm:text-base !text-neutral-500 dark:!text-neutral-400", children: subtitle })
     ] }),
     hasPrompts && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full max-w-2xl", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "sm:hidden space-y-2", children: normalizedPrompts.map((prompt, index) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -1523,9 +1523,9 @@ function WelcomeScreen({
           onClick: () => onPromptClick(prompt.text),
           className: cn(
             "w-full text-left px-4 py-3 rounded-xl",
-            "bg-white dark:bg-gray-800",
-            "border border-gray-200 dark:border-gray-700",
-            "hover:bg-gray-50 dark:hover:bg-gray-700",
+            "bg-white dark:bg-neutral-800",
+            "border border-neutral-200 dark:border-neutral-700",
+            "hover:bg-neutral-50 dark:hover:bg-neutral-700",
             "hover:border-blue-300 dark:hover:border-blue-600",
             "active:scale-[0.98]",
             "transition-all duration-200",
@@ -1533,15 +1533,15 @@ function WelcomeScreen({
             "group"
           ),
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 w-8 h-8 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-gray-900 dark:!text-white", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-0.5 line-clamp-1", children: prompt.description })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-0.5 line-clamp-1", children: prompt.description })
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "svg",
               {
-                className: "w-4 h-4 !text-gray-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
+                className: "w-4 h-4 !text-neutral-400 group-hover:!text-blue-500 transition-colors flex-shrink-0",
                 fill: "none",
                 stroke: "currentColor",
                 viewBox: "0 0 24 24",
@@ -1566,9 +1566,9 @@ function WelcomeScreen({
           onClick: () => onPromptClick(prompt.text),
           className: cn(
             "text-left p-4 rounded-xl",
-            "bg-white dark:bg-gray-800",
-            "border border-gray-200 dark:border-gray-700",
-            "hover:bg-gray-50 dark:hover:bg-gray-700",
+            "bg-white dark:bg-neutral-800",
+            "border border-neutral-200 dark:border-neutral-700",
+            "hover:bg-neutral-50 dark:hover:bg-neutral-700",
             "hover:border-blue-300 dark:hover:border-blue-600",
             "hover:shadow-md",
             "active:scale-[0.98]",
@@ -1576,10 +1576,10 @@ function WelcomeScreen({
             "group"
           ),
           children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-start gap-3", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-gray-100 dark:bg-gray-700 flex items-center justify-center !text-gray-500 dark:!text-gray-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex-shrink-0 w-9 h-9 rounded-lg bg-neutral-100 dark:bg-neutral-700 flex items-center justify-center !text-neutral-500 dark:!text-neutral-400 group-hover:bg-blue-100 dark:group-hover:bg-blue-900/30 group-hover:!text-blue-600 dark:group-hover:!text-blue-400 transition-colors", children: prompt.icon || /* @__PURE__ */ _jsxruntime.jsx.call(void 0, ArrowIcon, {}) }),
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-gray-900 dark:!text-white leading-snug", children: prompt.text }),
-              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-gray-500 dark:!text-gray-400 mt-1 line-clamp-2", children: prompt.description })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm font-medium !text-neutral-900 dark:!text-white leading-snug", children: prompt.text }),
+              prompt.description && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-xs !text-neutral-500 dark:!text-neutral-400 mt-1 line-clamp-2", children: prompt.description })
             ] })
           ] })
         },
@@ -1714,18 +1714,18 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
     pendingFiles.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "mb-2 flex flex-wrap gap-2", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
       "div",
       {
-        className: "relative group flex items-center gap-2 px-3 py-2 bg-gray-100 dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg",
+        className: "relative group flex items-center gap-2 px-3 py-2 bg-neutral-100 dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg",
         children: [
-          pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-8 h-8 flex items-center justify-center bg-gray-200 dark:bg-gray-700 rounded !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+          pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-8 h-8 object-cover rounded" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-8 h-8 flex items-center justify-center bg-neutral-200 dark:bg-neutral-700 rounded !text-neutral-500 dark:!text-neutral-400", children: getFileIcon(pf.file.type) }),
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col min-w-0", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-medium !text-gray-700 dark:!text-gray-300 truncate max-w-[120px]", children: pf.file.name }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: formatFileSize(pf.file.size) })
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs font-medium !text-neutral-700 dark:!text-neutral-300 truncate max-w-[120px]", children: pf.file.name }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: formatFileSize(pf.file.size) })
           ] }),
           /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
             "button",
             {
               onClick: () => removeFile(index),
-              className: "absolute -top-1.5 -right-1.5 w-5 h-5 bg-gray-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
+              className: "absolute -top-1.5 -right-1.5 w-5 h-5 bg-neutral-500 hover:bg-red-500 text-white rounded-full flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity",
               title: "Remove file",
               children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3 h-3", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
             }
@@ -1734,14 +1734,14 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
       },
       index
     )) }),
-    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-composer relative border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "apteva-composer relative border-2 border-neutral-300 dark:border-neutral-700 bg-white dark:bg-neutral-900 transition-all duration-300 flex items-center px-3 py-2 gap-3", children: [
       /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "relative flex-shrink-0", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           "button",
           {
             ref: menuButtonRef,
             onClick: () => setShowMenu(!showMenu),
-            className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-gray-700 dark:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800",
+            className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800",
             title: "More options",
             children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
           }
@@ -1751,7 +1751,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "div",
             {
-              className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
+              className: "fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
               style: {
                 left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _24 => _24.current, 'optionalAccess', _25 => _25.getBoundingClientRect, 'call', _26 => _26(), 'access', _27 => _27.left]), () => ( 0)),
                 top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _28 => _28.current, 'optionalAccess', _29 => _29.getBoundingClientRect, 'call', _30 => _30(), 'access', _31 => _31.bottom]), () => ( 0))) + 8
@@ -1764,7 +1764,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                       _optionalChain([fileInputRef, 'access', _32 => _32.current, 'optionalAccess', _33 => _33.click, 'call', _34 => _34()]);
                       setShowMenu(false);
                     },
-                    className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+                    className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
@@ -1778,7 +1778,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
                       onSwitchMode();
                       setShowMenu(false);
                     },
-                    className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+                    className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700",
                     children: [
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 10V3L4 14h7v7l9-11h-7z" }) }),
                       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Switch to command mode" })
@@ -1799,7 +1799,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
           onKeyDown: handleKeyDown,
           placeholder,
           disabled,
-          className: "flex-1 resize-none bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 py-1 disabled:opacity-50 disabled:cursor-not-allowed",
+          className: "flex-1 resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1 disabled:opacity-50 disabled:cursor-not-allowed",
           rows: 1,
           style: { maxHeight: "120px" }
         }
@@ -1817,7 +1817,7 @@ function Composer({ onSendMessage, placeholder = "Type a message...", disabled =
         {
           onClick: handleSend,
           disabled: !text.trim() && pendingFiles.length === 0 || disabled,
-          className: "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 !text-gray-700 dark:!text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
+          className: "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0 border border-neutral-300 dark:border-neutral-600 bg-white dark:bg-neutral-800 !text-neutral-700 dark:!text-neutral-300 hover:bg-neutral-50 dark:hover:bg-neutral-700 disabled:opacity-30 disabled:cursor-not-allowed !text-lg",
           title: "Send message",
           children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
         }
@@ -1968,8 +1968,8 @@ function CommandComposer({
       "div",
       {
         className: cn(
-          "apteva-composer flex items-center gap-2 px-3 py-2 border-2 bg-white dark:bg-gray-900 transition-all duration-200",
-          state === "idle" && "border-gray-200 dark:border-gray-700",
+          "apteva-composer flex items-center gap-2 px-3 py-2 border-2 bg-white dark:bg-neutral-900 transition-all duration-200",
+          state === "idle" && "border-neutral-200 dark:border-neutral-700",
           state === "loading" && "border-blue-400 dark:border-blue-500",
           state === "plan-pending" && "border-amber-400 dark:border-amber-500",
           state === "success" && "border-green-400 dark:border-green-500",
@@ -1983,7 +1983,7 @@ function CommandComposer({
                 {
                   ref: menuButtonRef,
                   onClick: () => setShowMenu(!showMenu),
-                  className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-gray-500 dark:!text-gray-400 hover:!text-gray-700 dark:hover:!text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-800",
+                  className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all !text-neutral-500 dark:!text-neutral-400 hover:!text-neutral-700 dark:hover:!text-neutral-200 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "More options",
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10 5v10M5 10h10", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
                 }
@@ -1993,7 +1993,7 @@ function CommandComposer({
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
                   "div",
                   {
-                    className: "fixed bg-gray-800 dark:bg-gray-700 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
+                    className: "fixed bg-neutral-800 dark:bg-neutral-800 rounded-xl shadow-lg overflow-hidden z-[9999] min-w-[200px]",
                     style: {
                       left: _nullishCoalesce(_optionalChain([menuButtonRef, 'access', _39 => _39.current, 'optionalAccess', _40 => _40.getBoundingClientRect, 'call', _41 => _41(), 'access', _42 => _42.left]), () => ( 0)),
                       top: (_nullishCoalesce(_optionalChain([menuButtonRef, 'access', _43 => _43.current, 'optionalAccess', _44 => _44.getBoundingClientRect, 'call', _45 => _45(), 'access', _46 => _46.bottom]), () => ( 0))) + 8
@@ -2006,7 +2006,7 @@ function CommandComposer({
                             _optionalChain([fileInputRef, 'access', _47 => _47.current, 'optionalAccess', _48 => _48.click, 'call', _49 => _49()]);
                             setShowMenu(false);
                           },
-                          className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left",
+                          className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left",
                           children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "18", height: "18", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M10.5 3.5L5.5 8.5C4.67157 9.32843 4.67157 10.6716 5.5 11.5C6.32843 12.3284 7.67157 12.3284 8.5 11.5L14.5 5.5C15.8807 4.11929 15.8807 1.88071 14.5 0.5C13.1193 -0.880711 10.8807 -0.880711 9.5 0.5L3.5 6.5C1.56846 8.43154 1.56846 11.5685 3.5 13.5C5.43154 15.4315 8.56846 15.4315 10.5 13.5L15.5 8.5", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(2, 3)" }) }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Add photos & files" })
@@ -2020,7 +2020,7 @@ function CommandComposer({
                             onExpand();
                             setShowMenu(false);
                           },
-                          className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-gray-700 dark:hover:bg-gray-600 transition-colors !text-white text-left border-t border-gray-700 dark:border-gray-600",
+                          className: "w-full flex items-center gap-3 px-4 py-3 hover:bg-neutral-700 dark:hover:bg-neutral-700 transition-colors !text-white text-left border-t border-neutral-700 dark:border-neutral-700",
                           children: [
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4.5 h-4.5", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
                             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "!text-sm font-medium", children: "Expand to chat" })
@@ -2038,10 +2038,10 @@ function CommandComposer({
           pendingFiles.length > 0 && state === "idle" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "flex items-center gap-1 flex-shrink-0", children: pendingFiles.map((pf, index) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
             "div",
             {
-              className: "relative group flex items-center justify-center w-6 h-6 bg-gray-100 dark:bg-gray-800 rounded overflow-hidden",
+              className: "relative group flex items-center justify-center w-6 h-6 bg-neutral-100 dark:bg-neutral-800 rounded overflow-hidden",
               title: pf.file.name,
               children: [
-                pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs !text-gray-500 dark:!text-gray-400", children: getFileIcon(pf.file.type) }),
+                pf.preview ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "img", { src: pf.preview, alt: pf.file.name, className: "w-6 h-6 object-cover" }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-xs !text-neutral-500 dark:!text-neutral-400", children: getFileIcon(pf.file.type) }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                   "button",
                   {
@@ -2067,7 +2067,7 @@ function CommandComposer({
               rows: 1,
               className: cn(
                 "flex-1 resize-none bg-transparent border-none focus:outline-none",
-                "!text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500",
+                "!text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500",
                 "text-sm leading-relaxed py-1",
                 "disabled:opacity-50"
               ),
@@ -2078,15 +2078,15 @@ function CommandComposer({
             {
               className: cn(
                 "flex-1 text-sm py-1 truncate flex items-center gap-2",
-                state === "loading" && !isToolCall && "!text-gray-600 dark:!text-gray-400",
+                state === "loading" && !isToolCall && "!text-neutral-600 dark:!text-neutral-400",
                 state === "loading" && isToolCall && "!text-blue-600 dark:!text-blue-400",
-                state === "success" && "!text-gray-900 dark:!text-gray-100",
+                state === "success" && "!text-neutral-900 dark:!text-neutral-100",
                 state === "error" && "!text-red-600 dark:!text-red-400",
                 state === "plan-pending" && "!text-amber-700 dark:!text-amber-300"
               ),
               children: isToolCall ? /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "font-mono", children: displayContent }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-gray-400 dark:text-gray-500", children: "Running..." })
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-neutral-400 dark:text-neutral-500", children: "Running..." })
               ] }) : displayContent
             }
           ),
@@ -2103,7 +2103,7 @@ function CommandComposer({
               "button",
               {
                 onClick: onReject,
-                className: "px-2 py-1 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-xs font-medium",
+                className: "px-2 py-1 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-xs font-medium",
                 children: "Modify"
               }
             )
@@ -2121,7 +2121,7 @@ function CommandComposer({
               "button",
               {
                 onClick: handleNewCommand,
-                className: "w-8 h-8 rounded-lg flex items-center justify-center !text-gray-400 hover:!text-gray-600 dark:hover:!text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors",
+                className: "w-8 h-8 rounded-lg flex items-center justify-center !text-neutral-400 hover:!text-neutral-600 dark:hover:!text-neutral-300 hover:bg-neutral-100 dark:hover:bg-neutral-800 transition-colors",
                 title: "New command",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
@@ -2133,9 +2133,9 @@ function CommandComposer({
                 disabled: !input.trim() && pendingFiles.length === 0 || disabled,
                 className: cn(
                   "w-8 h-8 rounded-lg flex items-center justify-center transition-all",
-                  "border border-gray-200 dark:border-gray-700",
+                  "border border-neutral-200 dark:border-neutral-700",
                   "disabled:opacity-30 disabled:cursor-not-allowed",
-                  input.trim() || pendingFiles.length > 0 ? "bg-gray-900 dark:bg-white !text-white dark:!text-gray-900 border-gray-900 dark:border-white" : "bg-white dark:bg-gray-800 !text-gray-400"
+                  input.trim() || pendingFiles.length > 0 ? "bg-neutral-900 dark:bg-white !text-white dark:!text-neutral-900 border-neutral-900 dark:border-white" : "bg-white dark:bg-neutral-800 !text-neutral-400"
                 ),
                 title: "Execute command",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M5 12h14M12 5l7 7-7 7" }) })
@@ -3431,9 +3431,9 @@ ${planToExecute}`;
     "div",
     {
       className: cn(
-        "relative border-2 rounded-xl bg-white dark:bg-gray-900 transition-all duration-300 flex flex-col",
+        "relative border-2 rounded-xl bg-white dark:bg-neutral-900 transition-all duration-300 flex flex-col",
         state === "loading" && "animate-pulse-border",
-        state === "idle" && "border-gray-300 dark:border-gray-700",
+        state === "idle" && "border-neutral-300 dark:border-neutral-700",
         state === "loading" && "border-blue-500",
         state === "plan-pending" && "border-blue-400",
         state === "success" && "border-green-500",
@@ -3456,7 +3456,7 @@ ${planToExecute}`;
                   }
                 },
                 placeholder,
-                className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500",
+                className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500",
                 rows: 6
               }
             ),
@@ -3466,11 +3466,11 @@ ${planToExecute}`;
                 {
                   src: file.preview,
                   alt: file.name,
-                  className: "w-20 h-20 object-cover rounded-lg border-2 border-gray-300 dark:border-gray-600"
+                  className: "w-20 h-20 object-cover rounded-lg border-2 border-neutral-300 dark:border-neutral-600"
                 }
-              ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", children: [
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-8 h-8 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
-                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[8px] text-gray-500 dark:text-gray-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
+              ) : /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-20 h-20 flex flex-col items-center justify-center rounded-lg border-2 border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", children: [
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-8 h-8 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }),
+                /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { className: "text-[8px] text-neutral-500 dark:text-neutral-400 mt-1 px-1 truncate max-w-full", children: file.name.length > 12 ? file.name.slice(0, 12) + "..." : file.name })
               ] }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
@@ -3489,7 +3489,7 @@ ${planToExecute}`;
                 "button",
                 {
                   onClick: () => _optionalChain([fileInputRef, 'access', _103 => _103.current, 'optionalAccess', _104 => _104.click, 'call', _105 => _105()]),
-                  className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800",
+                  className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                   title: "Attach file",
                   children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
                 }
@@ -3500,8 +3500,8 @@ ${planToExecute}`;
                   {
                     onClick: () => setShowSettingsMenu(!showSettingsMenu),
                     className: cn(
-                      "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-gray-100 dark:hover:bg-gray-800",
-                      internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-gray-500 dark:!text-gray-500"
+                      "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-neutral-100 dark:hover:bg-neutral-800",
+                      internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
                     ),
                     title: "Settings",
                     children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -3517,12 +3517,12 @@ ${planToExecute}`;
                     ] })
                   }
                 ),
-                showSettingsMenu && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "flex items-center justify-between cursor-pointer group", children: [
+                showSettingsMenu && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute top-10 left-0 z-50 w-56 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-2.5 settings-menu-container", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "flex items-center justify-between cursor-pointer group", children: [
                   /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3.5 h-3.5 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-3.5 h-3.5 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
                     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
-                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-[10px] text-gray-500 dark:text-gray-400", children: "Review first" })
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
+                      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-[10px] text-neutral-500 dark:text-neutral-400", children: "Review first" })
                     ] })
                   ] }),
                   /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3534,7 +3534,7 @@ ${planToExecute}`;
                       },
                       className: cn(
                         "relative inline-flex h-4 w-8 items-center rounded-full transition-colors",
-                        internalPlanMode ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
+                        internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
                       ),
                       type: "button",
                       children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3557,9 +3557,9 @@ ${planToExecute}`;
                 {
                   src: file.preview,
                   alt: file.name,
-                  className: "w-8 h-8 object-cover rounded border border-gray-300 dark:border-gray-600"
+                  className: "w-8 h-8 object-cover rounded border border-neutral-300 dark:border-neutral-600"
                 }
-              ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-8 h-8 flex items-center justify-center rounded border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800", title: file.name, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
+              ) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-8 h-8 flex items-center justify-center rounded border border-neutral-300 dark:border-neutral-600 bg-neutral-50 dark:bg-neutral-800", title: file.name, children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "currentColor", viewBox: "0 0 20 20", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { fillRule: "evenodd", d: "M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z", clipRule: "evenodd" }) }) }),
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "button",
                 {
@@ -3583,7 +3583,7 @@ ${planToExecute}`;
                   }
                 },
                 placeholder,
-                className: "flex-1 bg-transparent border-none focus:outline-none !text-gray-900 dark:!text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 py-1"
+                className: "flex-1 bg-transparent border-none focus:outline-none !text-neutral-900 dark:!text-neutral-100 placeholder-neutral-400 dark:placeholder-neutral-500 py-1"
               }
             ),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3593,13 +3593,13 @@ ${planToExecute}`;
                 disabled: !command.trim(),
                 className: cn(
                   "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0",
-                  "border border-gray-300 dark:border-gray-600",
-                  "bg-white dark:bg-gray-800",
-                  "!text-gray-700 dark:!text-gray-300",
-                  "hover:bg-gray-50 dark:hover:bg-gray-700",
+                  "border border-neutral-300 dark:border-neutral-600",
+                  "bg-white dark:bg-neutral-800",
+                  "!text-neutral-700 dark:!text-neutral-300",
+                  "hover:bg-neutral-50 dark:hover:bg-neutral-700",
                   "disabled:opacity-30 disabled:cursor-not-allowed",
                   "!text-lg",
-                  !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
+                  !command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
                 ),
                 title: "Execute",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
@@ -3607,17 +3607,17 @@ ${planToExecute}`;
             )
           ] }),
           state === "loading" && !isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 flex flex-col items-center justify-center space-y-4 py-8", children: [
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
-            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-600 dark:text-gray-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-6 h-6 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
+            /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-600 dark:text-neutral-400 text-sm text-center max-w-md", children: enableStreaming && streamedContent ? streamedContent : loadingText }),
             showProgress && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "w-full max-w-sm", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full bg-gray-200 dark:bg-gray-700 rounded-full h-1.5", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-full bg-neutral-200 dark:bg-neutral-700 rounded-full h-1.5", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
                 "div",
                 {
                   className: "bg-blue-500 h-1.5 rounded-full transition-all duration-300",
                   style: { width: `${progress}%` }
                 }
               ) }),
-              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-gray-500 mt-2 text-center", children: [
+              /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-neutral-500 mt-2 text-center", children: [
                 progress,
                 "%"
               ] })
@@ -3625,8 +3625,8 @@ ${planToExecute}`;
           ] }),
           state === "loading" && isCompact && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 flex items-center gap-3 py-1", children: [
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-gray-300 border-t-blue-500 rounded-full animate-spin" }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-600 dark:text-gray-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-neutral-300 border-t-blue-500 rounded-full animate-spin" }),
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-600 dark:text-neutral-400 text-sm truncate", children: enableStreaming && streamedContent ? streamedContent : loadingText })
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
@@ -3634,9 +3634,9 @@ ${planToExecute}`;
                 disabled: true,
                 className: cn(
                   "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0",
-                  "border border-gray-200 dark:border-gray-700",
-                  "bg-white dark:bg-gray-800",
-                  "!text-gray-400 dark:!text-gray-600",
+                  "border border-neutral-200 dark:border-neutral-700",
+                  "bg-white dark:bg-neutral-800",
+                  "!text-neutral-400 dark:!text-neutral-600",
                   "!text-lg",
                   "opacity-30 cursor-not-allowed"
                 ),
@@ -3665,7 +3665,7 @@ ${planToExecute}`;
                 "button",
                 {
                   onClick: rejectPlan,
-                  className: "flex-1 px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-sm font-medium",
+                  className: "flex-1 px-4 py-2 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-sm font-medium",
                   children: "Modify"
                 }
               )
@@ -3696,7 +3696,7 @@ ${planToExecute}`;
                 "button",
                 {
                   onClick: rejectPlan,
-                  className: "px-3 py-1.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors text-xs font-medium",
+                  className: "px-3 py-1.5 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors text-xs font-medium",
                   children: "Modify"
                 }
               )
@@ -3722,7 +3722,7 @@ ${planToExecute}`;
                   }
                 },
                 placeholder,
-                className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-gray-900 dark:text-white placeholder-gray-400",
+                className: "flex-1 w-full resize-none bg-transparent border-none focus:outline-none text-neutral-900 dark:text-white placeholder-neutral-400",
                 rows: 4
               }
             )
@@ -3735,7 +3735,7 @@ ${planToExecute}`;
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-green-700 dark:text-green-300 text-sm", children: "Command executed successfully" })
               ] })
             ] }),
-            _optionalChain([result, 'access', _107 => _107.data, 'optionalAccess', _108 => _108.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
+            _optionalChain([result, 'access', _107 => _107.data, 'optionalAccess', _108 => _108.summary]) && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 text-sm leading-relaxed whitespace-pre-line", children: result.data.summary }),
             result.widgets && result.widgets.length > 0 && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "space-y-3", children: result.widgets.map((widget) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               WidgetRenderer,
               {
@@ -3769,10 +3769,10 @@ ${planToExecute}`;
                 },
                 className: cn(
                   "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all flex-shrink-0",
-                  "border border-gray-300 dark:border-gray-600",
-                  "bg-white dark:bg-gray-800",
-                  "!text-gray-700 dark:!text-gray-300",
-                  "hover:bg-gray-50 dark:hover:bg-gray-700",
+                  "border border-neutral-300 dark:border-neutral-600",
+                  "bg-white dark:bg-neutral-800",
+                  "!text-neutral-700 dark:!text-neutral-300",
+                  "hover:bg-neutral-50 dark:hover:bg-neutral-700",
                   "!text-lg"
                 ),
                 title: "New command",
@@ -3787,7 +3787,7 @@ ${planToExecute}`;
               "button",
               {
                 onClick: () => _optionalChain([fileInputRef, 'access', _109 => _109.current, 'optionalAccess', _110 => _110.click, 'call', _111 => _111()]),
-                className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-gray-500 dark:!text-gray-500 hover:bg-gray-100 dark:hover:bg-gray-800",
+                className: "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 !text-neutral-500 dark:!text-neutral-500 hover:bg-neutral-100 dark:hover:bg-neutral-800",
                 title: "Attach file",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8.4 2.8L4.4 6.8C3.736 7.464 3.736 8.536 4.4 9.2C5.064 9.864 6.136 9.864 6.8 9.2L11.6 4.4C12.704 3.296 12.704 1.504 11.6 0.4C10.496 -0.704 8.704 -0.704 7.6 0.4L2.8 5.2C1.256 6.744 1.256 9.256 2.8 10.8C4.344 12.344 6.856 12.344 8.4 10.8L12.4 6.8", stroke: "currentColor", strokeWidth: "1.2", strokeLinecap: "round", strokeLinejoin: "round", transform: "translate(1.6, 2.4)" }) })
               }
@@ -3798,8 +3798,8 @@ ${planToExecute}`;
                 {
                   onClick: () => setShowSettingsMenu(!showSettingsMenu),
                   className: cn(
-                    "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-gray-100 dark:hover:bg-gray-800",
-                    internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-gray-500 dark:!text-gray-500"
+                    "w-8 h-8 rounded-lg flex items-center justify-center transition-all flex-shrink-0 hover:bg-neutral-100 dark:hover:bg-neutral-800",
+                    internalPlanMode ? "!text-blue-600 dark:!text-blue-400" : "!text-neutral-500 dark:!text-neutral-500"
                   ),
                   title: "Settings",
                   children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
@@ -3815,12 +3815,12 @@ ${planToExecute}`;
                   ] })
                 }
               ),
-              showSettingsMenu && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "flex items-center justify-between cursor-pointer group", children: [
+              showSettingsMenu && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "absolute top-10 left-0 z-50 w-64 bg-white dark:bg-neutral-800 border border-neutral-200 dark:border-neutral-700 rounded-lg shadow-lg p-3 settings-menu-container", children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "label", { className: "flex items-center justify-between cursor-pointer group", children: [
                 /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 text-gray-500 dark:text-gray-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
+                  /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-4 h-4 text-neutral-500 dark:text-neutral-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
                   /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-sm font-medium text-gray-700 dark:text-gray-300", children: "Plan Mode" }),
-                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs text-gray-500 dark:text-gray-400", children: "Review before executing" })
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-sm font-medium text-neutral-700 dark:text-neutral-300", children: "Plan Mode" }),
+                    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-xs text-neutral-500 dark:text-neutral-400", children: "Review before executing" })
                   ] })
                 ] }),
                 /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3832,7 +3832,7 @@ ${planToExecute}`;
                     },
                     className: cn(
                       "relative inline-flex h-5 w-9 items-center rounded-full transition-colors",
-                      internalPlanMode ? "bg-blue-600" : "bg-gray-300 dark:bg-gray-600"
+                      internalPlanMode ? "bg-blue-600" : "bg-neutral-300 dark:bg-neutral-600"
                     ),
                     type: "button",
                     children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -3855,7 +3855,7 @@ ${planToExecute}`;
               "button",
               {
                 onClick: resetCommand,
-                className: "px-3 py-1.5 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white transition-colors",
+                className: "px-3 py-1.5 text-sm text-neutral-600 dark:text-neutral-400 hover:text-neutral-900 dark:hover:text-white transition-colors",
                 children: "Reset"
               }
             ),
@@ -3866,13 +3866,13 @@ ${planToExecute}`;
                 disabled: !command.trim(),
                 className: cn(
                   "w-8 h-8 rounded-lg flex items-center justify-center font-bold transition-all",
-                  "border border-gray-300 dark:border-gray-600",
-                  "bg-white dark:bg-gray-800",
-                  "!text-gray-700 dark:!text-gray-300",
-                  "hover:bg-gray-50 dark:hover:bg-gray-700",
+                  "border border-neutral-300 dark:border-neutral-600",
+                  "bg-white dark:bg-neutral-800",
+                  "!text-neutral-700 dark:!text-neutral-300",
+                  "hover:bg-neutral-50 dark:hover:bg-neutral-700",
                   "disabled:opacity-30 disabled:cursor-not-allowed",
                   "!text-lg",
-                  !command.trim() && "border-gray-200 dark:border-gray-700 !text-gray-400 dark:!text-gray-600"
+                  !command.trim() && "border-neutral-200 dark:border-neutral-700 !text-neutral-400 dark:!text-neutral-600"
                 ),
                 title: state === "error" ? "Retry" : "Execute",
                 children: state === "error" ? /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M13 8C13 10.7614 10.7614 13 8 13C5.23858 13 3 10.7614 3 8C3 5.23858 5.23858 3 8 3C9.65685 3 11.1257 3.82818 12 5.09091M12 3V5.09091M12 5.09091H9.81818", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { d: "M8 3L8 13M8 3L4 7M8 3L12 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })
@@ -3880,28 +3880,28 @@ ${planToExecute}`;
             )
           ] })
         ] }),
-        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "bg-white dark:bg-gray-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between p-6 border-b border-gray-200 dark:border-gray-700", children: [
+        showPlanDetails && isCompact && state === "plan-pending" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4", onClick: () => setShowPlanDetails(false), children: /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "bg-white dark:bg-neutral-900 rounded-2xl shadow-2xl max-w-2xl w-full max-h-[80vh] overflow-hidden", onClick: (e) => e.stopPropagation(), children: [
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-between p-6 border-b border-neutral-200 dark:border-neutral-700", children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-6 h-6 text-blue-600 dark:text-blue-400", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-3 7h3m-3 4h3m-6-4h.01M9 16h.01" }) }),
-              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-xl font-semibold text-gray-900 dark:text-white", children: "Proposed Execution Plan" })
+              /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h2", { className: "text-xl font-semibold text-neutral-900 dark:text-white", children: "Proposed Execution Plan" })
             ] }),
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 onClick: () => setShowPlanDetails(false),
-                className: "text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors",
+                className: "text-neutral-400 hover:text-neutral-600 dark:hover:text-neutral-300 transition-colors",
                 children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
               }
             )
           ] }),
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-gray-700 dark:text-gray-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-end gap-3 p-6 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-6 overflow-y-auto max-h-[calc(80vh-180px)]", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "prose prose-sm dark:prose-invert max-w-none", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "text-neutral-700 dark:text-neutral-300 whitespace-pre-line leading-relaxed", children: plan }) }) }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center justify-end gap-3 p-6 border-t border-neutral-200 dark:border-neutral-700 bg-neutral-50 dark:bg-neutral-800/50", children: [
             /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
               "button",
               {
                 onClick: rejectPlan,
-                className: "px-6 py-2.5 bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300 rounded-lg hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors font-medium",
+                className: "px-6 py-2.5 bg-neutral-200 dark:bg-neutral-700 text-neutral-700 dark:text-neutral-300 rounded-lg hover:bg-neutral-300 dark:hover:bg-neutral-600 transition-colors font-medium",
                 children: "Modify Command"
               }
             ),
@@ -4022,7 +4022,7 @@ function Prompt({
           onBlur: handleBlur,
           placeholder,
           disabled: isLoading,
-          className: "flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white"
+          className: "flex-1 px-4 py-2 border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
         }
       ),
       submitOn === "button" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4035,7 +4035,7 @@ function Prompt({
         }
       )
     ] }),
-    maxLength && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-gray-500", children: [
+    maxLength && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "p", { className: "text-xs text-neutral-500", children: [
       value.length,
       " / ",
       maxLength,
@@ -4045,12 +4045,12 @@ function Prompt({
       "button",
       {
         onClick: () => setValue(suggestion),
-        className: "px-3 py-1 text-sm bg-gray-100 hover:bg-gray-200 text-gray-700 rounded-full transition-colors",
+        className: "px-3 py-1 text-sm bg-neutral-100 hover:bg-neutral-200 text-neutral-700 rounded-full transition-colors",
         children: suggestion
       },
       idx
     )) }),
-    isLoading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 text-sm text-gray-500", children: [
+    isLoading && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 text-sm text-neutral-500", children: [
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "w-4 h-4 border-2 border-apteva-500 border-t-transparent rounded-full animate-spin" }),
       /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "span", { children: "AI is processing your request..." })
     ] })
@@ -4135,8 +4135,8 @@ function Stream({
   };
   const variantClasses = {
     prose: "prose prose-sm max-w-none dark:prose-invert",
-    code: "font-mono text-sm bg-gray-900 text-green-400 p-4 rounded-lg",
-    plain: "text-gray-900 dark:text-gray-100"
+    code: "font-mono text-sm bg-neutral-900 text-green-400 p-4 rounded-lg",
+    plain: "text-neutral-900 dark:text-neutral-100"
   };
   if (!isStreaming && !isComplete) {
     return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: cn("p-4", className), children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
@@ -4169,9 +4169,9 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
       onClick: onSelect,
       children: [
         /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold text-gray-900 dark:text-white truncate", children: thread.title }),
-          thread.preview && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-gray-600 dark:text-gray-400 truncate", children: thread.preview }),
-          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 mt-1 text-xs text-gray-500", children: [
+          /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "h4", { className: "font-semibold text-neutral-900 dark:text-white truncate", children: thread.title }),
+          thread.preview && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { className: "text-sm text-neutral-600 dark:text-neutral-400 truncate", children: thread.preview }),
+          /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex items-center gap-2 mt-1 text-xs text-neutral-500", children: [
             /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "span", { children: [
               thread.messageCount,
               " messages"
@@ -4187,7 +4187,7 @@ function ThreadItem({ thread, isActive = false, onSelect, onDelete }) {
               e.stopPropagation();
               onDelete();
             },
-            className: "p-2 text-gray-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors",
+            className: "p-2 text-neutral-400 hover:text-red-500 hover:bg-red-50 rounded transition-colors",
             title: "Delete thread",
             children: "\u{1F5D1}\uFE0F"
           }
@@ -4225,19 +4225,19 @@ function ThreadList({
   );
   const groupedThreads = groupBy === "date" ? groupThreadsByDate(filteredThreads) : { All: filteredThreads };
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex flex-col h-full", children: [
-    showSearch && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    showSearch && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "input",
       {
         type: "text",
         placeholder: "Search conversations...",
         value: searchQuery,
         onChange: (e) => setSearchQuery(e.target.value),
-        className: "w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-gray-800 dark:border-gray-600 dark:text-white"
+        className: "w-full px-3 py-2 text-sm border border-neutral-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-apteva-500 dark:bg-neutral-800 dark:border-neutral-600 dark:text-white"
       }
     ) }),
     /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "flex-1 overflow-y-auto", children: [
       Object.entries(groupedThreads).map(([group, groupThreads]) => /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { children: [
-        groupBy !== "none" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-2 text-xs font-semibold text-gray-500 uppercase", children: group }),
+        groupBy !== "none" && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "px-3 py-2 text-xs font-semibold text-neutral-500 uppercase", children: group }),
         groupThreads.map((thread) => /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
           ThreadItem,
           {
@@ -4249,7 +4249,7 @@ function ThreadList({
           thread.id
         ))
       ] }, group)),
-      filteredThreads.length === 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-8 text-center text-gray-500", children: [
+      filteredThreads.length === 0 && /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: "p-8 text-center text-neutral-500", children: [
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "svg", { className: "w-10 h-10 mx-auto mb-2 opacity-50", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" }) }),
         /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "p", { children: "No conversations found" })
       ] })
@@ -4297,9 +4297,9 @@ function Threads({
   className
 }) {
   const variantClasses = {
-    sidebar: "h-full border-r border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-900",
-    dropdown: "absolute top-full left-0 right-0 mt-2 bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700 max-h-96 overflow-hidden",
-    tabs: "flex gap-2 border-b border-gray-200 dark:border-gray-700 overflow-x-auto"
+    sidebar: "h-full border-r border-neutral-200 dark:border-neutral-700 bg-white dark:bg-neutral-900",
+    dropdown: "absolute top-full left-0 right-0 mt-2 bg-white dark:bg-neutral-800 rounded-lg shadow-lg border border-neutral-200 dark:border-neutral-700 max-h-96 overflow-hidden",
+    tabs: "flex gap-2 border-b border-neutral-200 dark:border-neutral-700 overflow-x-auto"
   };
   if (variant === "tabs") {
     return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn(variantClasses[variant], className), children: [
@@ -4309,7 +4309,7 @@ function Threads({
           onClick: () => _optionalChain([onThreadSelect, 'optionalCall', _130 => _130(thread.id)]),
           className: cn(
             "px-4 py-2 whitespace-nowrap font-medium transition-colors",
-            thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-gray-600 hover:text-gray-900"
+            thread.id === currentThreadId ? "border-b-2 border-apteva-500 text-apteva-500" : "text-neutral-600 hover:text-neutral-900"
           ),
           children: thread.title
         },
@@ -4319,14 +4319,14 @@ function Threads({
         "button",
         {
           onClick: onNewThread,
-          className: "px-4 py-2 text-gray-600 hover:text-apteva-500 transition-colors font-medium",
+          className: "px-4 py-2 text-neutral-600 hover:text-apteva-500 transition-colors font-medium",
           children: "+ New"
         }
       )
     ] });
   }
   return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, "div", { className: cn(variantClasses[variant], "flex flex-col", className), children: [
-    showNewButton && onNewThread && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-3 border-b border-gray-200 dark:border-gray-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    showNewButton && onNewThread && /* @__PURE__ */ _jsxruntime.jsx.call(void 0, "div", { className: "p-3 border-b border-neutral-200 dark:border-neutral-700", children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
       "button",
       {
         onClick: onNewThread,