pxengine 0.1.13 → 0.1.14

package/dist/index.js

@@ -31564,7 +31564,7 @@ var ButtonAtom = ({
     }
   };
   const variantMap = {
-    purple: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-[0_4px_14px_0_hsl(var(--primary)/30%)] transition-all active:scale-95 font-bold",
+    purple: "bg-[var(--primary-color)] text-[var(--primary-foreground,white)] hover:opacity-90 shadow-[0_4px_14px_0_hsl(var(--primary)/30%)] transition-all active:scale-95 font-bold",
     gradient: "bg-gradient-to-r from-primary via-purple-500 to-indigo-600 text-primary-foreground hover:opacity-95 shadow-[0_4px_14px_0_hsl(var(--primary)/40%)] active:scale-95 font-bold"
   };
   const customClass = variantMap[variant] || "";
@@ -31598,8 +31598,8 @@ var LayoutAtom = ({
 }) => {
   const gapMap = {
     none: "gap-0",
-    sm: "gap-2",
-    md: "gap-4",
+    sm: "gap-4",
+    md: "gap-6",
     lg: "gap-8",
     xl: "gap-12"
   };
@@ -33408,7 +33408,6 @@ __export(molecules_exports, {
   AudienceDemographicsCard: () => AudienceDemographicsCard,
   AudienceMetricCard: () => AudienceMetricCard,
   BrandAffinityGroup: () => BrandAffinityGroup,
-  CAMPAIGN_SEED_FIELDS: () => CAMPAIGN_SEED_FIELDS,
   CampaignSeedCard: () => CampaignSeedCard,
   ContentPreviewGallery: () => ContentPreviewGallery,
   CountrySelectDisplay: () => CountrySelectDisplay,
@@ -33429,7 +33428,6 @@ __export(molecules_exports, {
   MCQCard: () => MCQCard,
   NotificationList: () => NotificationList,
   PlatformIconGroup: () => PlatformIconGroup,
-  SEARCH_SPEC_FIELDS: () => SEARCH_SPEC_FIELDS,
   SearchSpecCard: () => SearchSpecCard,
   StatsGrid: () => StatsGrid,
   StepWizard: () => StepWizard,
@@ -33563,22 +33561,21 @@ var EditableField = React84.memo(
       if (type === "slider") {
         return config.sliderConfig?.formatValue ? config.sliderConfig.formatValue(value) : `${value?.min} - ${value?.max}`;
       }
-      if (!value)
-        return /* @__PURE__ */ jsx91("span", { className: "text-muted-foreground italic", children: "Not set" });
+      if (!value) return /* @__PURE__ */ jsx91("span", { className: "opacity-0", children: "-" });
       return value.toString();
     };
-    return /* @__PURE__ */ jsxs53("div", { className: cn("group flex flex-col gap-1.5 py-2", className), children: [
+    return /* @__PURE__ */ jsxs53("div", { className: cn("group flex flex-col gap-1 py-1.5", className), children: [
       /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx91(Label, { className: "text-xs font-medium text-gray500 uppercase tracking-tight", children: label }),
+        /* @__PURE__ */ jsx91(Label, { className: "text-[13px] font-bold text-[var(--foreground)] opacity-80 uppercase tracking-wider", children: label }),
         isChanged && !isEditingProp && /* @__PURE__ */ jsx91(
           "div",
           {
-            className: "w-1.5 h-1.5 rounded-full bg-amber-500",
+            className: "w-2 h-2 rounded-full bg-amber-500 shadow-[0_0_8px_rgba(245,158,11,0.6)]",
             title: "Unsaved changes"
           }
         )
       ] }),
-      isEditingProp ? /* @__PURE__ */ jsxs53("div", { className: "flex flex-col gap-2", children: [
+      isEditingProp ? /* @__PURE__ */ jsxs53("div", { className: "flex flex-col gap-3", children: [
         renderInput(),
         /* @__PURE__ */ jsxs53("div", { className: "flex items-center justify-end gap-2", children: [
           /* @__PURE__ */ jsx91(
@@ -33586,20 +33583,20 @@ var EditableField = React84.memo(
             {
               size: "icon",
               variant: "outline",
-              className: "h-8 w-8 text-destructive border-destructive/20 hover:bg-destructive/10",
+              className: "h-9 w-9 text-destructive border-destructive/20 hover:bg-destructive/10 rounded-xl",
               onClick: onCancel,
               disabled: isSaving,
-              children: /* @__PURE__ */ jsx91(X, { className: "h-4 w-4" })
+              children: /* @__PURE__ */ jsx91(X, { className: "h-5 w-5" })
             }
           ),
           /* @__PURE__ */ jsx91(
             Button,
             {
               size: "icon",
-              className: "h-8 w-8 bg-purple500 hover:bg-purple600 text-white",
+              className: "h-9 w-9 bg-[var(--primary-color)] hover:opacity-90 text-[var(--primary-foreground,white)] rounded-xl shadow-lg shadow-[var(--primary-color)]/20",
               onClick: handleSave,
               disabled: isSaving,
-              children: isSaving ? /* @__PURE__ */ jsx91(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx91(Check, { className: "h-4 w-4" })
+              children: isSaving ? /* @__PURE__ */ jsx91(LoaderCircle, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ jsx91(Check, { className: "h-5 w-5" })
             }
           )
         ] })
@@ -33607,13 +33604,13 @@ var EditableField = React84.memo(
         "div",
         {
           className: cn(
-            "relative flex items-center justify-between rounded-md px-2 py-1.5 transition-all",
-            "hover:bg-gray-100/50 cursor-pointer border border-transparent hover:border-gray-200"
+            "relative flex items-center justify-between rounded-xl px-2 py-1.5 transition-all duration-200",
+            "hover:bg-gray-100/80 cursor-pointer border border-transparent hover:border-gray-200 group-hover:shadow-sm"
           ),
           onClick: onEdit,
           children: [
-            /* @__PURE__ */ jsx91("div", { className: "text-sm text-gray-900 font-medium truncate flex-1 leading-relaxed", children: formattedValue() }),
-            /* @__PURE__ */ jsx91(Pencil, { className: "h-3.5 w-3.5 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" })
+            /* @__PURE__ */ jsx91("div", { className: "text-[14px] text-gray-900 font-semibold truncate flex-1 leading-relaxed", children: formattedValue() }),
+            /* @__PURE__ */ jsx91(Pencil, { className: "h-4 w-4 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity" })
           ]
         }
       )
@@ -33673,8 +33670,8 @@ var ActionButton = React85.memo(
           onClick: onProceed,
           className: cn(
             "relative min-w-[140px] overflow-hidden group transition-all duration-300",
-            "bg-purple500 hover:bg-purple600 text-white font-semibold rounded-full px-6 py-2.5 shadow-md hover:shadow-lg",
-            variant === "outline" && "bg-transparent border-purple500 text-purple500 hover:bg-purple50",
+            "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%)]",
+            variant === "outline" && "bg-transparent border-[var(--primary-color)] text-[var(--primary-color)] hover:bg-[var(--primary-color)]/5",
             isLoading && "opacity-80"
           ),
           children: [
@@ -33727,7 +33724,8 @@ var FormCard = React86.memo(
     onFieldEdit,
     onFieldSave,
     onFieldCancel,
-    showTimeline = true,
+    showTimeline = false,
+    // Default to false to remove "bullets"
     proceedLabel,
     countdown,
     isPaused = false,
@@ -33746,52 +33744,62 @@ var FormCard = React86.memo(
       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-lg overflow-hidden transition-all duration-300 hover:shadow-xl",
           className
         ),
         children: [
-          /* @__PURE__ */ jsxs55(CardHeader, { className: "flex flex-row items-center justify-between pb-2 space-y-0", children: [
-            /* @__PURE__ */ jsx93(CardTitle, { className: "text-lg font-bold text-gray-900 tracking-tight", children: title }),
+          /* @__PURE__ */ jsxs55(CardHeader, { className: "flex flex-row items-center justify-between pb-3 pt-4 px-6 space-y-0", children: [
+            /* @__PURE__ */ jsx93(CardTitle, { className: "text-lg font-bold text-[var(--foreground)] tracking-tight", children: title }),
             /* @__PURE__ */ jsx93(
               "button",
               {
                 onClick: handleCopyAll,
-                className: "p-1.5 rounded-md hover:bg-gray-100 text-gray-400 hover:text-gray-600 transition-colors",
+                className: "p-1.5 rounded-xl hover:bg-gray-100/50 text-gray-400 hover:text-gray-600 transition-all active:scale-95",
                 title: "Copy all details",
                 children: /* @__PURE__ */ jsx93(Copy, { className: "h-4 w-4" })
               }
             )
           ] }),
-          /* @__PURE__ */ jsx93(CardContent, { className: "pt-2 pb-6", 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-gray200 pointer-events-none" }),
-            /* @__PURE__ */ jsx93("div", { className: "space-y-4", children: fields.map((field) => /* @__PURE__ */ jsxs55("div", { className: "relative pl-6", children: [
-              showTimeline && /* @__PURE__ */ jsx93(
-                "div",
-                {
-                  className: cn(
-                    "absolute left-0 top-[18px] w-[14px] h-[14px] -translate-x-1/2 rounded-full border-2 bg-white z-10",
-                    changedFields[field.key] ? "border-amber-500" : "border-gray-200"
+          /* @__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" }),
+            /* @__PURE__ */ jsx93("div", { className: "space-y-2.5", children: fields.map((field) => /* @__PURE__ */ jsxs55(
+              "div",
+              {
+                className: cn(
+                  "relative transition-all duration-300",
+                  showTimeline && "pl-8"
+                ),
+                children: [
+                  showTimeline && /* @__PURE__ */ jsx93(
+                    "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"
+                      )
+                    }
+                  ),
+                  /* @__PURE__ */ jsx93(
+                    EditableField,
+                    {
+                      label: field.label,
+                      value: data[field.key],
+                      type: field.type,
+                      config: field,
+                      isEditing: editingFields[field.key],
+                      isChanged: changedFields[field.key],
+                      isSaving: savingFields[field.key],
+                      onEdit: () => onFieldEdit?.(field.key),
+                      onSave: (val) => onFieldSave?.(field.key, val),
+                      onCancel: () => onFieldCancel?.(field.key)
+                    }
                   )
-                }
-              ),
-              /* @__PURE__ */ jsx93(
-                EditableField,
-                {
-                  label: field.label,
-                  value: data[field.key],
-                  type: field.type,
-                  config: field,
-                  isEditing: editingFields[field.key],
-                  isChanged: changedFields[field.key],
-                  isSaving: savingFields[field.key],
-                  onEdit: () => onFieldEdit?.(field.key),
-                  onSave: (val) => onFieldSave?.(field.key, val),
-                  onCancel: () => onFieldCancel?.(field.key)
-                }
-              )
-            ] }, field.key)) })
+                ]
+              },
+              field.key
+            )) })
           ] }) }),
-          (onProceed || footer) && /* @__PURE__ */ jsxs55(CardFooter, { className: "flex flex-col gap-4 pt-0 border-t border-gray-100/50 bg-gray-50/30 p-6", children: [
+          (onProceed || footer) && /* @__PURE__ */ jsxs55(CardFooter, { className: "flex flex-col gap-3 border-t border-[var(--border-color)] bg-black/5 p-6", children: [
             onProceed && proceedLabel && /* @__PURE__ */ jsx93("div", { className: "w-full flex justify-center", children: /* @__PURE__ */ jsx93(
               ActionButton,
               {
@@ -33815,8 +33823,10 @@ FormCard.displayName = "FormCard";
 import { jsx as jsx94, jsxs as jsxs56 } from "react/jsx-runtime";
 var StatsGrid = ({
   items,
+  stats,
   className
 }) => {
+  const displayItems = items || stats || [];
   return /* @__PURE__ */ jsx94(
     "div",
     {
@@ -33824,15 +33834,15 @@ var StatsGrid = ({
         "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
         className
       ),
-      children: items.map((item, index) => {
+      children: displayItems?.map((item, index) => {
         const Icon3 = item.icon ? lucide_react_exports[item.icon] : null;
-        const trendColor = item.trendDirection === "up" ? "text-green-600" : item.trendDirection === "down" ? "text-red-600" : "text-gray-500";
+        const trendColor = item.trendDirection === "up" ? "text-emerald-600 dark:text-emerald-400" : item.trendDirection === "down" ? "text-rose-600 dark:text-rose-400" : "text-muted-foreground";
         const TrendIcon = item.trendDirection === "up" ? ArrowUpRight : item.trendDirection === "down" ? ArrowDownRight : null;
         return /* @__PURE__ */ jsx94(
           Card,
           {
-            className: "bg-white/60 backdrop-blur-sm border-purple-50 hover:shadow-md transition-all rounded-2xl overflow-hidden",
-            children: /* @__PURE__ */ jsxs56(CardContent, { className: "p-4 flex flex-col gap-2", children: [
+            className: "bg-[var(--card-background,theme(colors.white))] dark:bg-[var(--card-background,theme(colors.zinc.900))] border-[var(--border-color,theme(colors.gray.200))] backdrop-blur-sm shadow-sm hover:shadow-md transition-all duration-300 rounded-[24px] overflow-hidden",
+            children: /* @__PURE__ */ jsxs56(CardContent, { className: "p-5 flex flex-col gap-1.5", children: [
               /* @__PURE__ */ jsxs56("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ jsx94(
                   TextAtom,
@@ -33841,12 +33851,12 @@ var StatsGrid = ({
                     type: "text",
                     content: item.label,
                     variant: "small",
-                    className: "text-muted-foreground font-medium"
+                    className: "text-muted-foreground font-medium tracking-wide uppercase text-[10px]"
                   }
                 ),
-                Icon3 && /* @__PURE__ */ jsx94(Icon3, { className: "w-4 h-4 text-purple-500" })
+                Icon3 && /* @__PURE__ */ jsx94(Icon3, { className: "w-4 h-4 text-[var(--primary-color,theme(colors.purple.500))]" })
               ] }),
-              /* @__PURE__ */ jsxs56("div", { className: "flex items-baseline gap-2", children: [
+              /* @__PURE__ */ jsxs56("div", { className: "flex items-baseline gap-3", children: [
                 /* @__PURE__ */ jsx94(
                   TextAtom,
                   {
@@ -33854,15 +33864,19 @@ var StatsGrid = ({
                     type: "text",
                     content: String(item.value),
                     variant: "h3",
-                    className: "font-bold text-gray-900"
+                    className: cn(
+                      "font-bold text-[var(--foreground)] tracking-tight leading-tight",
+                      String(item.value).length > 20 ? "text-base" : String(item.value).length > 12 ? "text-lg" : "text-xl"
+                    )
                   }
                 ),
                 item.trend && /* @__PURE__ */ jsxs56(
                   "div",
                   {
                     className: cn(
-                      "flex items-center text-xs font-bold",
-                      trendColor
+                      "flex items-center text-xs font-bold px-1.5 py-0.5 rounded-full bg-opacity-10",
+                      trendColor,
+                      item.trendDirection === "up" ? "bg-emerald-100 dark:bg-emerald-900/30" : item.trendDirection === "down" ? "bg-rose-100 dark:bg-rose-900/30" : "bg-gray-100 dark:bg-gray-800"
                     ),
                     children: [
                       TrendIcon && /* @__PURE__ */ jsx94(TrendIcon, { className: "w-3 h-3 mr-0.5" }),
@@ -34069,16 +34083,19 @@ var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
 
 // src/molecules/generic/TagCloud/TagCloud.tsx
 import { jsx as jsx99, jsxs as jsxs61 } from "react/jsx-runtime";
-var TagCloud = ({ tags, className, onTagClick }) => {
-  return /* @__PURE__ */ jsx99("div", { className: cn("flex flex-wrap gap-2", className), children: tags.map((tag) => /* @__PURE__ */ jsxs61(
+var TagCloud = ({ tags = [], className, onTagClick }) => {
+  const normalizedTags = tags.map(
+    (t) => typeof t === "string" ? { label: t, value: t } : t
+  );
+  return /* @__PURE__ */ jsx99("div", { className: cn("flex flex-wrap gap-3.5", className), children: normalizedTags.map((tag) => /* @__PURE__ */ jsxs61(
     Badge2,
     {
       variant: "secondary",
-      className: "cursor-pointer bg-white border border-purple-50 hover:bg-purple-50 hover:border-purple-200 text-gray-700 rounded-lg px-3 py-1.5 transition-all flex items-center gap-2 shadow-sm",
+      className: "cursor-pointer bg-[var(--card-background,theme(colors.white))] dark:bg-[var(--card-background,theme(colors.zinc.900))] border border-[var(--border-color,theme(colors.gray.200))] text-[var(--foreground)] hover:bg-[var(--primary-color)] hover:text-white hover:border-[var(--primary-color)] rounded-full px-3 py-1 transition-all duration-300 flex items-center gap-2 shadow-sm",
       onClick: () => onTagClick?.(tag.value),
       children: [
-        /* @__PURE__ */ jsx99("span", { children: tag.label }),
-        tag.count !== void 0 && /* @__PURE__ */ jsx99("span", { className: "text-[10px] font-bold bg-purple-100 text-purple-700 px-1.5 rounded-full", children: tag.count })
+        /* @__PURE__ */ jsx99("span", { className: "font-medium", children: tag.label }),
+        tag.count !== void 0 && /* @__PURE__ */ jsx99("span", { className: "text-[10px] font-bold bg-black/5 dark:bg-white/10 px-1.5 py-0.5 rounded-full min-w-[20px] text-center", children: tag.count })
       ]
     },
     tag.value
@@ -34261,89 +34278,68 @@ var NotificationList = ({
 };
 
 // src/molecules/creator-discovery/CampaignSeedCard/CampaignSeedCard.tsx
-import React89 from "react";
-import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
-var CAMPAIGN_SEED_FIELDS = [
-  {
-    key: "brand",
-    label: "Brand / Campaign",
-    type: "text",
-    placeholder: "Not specified"
-  },
-  {
-    key: "objective",
-    label: "Objective",
-    type: "text",
-    placeholder: "Not specified"
-  },
-  {
-    key: "budget_hint",
-    label: "Budget Hint",
-    type: "slider",
-    placeholder: "Not specified",
-    sliderConfig: {
-      min: 0,
-      max: 1e6,
-      step: 1e3,
-      formatValue: (value) => {
-        if (!value) return "$0 - $100K";
-        const formatCurrency = (amount) => {
-          if (amount >= 1e6) return `$${(amount / 1e6).toFixed(1)}M`;
-          if (amount >= 1e3) return `$${(amount / 1e3).toFixed(0)}K`;
-          return `$${amount.toLocaleString()}`;
-        };
-        let normalized;
-        if (typeof value === "object" && value?.min !== void 0) {
-          normalized = value;
-        } else if (typeof value === "string" && value.includes("-")) {
-          const [minStr, maxStr] = value.split("-");
-          normalized = {
-            min: Number(minStr) || 0,
-            max: Number(maxStr) || 1e5
-          };
-        } else {
-          const val = Number(String(value).replace(/[^0-9.]/g, "")) || 0;
-          normalized = val > 0 ? { min: val, max: val } : { min: 0, max: 1e5 };
-        }
-        if (normalized.min === normalized.max)
-          return formatCurrency(normalized.min);
-        return `${formatCurrency(normalized.min)} - ${formatCurrency(normalized.max)}`;
-      }
+import React89, { useMemo as useMemo4 } from "react";
+
+// src/lib/field-utils.ts
+function normalizeLabel(key) {
+  return key.split(/_|\s+/).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
+}
+function inferFieldType(value) {
+  if (typeof value === "boolean") return "checkbox";
+  if (typeof value === "number") return "number";
+  if (Array.isArray(value)) return "custom";
+  if (typeof value === "object" && value !== null) {
+    if ("min" in value && "max" in value) return "slider";
+    return "custom";
+  }
+  if (typeof value === "string") {
+    if (value.length > 100) return "textarea";
+    return "text";
+  }
+  return "text";
+}
+function generateFieldsFromData(data) {
+  if (!data || typeof data !== "object") return [];
+  return Object.keys(data).map((key) => {
+    const value = data[key];
+    const type = inferFieldType(value);
+    const config = {
+      key,
+      label: normalizeLabel(key),
+      type
+    };
+    if (type === "slider" && typeof value === "object") {
+      config.sliderConfig = {
+        min: value.min ?? 0,
+        max: value.max ?? 100,
+        step: 1
+      };
     }
-  },
-  {
-    key: "geo_or_audience",
-    label: "Geography or Audience",
-    type: "text",
-    placeholder: "Not specified"
-  },
-  {
-    key: "timeline_opt",
-    label: "Timeline Option",
-    type: "text",
-    placeholder: "Not specified"
-  },
-  {
-    key: "notes",
-    label: "Notes",
-    type: "textarea",
-    placeholder: "No notes",
-    rows: 4
-  }
-];
+    return config;
+  });
+}
+
+// src/molecules/creator-discovery/CampaignSeedCard/CampaignSeedCard.tsx
+import { jsx as jsx103, jsxs as jsxs65 } from "react/jsx-runtime";
 var CampaignSeedCard = React89.memo(
   ({
     selectionStatus,
     isLatestMessage = true,
     className,
+    fields: providedFields,
+    data,
     ...formCardProps
   }) => {
+    const fields = useMemo4(() => {
+      return providedFields || generateFieldsFromData(data);
+    }, [providedFields, data]);
     return /* @__PURE__ */ jsx103("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ jsx103(
       FormCard,
       {
         ...formCardProps,
-        title: formCardProps.title || "Brand Information",
-        fields: CAMPAIGN_SEED_FIELDS,
+        data,
+        title: formCardProps.title || "Campaign Brief",
+        fields,
         className,
         footer: !isLatestMessage && selectionStatus ? /* @__PURE__ */ jsxs65("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
           /* @__PURE__ */ jsx103(CircleCheck, { className: "h-4 w-4" }),
@@ -34356,7 +34352,37 @@ var CampaignSeedCard = React89.memo(
 CampaignSeedCard.displayName = "CampaignSeedCard";
 
 // src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.tsx
-import React90 from "react";
+import React90, { useMemo as useMemo5 } from "react";
+import { jsx as jsx104, jsxs as jsxs66 } from "react/jsx-runtime";
+var SearchSpecCard = React90.memo(
+  ({
+    selectionStatus,
+    isLatestMessage = true,
+    className,
+    fields: providedFields,
+    data,
+    ...formCardProps
+  }) => {
+    const fields = useMemo5(() => {
+      return providedFields || generateFieldsFromData(data);
+    }, [providedFields, data]);
+    return /* @__PURE__ */ jsx104(
+      FormCard,
+      {
+        ...formCardProps,
+        data,
+        title: formCardProps.title || "Search Specification",
+        fields,
+        className,
+        footer: !isLatestMessage && selectionStatus ? /* @__PURE__ */ jsxs66("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
+          /* @__PURE__ */ jsx104(CircleCheck, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx104("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by User" })
+        ] }) : formCardProps.footer
+      }
+    );
+  }
+);
+SearchSpecCard.displayName = "SearchSpecCard";
 
 // src/molecules/creator-discovery/SearchSpecCard/CustomFieldRenderers.tsx
 import { useState as useState6, useRef as useRef5, useEffect as useEffect6 } from "react";
@@ -34566,7 +34592,7 @@ var countriesWithFlags = Object.fromEntries(
 );
 
 // src/molecules/creator-discovery/SearchSpecCard/CustomFieldRenderers.tsx
-import { jsx as jsx104, jsxs as jsxs66 } from "react/jsx-runtime";
+import { jsx as jsx105, jsxs as jsxs67 } from "react/jsx-runtime";
 var CountrySelectEdit = ({
   value,
   onChange
@@ -34584,16 +34610,16 @@ var CountrySelectEdit = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const inputValue = Array.isArray(value) ? value : [];
-  return /* @__PURE__ */ jsxs66("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs66("div", { className: "relative", ref: dropdownRef, children: [
-      /* @__PURE__ */ jsxs66(
+  return /* @__PURE__ */ jsxs67("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs67("div", { className: "relative", ref: dropdownRef, children: [
+      /* @__PURE__ */ jsxs67(
         "div",
         {
           className: "flex-1 bg-white border border-gray200 rounded-md px-3 py-2 text-sm cursor-pointer flex items-center justify-between font-medium hover:border-purple500 transition-colors",
           onClick: () => setIsDropdownOpen(!isDropdownOpen),
           children: [
-            /* @__PURE__ */ jsx104("span", { className: "text-gray-700", children: inputValue.length > 0 ? `${inputValue.length} ${inputValue.length === 1 ? "country" : "countries"} selected` : "Select countries..." }),
-            /* @__PURE__ */ jsx104(
+            /* @__PURE__ */ jsx105("span", { className: "text-gray-700", children: inputValue.length > 0 ? `${inputValue.length} ${inputValue.length === 1 ? "country" : "countries"} selected` : "Select countries..." }),
+            /* @__PURE__ */ jsx105(
               ChevronDown,
               {
                 className: cn(
@@ -34605,8 +34631,8 @@ var CountrySelectEdit = ({
           ]
         }
       ),
-      isDropdownOpen && /* @__PURE__ */ jsxs66("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white border border-gray200 rounded-lg shadow-xl z-50 max-h-60 overflow-hidden animate-in fade-in slide-in-from-top-1", children: [
-        /* @__PURE__ */ jsx104("div", { className: "p-2 border-b border-gray-100", children: /* @__PURE__ */ jsx104(
+      isDropdownOpen && /* @__PURE__ */ jsxs67("div", { className: "absolute top-full left-0 right-0 mt-1 bg-white border border-gray200 rounded-lg shadow-xl z-50 max-h-60 overflow-hidden animate-in fade-in slide-in-from-top-1", children: [
+        /* @__PURE__ */ jsx105("div", { className: "p-2 border-b border-gray-100", children: /* @__PURE__ */ jsx105(
           "input",
           {
             type: "text",
@@ -34617,9 +34643,9 @@ var CountrySelectEdit = ({
             onClick: (e) => e.stopPropagation()
           }
         ) }),
-        /* @__PURE__ */ jsx104("div", { className: "max-h-40 overflow-y-auto p-1", children: countries.filter(
+        /* @__PURE__ */ jsx105("div", { className: "max-h-40 overflow-y-auto p-1", children: countries.filter(
           (country) => country.name.toLowerCase().includes(searchTerm.toLowerCase()) || country.code.toLowerCase().includes(searchTerm.toLowerCase())
-        ).map((country) => /* @__PURE__ */ jsxs66(
+        ).map((country) => /* @__PURE__ */ jsxs67(
           "div",
           {
             className: cn(
@@ -34640,31 +34666,31 @@ var CountrySelectEdit = ({
               }
             },
             children: [
-              /* @__PURE__ */ jsxs66("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx104("span", { className: "text-sm text-gray-700", children: country.name }),
-                /* @__PURE__ */ jsx104("span", { className: "text-xs text-gray-400 font-mono", children: country.code })
+              /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx105("span", { className: "text-sm text-gray-700", children: country.name }),
+                /* @__PURE__ */ jsx105("span", { className: "text-xs text-gray-400 font-mono", children: country.code })
               ] }),
-              inputValue.includes(country.code) && /* @__PURE__ */ jsx104(Check, { className: "h-4 w-4 text-purple500" })
+              inputValue.includes(country.code) && /* @__PURE__ */ jsx105(Check, { className: "h-4 w-4 text-purple500" })
             ]
           },
           country.code
         )) })
       ] })
     ] }),
-    inputValue.length > 0 && /* @__PURE__ */ jsx104("div", { className: "flex flex-wrap gap-1.5", children: inputValue.map((countryCode) => /* @__PURE__ */ jsxs66(
+    inputValue.length > 0 && /* @__PURE__ */ jsx105("div", { className: "flex flex-wrap gap-1.5", children: inputValue.map((countryCode) => /* @__PURE__ */ jsxs67(
       Badge2,
       {
         variant: "secondary",
         className: "bg-purple50 text-purple700 border-purple100 hover:bg-purple100 cursor-default flex items-center gap-1 pr-1",
         children: [
           countryCode,
-          /* @__PURE__ */ jsxs66(
+          /* @__PURE__ */ jsxs67(
             "button",
             {
               onClick: () => onChange(inputValue.filter((c) => c !== countryCode)),
               className: "hover:bg-purple200 rounded-full p-0.5 transition-colors",
               children: [
-                /* @__PURE__ */ jsx104(ChevronDown, { className: "h-3 w-3 rotate-45" }),
+                /* @__PURE__ */ jsx105(ChevronDown, { className: "h-3 w-3 rotate-45" }),
                 " "
               ]
             }
@@ -34677,9 +34703,9 @@ var CountrySelectEdit = ({
 };
 var CountrySelectDisplay = ({ value }) => {
   if (!value || !Array.isArray(value) || value.length === 0) {
-    return /* @__PURE__ */ jsx104("span", { className: "text-muted-foreground italic", children: "Not specified" });
+    return /* @__PURE__ */ jsx105("span", { className: "text-muted-foreground italic", children: "Not specified" });
   }
-  return /* @__PURE__ */ jsx104("div", { className: "flex flex-wrap gap-1.5", children: value.map((countryCode) => /* @__PURE__ */ jsx104(
+  return /* @__PURE__ */ jsx105("div", { className: "flex flex-wrap gap-1.5", children: value.map((countryCode) => /* @__PURE__ */ jsx105(
     Badge2,
     {
       variant: "outline",
@@ -34701,22 +34727,22 @@ var KeywordBundlesEdit = ({
     groups[p].push({ bundle: b, index: idx });
   });
   const sortedPriorities = Object.keys(groups).map((n) => parseInt(n)).sort((a, b) => a - b);
-  return /* @__PURE__ */ jsx104("div", { className: "space-y-6 pt-2", children: sortedPriorities.map((priority) => /* @__PURE__ */ jsxs66("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs66("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs66(Badge2, { className: "bg-purple500 hover:bg-purple500", children: [
+  return /* @__PURE__ */ jsx105("div", { className: "space-y-6 pt-2", children: sortedPriorities.map((priority) => /* @__PURE__ */ jsxs67("div", { className: "space-y-3", children: [
+    /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs67(Badge2, { className: "bg-purple500 hover:bg-purple500", children: [
         "Priority ",
         priority
       ] }),
-      /* @__PURE__ */ jsx104("div", { className: "h-px flex-1 bg-gray-100" })
+      /* @__PURE__ */ jsx105("div", { className: "h-px flex-1 bg-gray-100" })
     ] }),
-    groups[priority].map(({ bundle, index: bundleIndex }) => /* @__PURE__ */ jsx104(
+    groups[priority].map(({ bundle, index: bundleIndex }) => /* @__PURE__ */ jsx105(
       "div",
       {
         className: "bg-gray-50/50 border border-gray-100 rounded-xl p-4 transition-all hover:bg-gray-50 hover:border-gray-200 shadow-sm",
-        children: /* @__PURE__ */ jsxs66("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsx104("label", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1", children: "Keywords" }),
-          /* @__PURE__ */ jsxs66("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx104("div", { className: "flex flex-wrap gap-1.5", children: Array.isArray(bundle.keywords) && bundle.keywords.map((keyword, kIndex) => /* @__PURE__ */ jsxs66(
+        children: /* @__PURE__ */ jsxs67("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx105("label", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1", children: "Keywords" }),
+          /* @__PURE__ */ jsxs67("div", { className: "space-y-3", children: [
+            /* @__PURE__ */ jsx105("div", { className: "flex flex-wrap gap-1.5", children: Array.isArray(bundle.keywords) && bundle.keywords.map((keyword, kIndex) => /* @__PURE__ */ jsxs67(
               Badge2,
               {
                 className: "bg-white border-gray-200 text-gray-700 hover:bg-red-50 hover:text-red-600 hover:border-red-100 transition-all cursor-pointer group",
@@ -34732,12 +34758,12 @@ var KeywordBundlesEdit = ({
                 },
                 children: [
                   keyword,
-                  /* @__PURE__ */ jsx104("span", { className: "ml-1 opacity-0 group-hover:opacity-100 transition-opacity", children: "\xD7" })
+                  /* @__PURE__ */ jsx105("span", { className: "ml-1 opacity-0 group-hover:opacity-100 transition-opacity", children: "\xD7" })
                 ]
               },
               kIndex
             )) }),
-            /* @__PURE__ */ jsx104("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx104(
+            /* @__PURE__ */ jsx105("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx105(
               "input",
               {
                 type: "text",
@@ -34761,9 +34787,9 @@ var KeywordBundlesEdit = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxs66("div", { className: "flex flex-col gap-1.5 mt-1", children: [
-            /* @__PURE__ */ jsx104("label", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1", children: "Priority Level (1-5)" }),
-            /* @__PURE__ */ jsx104(
+          /* @__PURE__ */ jsxs67("div", { className: "flex flex-col gap-1.5 mt-1", children: [
+            /* @__PURE__ */ jsx105("label", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1", children: "Priority Level (1-5)" }),
+            /* @__PURE__ */ jsx105(
               "input",
               {
                 type: "number",
@@ -34791,7 +34817,7 @@ var KeywordBundlesEdit = ({
 var KeywordBundlesDisplay = ({ value }) => {
   const bundles = Array.isArray(value) ? value : [];
   if (bundles.length === 0)
-    return /* @__PURE__ */ jsx104("span", { className: "text-muted-foreground italic", children: "Not specified" });
+    return /* @__PURE__ */ jsx105("span", { className: "text-muted-foreground italic", children: "Not specified" });
   const groups = {};
   bundles.forEach((b) => {
     const p = Number(b?.priority) || 1;
@@ -34800,11 +34826,11 @@ var KeywordBundlesDisplay = ({ value }) => {
     groups[p].push(...keywords);
   });
   const sortedPriorities = Object.keys(groups).map((n) => parseInt(n)).sort((a, b) => a - b);
-  return /* @__PURE__ */ jsx104("div", { className: "space-y-4 pt-1", children: sortedPriorities.map((priority) => {
+  return /* @__PURE__ */ jsx105("div", { className: "space-y-4 pt-1", children: sortedPriorities.map((priority) => {
     const deduped = Array.from(new Set(groups[priority]));
-    return /* @__PURE__ */ jsxs66("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs66("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs66(
+    return /* @__PURE__ */ jsxs67("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs67(
           Badge2,
           {
             variant: "outline",
@@ -34815,9 +34841,9 @@ var KeywordBundlesDisplay = ({ value }) => {
             ]
           }
         ),
-        /* @__PURE__ */ jsx104("div", { className: "h-px flex-1 bg-gray-100/50" })
+        /* @__PURE__ */ jsx105("div", { className: "h-px flex-1 bg-gray-100/50" })
       ] }),
-      /* @__PURE__ */ jsx104("div", { className: "flex flex-wrap gap-1.5", children: deduped.map((keyword) => /* @__PURE__ */ jsx104(
+      /* @__PURE__ */ jsx105("div", { className: "flex flex-wrap gap-1.5", children: deduped.map((keyword) => /* @__PURE__ */ jsx105(
         Badge2,
         {
           variant: "secondary",
@@ -34830,85 +34856,6 @@ var KeywordBundlesDisplay = ({ value }) => {
   }) });
 };
 
-// src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.tsx
-import { jsx as jsx105, jsxs as jsxs67 } from "react/jsx-runtime";
-var SEARCH_SPEC_FIELDS = [
-  {
-    key: "platforms",
-    label: "Platforms",
-    type: "select",
-    // Changed to select for simplicity in form, or custom if multi-select needed
-    placeholder: "Select platforms",
-    options: ["Instagram", "YouTube", "TikTok"]
-  },
-  {
-    key: "follower_range",
-    label: "Follower Range",
-    type: "slider",
-    placeholder: "Not specified",
-    sliderConfig: {
-      min: 0,
-      max: 5e6,
-      step: 1e4,
-      formatValue: (value) => {
-        if (!value || typeof value !== "object") return "0 - 2.5M followers";
-        const formatNum = (n) => {
-          if (n >= 1e6) return `${(n / 1e6).toFixed(1)}M`;
-          if (n >= 1e3) return `${(n / 1e3).toFixed(0)}K`;
-          return n.toLocaleString();
-        };
-        return `${formatNum(value.min || 0)} - ${formatNum(value.max || 25e5)} followers`;
-      }
-    }
-  },
-  {
-    key: "geography",
-    label: "Geography",
-    type: "custom",
-    renderEdit: (value, onChange) => /* @__PURE__ */ jsx105(CountrySelectEdit, { value, onChange }),
-    renderDisplay: (value) => /* @__PURE__ */ jsx105(CountrySelectDisplay, { value })
-  },
-  {
-    key: "keyword_bundles",
-    label: "Keyword Bundles",
-    type: "custom",
-    renderEdit: (value, onChange) => /* @__PURE__ */ jsx105(KeywordBundlesEdit, { value, onChange }),
-    renderDisplay: (value) => /* @__PURE__ */ jsx105(KeywordBundlesDisplay, { value })
-  },
-  {
-    key: "desired_candidate_count",
-    label: "Initial Creators",
-    type: "number",
-    numberConfig: {
-      min: 1,
-      formatValue: (value) => `${value || 0} creators`
-    }
-  }
-];
-var SearchSpecCard = React90.memo(
-  ({
-    selectionStatus,
-    isLatestMessage = true,
-    className,
-    ...formCardProps
-  }) => {
-    return /* @__PURE__ */ jsx105(
-      FormCard,
-      {
-        ...formCardProps,
-        title: formCardProps.title || "Creator Search Settings",
-        fields: SEARCH_SPEC_FIELDS,
-        className,
-        footer: !isLatestMessage && selectionStatus ? /* @__PURE__ */ jsxs67("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
-          /* @__PURE__ */ jsx105(CircleCheck, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx105("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by User" })
-        ] }) : formCardProps.footer
-      }
-    );
-  }
-);
-SearchSpecCard.displayName = "SearchSpecCard";
-
 // src/molecules/creator-discovery/MCQCard/MCQCard.tsx
 import React91 from "react";
 import { jsx as jsx106, jsxs as jsxs68 } from "react/jsx-runtime";
@@ -34956,7 +34903,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-purple500 bg-purple50/30" : "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" : "border-gray-100 bg-gray-50/30 hover:border-gray-300 hover:bg-gray-50",
                   isLoading && "opacity-50 cursor-not-allowed"
                 ),
                 children: [
@@ -34965,7 +34912,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-purple500 bg-purple500" : "border-gray-300 bg-white group-hover:border-gray-400"
+                        isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]" : "border-gray-300 bg-white group-hover:border-gray-400"
                       ),
                       children: isSelected && /* @__PURE__ */ jsx106("div", { className: "w-1.5 h-1.5 rounded-full bg-white" })
                     }
@@ -34976,7 +34923,7 @@ var MCQCard = React91.memo(
                       {
                         className: cn(
                           "text-sm font-semibold transition-colors",
-                          isSelected ? "text-purple900" : "text-gray700"
+                          isSelected ? "text-[var(--foreground)]" : "text-gray700"
                         ),
                         children: label
                       }
@@ -35097,7 +35044,7 @@ var CreatorProfileSummary = ({
     "div",
     {
       className: cn(
-        "flex items-center gap-4 p-3 rounded-2xl bg-white/40 border border-purple-50 shadow-sm",
+        "flex items-center gap-4 p-4 rounded-2xl bg-[var(--card-background,theme(colors.white))] dark:bg-[var(--card-background,theme(colors.zinc.950))] border border-[var(--border-color,theme(colors.gray.200))] shadow-sm transition-all duration-300 hover:shadow-md",
         className
       ),
       children: [
@@ -35149,7 +35096,7 @@ var AudienceMetricCard = ({
     Card,
     {
       className: cn(
-        "bg-white border-purple-50 rounded-3xl overflow-hidden",
+        "bg-[var(--card-background,theme(colors.white))] dark:bg-[var(--card-background,theme(colors.zinc.900))] border-[var(--border-color,theme(colors.gray.200))] rounded-[32px] shadow-xl overflow-hidden transition-all duration-300 hover:shadow-2xl",
         className
       ),
       children: [
@@ -35955,7 +35902,7 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-import { useMemo as useMemo4 } from "react";
+import { useMemo as useMemo6 } from "react";
 import { cva as cva10 } from "class-variance-authority";
 import { jsx as jsx119, jsxs as jsxs78 } from "react/jsx-runtime";
 function FieldSet({ className, ...props }) {
@@ -36138,7 +36085,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = useMemo4(() => {
+  const content = useMemo6(() => {
     if (children) {
       return children;
     }
@@ -37288,21 +37235,6 @@ var renderContextDependentError = (componentName, normalizedName, key) => {
     key
   );
 };
-var renderNotFoundError = (componentName, key) => {
-  return /* @__PURE__ */ jsxs80(
-    "div",
-    {
-      className: "p-3 border border-dashed border-red-500/50 text-red-500 text-xs rounded bg-red-50/30 my-2",
-      children: [
-        /* @__PURE__ */ jsx126("span", { className: "font-semibold", children: "\u274C Unknown Component:" }),
-        " ",
-        componentName,
-        /* @__PURE__ */ jsx126("p", { className: "text-[10px] text-red-400 mt-1", children: "Component not found in Atoms, Molecules, or UI Components registry." })
-      ]
-    },
-    key
-  );
-};
 var normalizeProps = (props) => {
   const normalized = {};
   const dynamicStyle = {};
@@ -37398,7 +37330,7 @@ var PXEngineRenderer = ({
     const uniqueKey = id || `${componentName}-${index || Math.random().toString(36).substr(2, 9)}`;
     const normalizedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
     const resolveComponent = (identifier) => {
-      const normalized = identifier.charAt(0).toUpperCase() + identifier.slice(1);
+      const normalized = identifier.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
       const atomName2 = normalized.endsWith("Atom") ? normalized : `${normalized}Atom`;
       let Comp = atoms_exports[atomName2] || atoms_exports[normalized] || atoms_exports[identifier];
       if (!Comp) {
@@ -37428,7 +37360,6 @@ var PXEngineRenderer = ({
         console.warn(
           `[PXEngineRenderer] Component not found: ${componentName}`
         );
-        return renderNotFoundError(componentName, uniqueKey);
       }
     }
     const resolvedNormalized = resolvedIdentifier.charAt(0).toUpperCase() + resolvedIdentifier.slice(1);
@@ -37463,7 +37394,16 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ jsx126(TargetComponent, { ...finalProps, style: finalStyle, children: Array.isArray(children) ? children.map((child, idx) => renderRecursive(child, idx)) : children }, uniqueKey);
+      return /* @__PURE__ */ jsx126(
+        TargetComponent,
+        {
+          ...finalProps,
+          style: finalStyle,
+          onAction,
+          children: Array.isArray(children) ? children.map((child, idx) => renderRecursive(child, idx)) : children
+        },
+        uniqueKey
+      );
     }
   };
   return /* @__PURE__ */ jsx126("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
@@ -37509,7 +37449,6 @@ export {
   BreadcrumbSeparator,
   Button,
   ButtonAtom,
-  CAMPAIGN_SEED_FIELDS,
   Calendar2 as Calendar,
   CalendarAtom,
   CampaignSeedCard,
@@ -37663,7 +37602,6 @@ export {
   ResizableAtom,
   ResizablePanel,
   ResizablePanelGroup,
-  SEARCH_SPEC_FIELDS,
   ScrollArea,
   ScrollAreaAtom,
   ScrollBar,