pxengine 0.1.14 → 0.1.16

package/dist/index.cjs

@@ -33933,7 +33933,7 @@ var ActionButton = import_react54.default.memo(
           onClick: onProceed,
           className: cn(
             "relative min-w-[140px] overflow-hidden group transition-all duration-300",
-            "bg-[var(--primary-color)] hover:opacity-90 text-[var(--primary-foreground,white)] font-bold rounded-full px-5 py-2.5 shadow-[0_4px_14px_0_hsl(var(--primary)/30%)] hover:shadow-[0_6px_20px_0_hsl(var(--primary)/40%)]",
+            "bg-[var(--primary-color)] hover:opacity-90 text-white font-bold rounded-full px-5 py-2.5 shadow-[0_4px_14px_0_hsl(var(--primary)/30%)] hover:shadow-[0_6px_20px_0_hsl(var(--primary)/40%)]",
             variant === "outline" && "bg-transparent border-[var(--primary-color)] text-[var(--primary-color)] hover:bg-[var(--primary-color)]/5",
             isLoading && "opacity-80"
           ),
@@ -33962,12 +33962,12 @@ var ActionButton = import_react54.default.memo(
           variant: "ghost",
           size: "icon",
           onClick: onPause,
-          className: "h-10 w-10 rounded-full hover:bg-gray200 text-gray600",
+          className: "h-10 w-10 rounded-full hover:bg-[var(--foreground)]/5 text-[var(--foreground)]/60",
           title: isPaused ? "Resume auto-proceed" : "Pause auto-proceed",
           children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Play, { className: "h-4 w-4 fill-current" }) : /* @__PURE__ */ (0, import_jsx_runtime92.jsx)(Pause, { className: "h-4 w-4 fill-current" })
         }
       ),
-      secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "text-sm text-gray-500 font-medium italic", children: secondaryLabel })
+      secondaryLabel && /* @__PURE__ */ (0, import_jsx_runtime92.jsx)("span", { className: "text-sm text-[var(--foreground)]/50 font-medium italic", children: secondaryLabel })
     ] });
   }
 );
@@ -34017,14 +34017,14 @@ var FormCard = import_react55.default.memo(
               "button",
               {
                 onClick: handleCopyAll,
-                className: "p-1.5 rounded-xl hover:bg-gray-100/50 text-gray-400 hover:text-gray-600 transition-all active:scale-95",
+                className: "p-1.5 rounded-xl hover:bg-[var(--foreground)]/5 text-[var(--foreground)]/40 hover:text-[var(--foreground)]/60 transition-all active:scale-95",
                 title: "Copy all details",
                 children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(Copy, { className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(CardContent, { className: "px-6 pt-1 pb-4", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)("div", { className: "relative", children: [
-            showTimeline && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "absolute left-[7px] top-2 bottom-6 w-0.5 border-l-2 border-dotted border-gray-200 pointer-events-none" }),
+            showTimeline && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "absolute left-[7px] top-2 bottom-6 w-0.5 border-l-2 border-dotted border-[var(--border-color)] pointer-events-none" }),
             /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "space-y-2.5", children: fields.map((field) => /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(
               "div",
               {
@@ -34037,8 +34037,8 @@ var FormCard = import_react55.default.memo(
                     "div",
                     {
                       className: cn(
-                        "absolute left-0 top-[18px] w-[14px] h-[14px] -translate-x-1/2 rounded-full border-2 bg-white z-10 transition-all duration-300",
-                        changedFields[field.key] ? "border-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]" : "border-gray-200 shadow-sm"
+                        "absolute left-0 top-[18px] w-[14px] h-[14px] -translate-x-1/2 rounded-full border-2 bg-[var(--background)] z-10 transition-all duration-300",
+                        changedFields[field.key] ? "border-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]" : "border-[var(--border-color)] shadow-sm"
                       )
                     }
                   ),
@@ -34062,7 +34062,7 @@ var FormCard = import_react55.default.memo(
               field.key
             )) })
           ] }) }),
-          (onProceed || footer) && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(CardFooter, { className: "flex flex-col gap-3 border-t border-[var(--border-color)] bg-black/5 p-6", children: [
+          (onProceed || footer) && /* @__PURE__ */ (0, import_jsx_runtime93.jsxs)(CardFooter, { className: "flex flex-col gap-3 border-t border-[var(--border-color)] bg-[var(--foreground)]/[0.03] p-6", children: [
             onProceed && proceedLabel && /* @__PURE__ */ (0, import_jsx_runtime93.jsx)("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(
               ActionButton,
               {
@@ -35129,7 +35129,7 @@ var MCQCard = import_react61.default.memo(
     recommended,
     selectedOption,
     onSelect,
-    onProceed,
+    onAction,
     isLatestMessage = true,
     countdown,
     isPaused = false,
@@ -35138,27 +35138,33 @@ var MCQCard = import_react61.default.memo(
     className,
     selectionStatus
   }) => {
+    const [localSelected, setLocalSelected] = (0, import_react61.useState)(null);
+    const effectiveSelected = selectedOption ?? localSelected;
     const handleOptionClick = (key) => {
-      if (isLatestMessage && !isLoading) {
+      if (!isLoading) {
+        setLocalSelected(key);
         onSelect?.(key);
       }
     };
     const handleProceed = () => {
-      if (selectedOption || recommended) {
-        onProceed?.(selectedOption || recommended || "");
+      const value = effectiveSelected || recommended || "";
+      if (value) {
+        if (onAction) {
+          onAction(value);
+        }
       }
     };
     return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
       Card,
       {
         className: cn(
-          "w-full rounded-[24px] border border-gray200 bg-white shadow-sm overflow-hidden",
+          "w-full rounded-[24px] border border-[var(--border-color)] bg-[var(--card-background)] shadow-sm overflow-hidden",
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CardHeader, { className: "pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CardTitle, { className: "text-lg font-bold text-gray-900 tracking-tight leading-snug", children: question }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CardHeader, { className: "pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CardTitle, { className: "text-lg font-bold text-[var(--foreground)] tracking-tight leading-snug", children: question }) }),
           /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CardContent, { className: "space-y-3 pb-6", children: Object.entries(options).map(([key, label]) => {
-            const isSelected = selectedOption === key;
+            const isSelected = effectiveSelected === key;
             const isRecommended = key === recommended;
             return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
               "div",
@@ -35166,7 +35172,7 @@ var MCQCard = import_react61.default.memo(
                 onClick: () => handleOptionClick(key),
                 className: cn(
                   "group relative flex items-start gap-4 p-4 rounded-2xl border transition-all duration-200 cursor-pointer",
-                  isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]/5" : "border-gray-100 bg-gray-50/30 hover:border-gray-300 hover:bg-gray-50",
+                  isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]/5 shadow-[0_0_0_1px_var(--primary-color)]" : "border-[var(--border-color)] bg-[var(--background)]/30 hover:border-gray-300 hover:bg-[var(--background)]/50",
                   isLoading && "opacity-50 cursor-not-allowed"
                 ),
                 children: [
@@ -35175,7 +35181,7 @@ var MCQCard = import_react61.default.memo(
                     {
                       className: cn(
                         "mt-1 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
-                        isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]" : "border-gray-300 bg-white group-hover:border-gray-400"
+                        isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]" : "border-[var(--border-color)] bg-[var(--background)] group-hover:border-gray-400"
                       ),
                       children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-white" })
                     }
@@ -35186,7 +35192,7 @@ var MCQCard = import_react61.default.memo(
                       {
                         className: cn(
                           "text-sm font-semibold transition-colors",
-                          isSelected ? "text-[var(--foreground)]" : "text-gray700"
+                          isSelected ? "text-[var(--foreground)]" : "text-[var(--foreground)]/80"
                         ),
                         children: label
                       }
@@ -35195,18 +35201,18 @@ var MCQCard = import_react61.default.memo(
                       Badge2,
                       {
                         variant: "outline",
-                        className: "bg-green-50 text-green-700 border-green-100 flex items-center gap-1 text-[10px] py-0 h-5",
+                        className: "bg-green-500/10 text-green-500 border-green-500/20 flex items-center gap-1 text-[10px] py-0 h-5",
                         children: [
                           /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Sparkles, { className: "h-3 w-3" }),
                           "Recommended"
                         ]
                       }
                     ),
-                    isSelected && !isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+                    isSelected && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
                       Badge2,
                       {
                         variant: "outline",
-                        className: "bg-purple-50 text-purple-700 border-purple-100 text-[10px] py-0 h-5",
+                        className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] border-[var(--primary-color)]/20 text-[10px] py-0 h-5",
                         children: "Selected"
                       }
                     )
@@ -35216,18 +35222,18 @@ var MCQCard = import_react61.default.memo(
               key
             );
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CardFooter, { className: "flex flex-col gap-4 pt-0 border-t border-gray-100/50 bg-gray-50/30 p-6", children: isLatestMessage ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CardFooter, { className: "flex flex-col gap-4 pt-0 border-t border-[var(--border-color)] bg-black/5 p-6", children: isLatestMessage ? /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
             ActionButton,
             {
-              label: selectedOption ? "Continue" : "Proceed with Recommendation",
+              label: effectiveSelected ? "Continue" : "Proceed with Recommendation",
               countdown,
               isPaused,
               onPause,
               onProceed: handleProceed,
               isLoading,
-              disabled: !selectedOption && !recommended
+              disabled: !effectiveSelected && !recommended
             }
-          ) }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "w-full flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold", children: [
+          ) }) : /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "w-full flex justify-end items-center gap-1.5 text-green-500 text-xs font-semibold", children: [
             /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(CircleCheck, { className: "h-4 w-4" }),
             /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { children: selectionStatus === "agent" ? "Suggested by Agent, Approved by You" : "Selected by You" })
           ] }) })
@@ -35415,7 +35421,7 @@ var CreatorGridCard = ({
     Card,
     {
       className: cn(
-        "group overflow-hidden rounded-[32px] border-none bg-white shadow-sm hover:shadow-xl transition-all duration-300",
+        "group overflow-hidden rounded-[32px] border border-[var(--border-color)] bg-[var(--card-background)] shadow-sm hover:shadow-xl transition-all duration-300",
         className
       ),
       children: [
@@ -35431,13 +35437,13 @@ var CreatorGridCard = ({
           /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/20 to-transparent" })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(CardContent, { className: "relative pt-0 px-5 pb-6", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "absolute -top-10 left-5", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(Avatar, { className: "h-20 w-20 border-4 border-white shadow-lg ring-2 ring-purple-100", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "absolute -top-10 left-5", children: /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)(Avatar, { className: "h-20 w-20 border-4 border-[var(--card-background)] shadow-lg ring-2 ring-purple-100/20", children: [
             /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AvatarImage, { src: avatarSrc, alt: name }),
-            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AvatarFallback, { className: "bg-purple-50 text-purple-700 font-bold text-xl", children: name.charAt(0) })
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(AvatarFallback, { className: "bg-purple-500/10 text-purple-500 font-bold text-xl", children: name.charAt(0) })
           ] }) }),
           /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "mt-12 flex flex-col gap-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("h3", { className: "text-xl font-bold text-gray-900 truncate", children: name }),
-            /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("p", { className: "text-sm text-muted-foreground font-medium", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("h3", { className: "text-xl font-bold text-[var(--foreground)] truncate", children: name }),
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("p", { className: "text-sm text-[var(--foreground)]/60 font-medium", children: [
               "@",
               handle
             ] })
@@ -35447,15 +35453,15 @@ var CreatorGridCard = ({
             return Icon3 ? /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(
               "div",
               {
-                className: "p-1.5 rounded-lg bg-gray-50 text-gray-600 hover:text-purple-600 hover:bg-purple-50 transition-colors",
+                className: "p-1.5 rounded-lg bg-[var(--foreground)]/5 text-[var(--foreground)]/60 hover:text-purple-500 hover:bg-purple-500/10 transition-colors",
                 children: /* @__PURE__ */ (0, import_jsx_runtime110.jsx)(Icon3, { className: "h-4 w-4" })
               },
               p
             ) : null;
           }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "mt-6 grid grid-cols-2 gap-4 border-t border-gray-50 pt-4", children: metrics.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: m.label }),
-            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "text-sm font-bold text-purple-700", children: m.value })
+          /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("div", { className: "mt-6 grid grid-cols-2 gap-4 border-t border-[var(--border-color)] pt-4", children: metrics.map((m, i) => /* @__PURE__ */ (0, import_jsx_runtime110.jsxs)("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "text-[10px] font-bold uppercase tracking-wider text-[var(--foreground)]/40", children: m.label }),
+            /* @__PURE__ */ (0, import_jsx_runtime110.jsx)("span", { className: "text-sm font-bold text-[var(--primary-color)]", children: m.value })
           ] }, i)) })
         ] })
       ]

package/dist/index.d.cts

@@ -1791,11 +1791,11 @@ interface MCQCardProps {
      */
     onSelect?: (key: string) => void;
     /**
-     * Triggered when the user clicks continue
+     * Triggered when the user clicks continue (PXEngine compatible)
      */
-    onProceed?: (key: string) => void;
+    onAction?: (action: string) => void;
     /**
-     * Whether the message is the latest
+     * Triggered when the message is the latest
      */
     isLatestMessage?: boolean;
     /**

package/dist/index.d.ts

@@ -1791,11 +1791,11 @@ interface MCQCardProps {
      */
     onSelect?: (key: string) => void;
     /**
-     * Triggered when the user clicks continue
+     * Triggered when the user clicks continue (PXEngine compatible)
      */
-    onProceed?: (key: string) => void;
+    onAction?: (action: string) => void;
     /**
-     * Whether the message is the latest
+     * Triggered when the message is the latest
      */
     isLatestMessage?: boolean;
     /**

package/dist/index.js

@@ -33670,7 +33670,7 @@ var ActionButton = React85.memo(
           onClick: onProceed,
           className: cn(
             "relative min-w-[140px] overflow-hidden group transition-all duration-300",
-            "bg-[var(--primary-color)] hover:opacity-90 text-[var(--primary-foreground,white)] font-bold rounded-full px-5 py-2.5 shadow-[0_4px_14px_0_hsl(var(--primary)/30%)] hover:shadow-[0_6px_20px_0_hsl(var(--primary)/40%)]",
+            "bg-[var(--primary-color)] hover:opacity-90 text-white font-bold rounded-full px-5 py-2.5 shadow-[0_4px_14px_0_hsl(var(--primary)/30%)] hover:shadow-[0_6px_20px_0_hsl(var(--primary)/40%)]",
             variant === "outline" && "bg-transparent border-[var(--primary-color)] text-[var(--primary-color)] hover:bg-[var(--primary-color)]/5",
             isLoading && "opacity-80"
           ),
@@ -33699,12 +33699,12 @@ var ActionButton = React85.memo(
           variant: "ghost",
           size: "icon",
           onClick: onPause,
-          className: "h-10 w-10 rounded-full hover:bg-gray200 text-gray600",
+          className: "h-10 w-10 rounded-full hover:bg-[var(--foreground)]/5 text-[var(--foreground)]/60",
           title: isPaused ? "Resume auto-proceed" : "Pause auto-proceed",
           children: isPaused ? /* @__PURE__ */ jsx92(Play, { className: "h-4 w-4 fill-current" }) : /* @__PURE__ */ jsx92(Pause, { className: "h-4 w-4 fill-current" })
         }
       ),
-      secondaryLabel && /* @__PURE__ */ jsx92("span", { className: "text-sm text-gray-500 font-medium italic", children: secondaryLabel })
+      secondaryLabel && /* @__PURE__ */ jsx92("span", { className: "text-sm text-[var(--foreground)]/50 font-medium italic", children: secondaryLabel })
     ] });
   }
 );
@@ -33754,14 +33754,14 @@ var FormCard = React86.memo(
               "button",
               {
                 onClick: handleCopyAll,
-                className: "p-1.5 rounded-xl hover:bg-gray-100/50 text-gray-400 hover:text-gray-600 transition-all active:scale-95",
+                className: "p-1.5 rounded-xl hover:bg-[var(--foreground)]/5 text-[var(--foreground)]/40 hover:text-[var(--foreground)]/60 transition-all active:scale-95",
                 title: "Copy all details",
                 children: /* @__PURE__ */ jsx93(Copy, { className: "h-4 w-4" })
               }
             )
           ] }),
           /* @__PURE__ */ jsx93(CardContent, { className: "px-6 pt-1 pb-4", children: /* @__PURE__ */ jsxs55("div", { className: "relative", children: [
-            showTimeline && /* @__PURE__ */ jsx93("div", { className: "absolute left-[7px] top-2 bottom-6 w-0.5 border-l-2 border-dotted border-gray-200 pointer-events-none" }),
+            showTimeline && /* @__PURE__ */ jsx93("div", { className: "absolute left-[7px] top-2 bottom-6 w-0.5 border-l-2 border-dotted border-[var(--border-color)] pointer-events-none" }),
             /* @__PURE__ */ jsx93("div", { className: "space-y-2.5", children: fields.map((field) => /* @__PURE__ */ jsxs55(
               "div",
               {
@@ -33774,8 +33774,8 @@ var FormCard = React86.memo(
                     "div",
                     {
                       className: cn(
-                        "absolute left-0 top-[18px] w-[14px] h-[14px] -translate-x-1/2 rounded-full border-2 bg-white z-10 transition-all duration-300",
-                        changedFields[field.key] ? "border-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]" : "border-gray-200 shadow-sm"
+                        "absolute left-0 top-[18px] w-[14px] h-[14px] -translate-x-1/2 rounded-full border-2 bg-[var(--background)] z-10 transition-all duration-300",
+                        changedFields[field.key] ? "border-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.4)]" : "border-[var(--border-color)] shadow-sm"
                       )
                     }
                   ),
@@ -33799,7 +33799,7 @@ var FormCard = React86.memo(
               field.key
             )) })
           ] }) }),
-          (onProceed || footer) && /* @__PURE__ */ jsxs55(CardFooter, { className: "flex flex-col gap-3 border-t border-[var(--border-color)] bg-black/5 p-6", children: [
+          (onProceed || footer) && /* @__PURE__ */ jsxs55(CardFooter, { className: "flex flex-col gap-3 border-t border-[var(--border-color)] bg-[var(--foreground)]/[0.03] p-6", children: [
             onProceed && proceedLabel && /* @__PURE__ */ jsx93("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsx93(
               ActionButton,
               {
@@ -34857,7 +34857,7 @@ var KeywordBundlesDisplay = ({ value }) => {
 };
 
 // src/molecules/creator-discovery/MCQCard/MCQCard.tsx
-import React91 from "react";
+import React91, { useState as useState7 } from "react";
 import { jsx as jsx106, jsxs as jsxs68 } from "react/jsx-runtime";
 var MCQCard = React91.memo(
   ({
@@ -34866,7 +34866,7 @@ var MCQCard = React91.memo(
     recommended,
     selectedOption,
     onSelect,
-    onProceed,
+    onAction,
     isLatestMessage = true,
     countdown,
     isPaused = false,
@@ -34875,27 +34875,33 @@ var MCQCard = React91.memo(
     className,
     selectionStatus
   }) => {
+    const [localSelected, setLocalSelected] = useState7(null);
+    const effectiveSelected = selectedOption ?? localSelected;
     const handleOptionClick = (key) => {
-      if (isLatestMessage && !isLoading) {
+      if (!isLoading) {
+        setLocalSelected(key);
         onSelect?.(key);
       }
     };
     const handleProceed = () => {
-      if (selectedOption || recommended) {
-        onProceed?.(selectedOption || recommended || "");
+      const value = effectiveSelected || recommended || "";
+      if (value) {
+        if (onAction) {
+          onAction(value);
+        }
       }
     };
     return /* @__PURE__ */ jsxs68(
       Card,
       {
         className: cn(
-          "w-full rounded-[24px] border border-gray200 bg-white shadow-sm overflow-hidden",
+          "w-full rounded-[24px] border border-[var(--border-color)] bg-[var(--card-background)] shadow-sm overflow-hidden",
           className
         ),
         children: [
-          /* @__PURE__ */ jsx106(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx106(CardTitle, { className: "text-lg font-bold text-gray-900 tracking-tight leading-snug", children: question }) }),
+          /* @__PURE__ */ jsx106(CardHeader, { className: "pb-2", children: /* @__PURE__ */ jsx106(CardTitle, { className: "text-lg font-bold text-[var(--foreground)] tracking-tight leading-snug", children: question }) }),
           /* @__PURE__ */ jsx106(CardContent, { className: "space-y-3 pb-6", children: Object.entries(options).map(([key, label]) => {
-            const isSelected = selectedOption === key;
+            const isSelected = effectiveSelected === key;
             const isRecommended = key === recommended;
             return /* @__PURE__ */ jsxs68(
               "div",
@@ -34903,7 +34909,7 @@ var MCQCard = React91.memo(
                 onClick: () => handleOptionClick(key),
                 className: cn(
                   "group relative flex items-start gap-4 p-4 rounded-2xl border transition-all duration-200 cursor-pointer",
-                  isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]/5" : "border-gray-100 bg-gray-50/30 hover:border-gray-300 hover:bg-gray-50",
+                  isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]/5 shadow-[0_0_0_1px_var(--primary-color)]" : "border-[var(--border-color)] bg-[var(--background)]/30 hover:border-gray-300 hover:bg-[var(--background)]/50",
                   isLoading && "opacity-50 cursor-not-allowed"
                 ),
                 children: [
@@ -34912,7 +34918,7 @@ var MCQCard = React91.memo(
                     {
                       className: cn(
                         "mt-1 w-5 h-5 rounded-full border-2 flex items-center justify-center transition-colors",
-                        isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]" : "border-gray-300 bg-white group-hover:border-gray-400"
+                        isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]" : "border-[var(--border-color)] bg-[var(--background)] group-hover:border-gray-400"
                       ),
                       children: isSelected && /* @__PURE__ */ jsx106("div", { className: "w-1.5 h-1.5 rounded-full bg-white" })
                     }
@@ -34923,7 +34929,7 @@ var MCQCard = React91.memo(
                       {
                         className: cn(
                           "text-sm font-semibold transition-colors",
-                          isSelected ? "text-[var(--foreground)]" : "text-gray700"
+                          isSelected ? "text-[var(--foreground)]" : "text-[var(--foreground)]/80"
                         ),
                         children: label
                       }
@@ -34932,18 +34938,18 @@ var MCQCard = React91.memo(
                       Badge2,
                       {
                         variant: "outline",
-                        className: "bg-green-50 text-green-700 border-green-100 flex items-center gap-1 text-[10px] py-0 h-5",
+                        className: "bg-green-500/10 text-green-500 border-green-500/20 flex items-center gap-1 text-[10px] py-0 h-5",
                         children: [
                           /* @__PURE__ */ jsx106(Sparkles, { className: "h-3 w-3" }),
                           "Recommended"
                         ]
                       }
                     ),
-                    isSelected && !isLatestMessage && /* @__PURE__ */ jsx106(
+                    isSelected && /* @__PURE__ */ jsx106(
                       Badge2,
                       {
                         variant: "outline",
-                        className: "bg-purple-50 text-purple-700 border-purple-100 text-[10px] py-0 h-5",
+                        className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] border-[var(--primary-color)]/20 text-[10px] py-0 h-5",
                         children: "Selected"
                       }
                     )
@@ -34953,18 +34959,18 @@ var MCQCard = React91.memo(
               key
             );
           }) }),
-          /* @__PURE__ */ jsx106(CardFooter, { className: "flex flex-col gap-4 pt-0 border-t border-gray-100/50 bg-gray-50/30 p-6", children: isLatestMessage ? /* @__PURE__ */ jsx106("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsx106(
+          /* @__PURE__ */ jsx106(CardFooter, { className: "flex flex-col gap-4 pt-0 border-t border-[var(--border-color)] bg-black/5 p-6", children: isLatestMessage ? /* @__PURE__ */ jsx106("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsx106(
             ActionButton,
             {
-              label: selectedOption ? "Continue" : "Proceed with Recommendation",
+              label: effectiveSelected ? "Continue" : "Proceed with Recommendation",
               countdown,
               isPaused,
               onPause,
               onProceed: handleProceed,
               isLoading,
-              disabled: !selectedOption && !recommended
+              disabled: !effectiveSelected && !recommended
             }
-          ) }) : /* @__PURE__ */ jsxs68("div", { className: "w-full flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold", children: [
+          ) }) : /* @__PURE__ */ jsxs68("div", { className: "w-full flex justify-end items-center gap-1.5 text-green-500 text-xs font-semibold", children: [
             /* @__PURE__ */ jsx106(CircleCheck, { className: "h-4 w-4" }),
             /* @__PURE__ */ jsx106("span", { children: selectionStatus === "agent" ? "Suggested by Agent, Approved by You" : "Selected by You" })
           ] }) })
@@ -35152,7 +35158,7 @@ var CreatorGridCard = ({
     Card,
     {
       className: cn(
-        "group overflow-hidden rounded-[32px] border-none bg-white shadow-sm hover:shadow-xl transition-all duration-300",
+        "group overflow-hidden rounded-[32px] border border-[var(--border-color)] bg-[var(--card-background)] shadow-sm hover:shadow-xl transition-all duration-300",
         className
       ),
       children: [
@@ -35168,13 +35174,13 @@ var CreatorGridCard = ({
           /* @__PURE__ */ jsx110("div", { className: "absolute inset-x-0 bottom-0 h-1/2 bg-gradient-to-t from-black/20 to-transparent" })
         ] }),
         /* @__PURE__ */ jsxs71(CardContent, { className: "relative pt-0 px-5 pb-6", children: [
-          /* @__PURE__ */ jsx110("div", { className: "absolute -top-10 left-5", children: /* @__PURE__ */ jsxs71(Avatar, { className: "h-20 w-20 border-4 border-white shadow-lg ring-2 ring-purple-100", children: [
+          /* @__PURE__ */ jsx110("div", { className: "absolute -top-10 left-5", children: /* @__PURE__ */ jsxs71(Avatar, { className: "h-20 w-20 border-4 border-[var(--card-background)] shadow-lg ring-2 ring-purple-100/20", children: [
             /* @__PURE__ */ jsx110(AvatarImage, { src: avatarSrc, alt: name }),
-            /* @__PURE__ */ jsx110(AvatarFallback, { className: "bg-purple-50 text-purple-700 font-bold text-xl", children: name.charAt(0) })
+            /* @__PURE__ */ jsx110(AvatarFallback, { className: "bg-purple-500/10 text-purple-500 font-bold text-xl", children: name.charAt(0) })
           ] }) }),
           /* @__PURE__ */ jsxs71("div", { className: "mt-12 flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx110("h3", { className: "text-xl font-bold text-gray-900 truncate", children: name }),
-            /* @__PURE__ */ jsxs71("p", { className: "text-sm text-muted-foreground font-medium", children: [
+            /* @__PURE__ */ jsx110("h3", { className: "text-xl font-bold text-[var(--foreground)] truncate", children: name }),
+            /* @__PURE__ */ jsxs71("p", { className: "text-sm text-[var(--foreground)]/60 font-medium", children: [
               "@",
               handle
             ] })
@@ -35184,15 +35190,15 @@ var CreatorGridCard = ({
             return Icon3 ? /* @__PURE__ */ jsx110(
               "div",
               {
-                className: "p-1.5 rounded-lg bg-gray-50 text-gray-600 hover:text-purple-600 hover:bg-purple-50 transition-colors",
+                className: "p-1.5 rounded-lg bg-[var(--foreground)]/5 text-[var(--foreground)]/60 hover:text-purple-500 hover:bg-purple-500/10 transition-colors",
                 children: /* @__PURE__ */ jsx110(Icon3, { className: "h-4 w-4" })
               },
               p
             ) : null;
           }) }),
-          /* @__PURE__ */ jsx110("div", { className: "mt-6 grid grid-cols-2 gap-4 border-t border-gray-50 pt-4", children: metrics.map((m, i) => /* @__PURE__ */ jsxs71("div", { className: "flex flex-col", children: [
-            /* @__PURE__ */ jsx110("span", { className: "text-[10px] font-bold uppercase tracking-wider text-muted-foreground", children: m.label }),
-            /* @__PURE__ */ jsx110("span", { className: "text-sm font-bold text-purple-700", children: m.value })
+          /* @__PURE__ */ jsx110("div", { className: "mt-6 grid grid-cols-2 gap-4 border-t border-[var(--border-color)] pt-4", children: metrics.map((m, i) => /* @__PURE__ */ jsxs71("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsx110("span", { className: "text-[10px] font-bold uppercase tracking-wider text-[var(--foreground)]/40", children: m.label }),
+            /* @__PURE__ */ jsx110("span", { className: "text-sm font-bold text-[var(--primary-color)]", children: m.value })
           ] }, i)) })
         ] })
       ]

package/dist/registry.json

@@ -1,7 +1,7 @@
 {
   "name": "@pxengine/ui",
   "version": "1.0.0",
-  "lastUpdated": "2026-02-13T07:25:36.479Z",
+  "lastUpdated": "2026-02-13T12:36:31.510Z",
   "components": {
     "AccordionAtom": {
       "name": "AccordionAtom",
@@ -3457,15 +3457,15 @@
           "required": false,
           "description": "Triggered when an option is selected"
         },
-        "onProceed": {
-          "type": "(key: string) => void",
+        "onAction": {
+          "type": "(action: string) => void",
           "required": false,
-          "description": "Triggered when the user clicks continue"
+          "description": "Triggered when the user clicks continue (PXEngine compatible)"
         },
         "isLatestMessage": {
           "type": "boolean",
           "required": false,
-          "description": "Whether the message is the latest"
+          "description": "Triggered when the message is the latest"
         },
         "countdown": {
           "type": "number",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxengine",
-  "version": "0.1.14",
+  "version": "0.1.16",
   "type": "module",
   "description": "Shadcn-based UI component library for agent-driven interfaces",
   "main": "./dist/index.cjs",