pxengine 0.1.21 → 0.1.22

package/dist/index.d.cts

@@ -1797,6 +1797,10 @@ interface SearchSpecCardProps extends Omit<FormCardProps, "fields"> {
      * Optional field configuration to override dynamic generation
      */
     fields?: FieldConfig[];
+    /**
+     * Alias for data — the agent schema uses specData as the prop name
+     */
+    specData?: Record<string, any>;
 }
 
 /**
@@ -1804,7 +1808,7 @@ interface SearchSpecCardProps extends Omit<FormCardProps, "fields"> {
  *
  * A domain-specific molecule for the Creator Discovery workflow.
  * Encapsulates search settings like platforms, ranges, and custom keyword bundles.
- * Now dynamic: if no fields are provided, it generates them from the data object.
+ * Uses smart field generation with proper renderers for all nested data types.
  */
 declare const SearchSpecCard: React__default.NamedExoticComponent<SearchSpecCardProps>;
 

package/dist/index.d.ts

@@ -1797,6 +1797,10 @@ interface SearchSpecCardProps extends Omit<FormCardProps, "fields"> {
      * Optional field configuration to override dynamic generation
      */
     fields?: FieldConfig[];
+    /**
+     * Alias for data — the agent schema uses specData as the prop name
+     */
+    specData?: Record<string, any>;
 }
 
 /**
@@ -1804,7 +1808,7 @@ interface SearchSpecCardProps extends Omit<FormCardProps, "fields"> {
  *
  * A domain-specific molecule for the Creator Discovery workflow.
  * Encapsulates search settings like platforms, ranges, and custom keyword bundles.
- * Now dynamic: if no fields are provided, it generates them from the data object.
+ * Uses smart field generation with proper renderers for all nested data types.
  */
 declare const SearchSpecCard: React__default.NamedExoticComponent<SearchSpecCardProps>;
 

package/dist/index.mjs

@@ -34594,36 +34594,6 @@ CampaignSeedCard.displayName = "CampaignSeedCard";
 
 // src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.tsx
 import React91, { useMemo as useMemo5 } from "react";
-import { jsx as jsx107, jsxs as jsxs67 } from "react/jsx-runtime";
-var SearchSpecCard = React91.memo(
-  ({
-    selectionStatus,
-    isLatestMessage = true,
-    className,
-    fields: providedFields,
-    data,
-    ...formCardProps
-  }) => {
-    const fields = useMemo5(() => {
-      return providedFields || generateFieldsFromData(data);
-    }, [providedFields, data]);
-    return /* @__PURE__ */ jsx107(
-      FormCard,
-      {
-        ...formCardProps,
-        data,
-        title: formCardProps.title || "Search Specification",
-        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__ */ jsx107(CircleCheck, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx107("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 useState8, useRef as useRef5, useEffect as useEffect6 } from "react";
@@ -34833,7 +34803,7 @@ var countriesWithFlags = Object.fromEntries(
 );
 
 // src/molecules/creator-discovery/SearchSpecCard/CustomFieldRenderers.tsx
-import { jsx as jsx108, jsxs as jsxs68 } from "react/jsx-runtime";
+import { jsx as jsx107, jsxs as jsxs67 } from "react/jsx-runtime";
 var CountrySelectEdit = ({
   value,
   onChange
@@ -34851,16 +34821,16 @@ var CountrySelectEdit = ({
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
   const inputValue = Array.isArray(value) ? value : [];
-  return /* @__PURE__ */ jsxs68("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs68("div", { className: "relative", ref: dropdownRef, children: [
-      /* @__PURE__ */ jsxs68(
+  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__ */ jsx108("span", { className: "text-gray-700", children: inputValue.length > 0 ? `${inputValue.length} ${inputValue.length === 1 ? "country" : "countries"} selected` : "Select countries..." }),
-            /* @__PURE__ */ jsx108(
+            /* @__PURE__ */ jsx107("span", { className: "text-gray-700", children: inputValue.length > 0 ? `${inputValue.length} ${inputValue.length === 1 ? "country" : "countries"} selected` : "Select countries..." }),
+            /* @__PURE__ */ jsx107(
               ChevronDown,
               {
                 className: cn(
@@ -34872,8 +34842,8 @@ var CountrySelectEdit = ({
           ]
         }
       ),
-      isDropdownOpen && /* @__PURE__ */ jsxs68("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__ */ jsx108("div", { className: "p-2 border-b border-gray-100", children: /* @__PURE__ */ jsx108(
+      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__ */ jsx107("div", { className: "p-2 border-b border-gray-100", children: /* @__PURE__ */ jsx107(
           "input",
           {
             type: "text",
@@ -34884,9 +34854,9 @@ var CountrySelectEdit = ({
             onClick: (e) => e.stopPropagation()
           }
         ) }),
-        /* @__PURE__ */ jsx108("div", { className: "max-h-40 overflow-y-auto p-1", children: countries.filter(
+        /* @__PURE__ */ jsx107("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__ */ jsxs68(
+        ).map((country) => /* @__PURE__ */ jsxs67(
           "div",
           {
             className: cn(
@@ -34907,31 +34877,31 @@ var CountrySelectEdit = ({
               }
             },
             children: [
-              /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ jsx108("span", { className: "text-sm text-gray-700", children: country.name }),
-                /* @__PURE__ */ jsx108("span", { className: "text-xs text-gray-400 font-mono", children: country.code })
+              /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx107("span", { className: "text-sm text-gray-700", children: country.name }),
+                /* @__PURE__ */ jsx107("span", { className: "text-xs text-gray-400 font-mono", children: country.code })
               ] }),
-              inputValue.includes(country.code) && /* @__PURE__ */ jsx108(Check, { className: "h-4 w-4 text-purple500" })
+              inputValue.includes(country.code) && /* @__PURE__ */ jsx107(Check, { className: "h-4 w-4 text-purple500" })
             ]
           },
           country.code
         )) })
       ] })
     ] }),
-    inputValue.length > 0 && /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-1.5", children: inputValue.map((countryCode) => /* @__PURE__ */ jsxs68(
+    inputValue.length > 0 && /* @__PURE__ */ jsx107("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__ */ jsxs68(
+          /* @__PURE__ */ jsxs67(
             "button",
             {
               onClick: () => onChange(inputValue.filter((c) => c !== countryCode)),
               className: "hover:bg-purple200 rounded-full p-0.5 transition-colors",
               children: [
-                /* @__PURE__ */ jsx108(ChevronDown, { className: "h-3 w-3 rotate-45" }),
+                /* @__PURE__ */ jsx107(ChevronDown, { className: "h-3 w-3 rotate-45" }),
                 " "
               ]
             }
@@ -34944,9 +34914,9 @@ var CountrySelectEdit = ({
 };
 var CountrySelectDisplay = ({ value }) => {
   if (!value || !Array.isArray(value) || value.length === 0) {
-    return /* @__PURE__ */ jsx108("span", { className: "text-muted-foreground italic", children: "Not specified" });
+    return /* @__PURE__ */ jsx107("span", { className: "text-muted-foreground italic", children: "Not specified" });
   }
-  return /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-1.5", children: value.map((countryCode) => /* @__PURE__ */ jsx108(
+  return /* @__PURE__ */ jsx107("div", { className: "flex flex-wrap gap-1.5", children: value.map((countryCode) => /* @__PURE__ */ jsx107(
     Badge2,
     {
       variant: "outline",
@@ -34968,22 +34938,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__ */ jsx108("div", { className: "space-y-6 pt-2", children: sortedPriorities.map((priority) => /* @__PURE__ */ jsxs68("div", { className: "space-y-3", children: [
-    /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs68(Badge2, { className: "bg-purple500 hover:bg-purple500", children: [
+  return /* @__PURE__ */ jsx107("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__ */ jsx108("div", { className: "h-px flex-1 bg-gray-100" })
+      /* @__PURE__ */ jsx107("div", { className: "h-px flex-1 bg-gray-100" })
     ] }),
-    groups[priority].map(({ bundle, index: bundleIndex }) => /* @__PURE__ */ jsx108(
+    groups[priority].map(({ bundle, index: bundleIndex }) => /* @__PURE__ */ jsx107(
       "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__ */ jsxs68("div", { className: "flex flex-col gap-3", children: [
-          /* @__PURE__ */ jsx108("label", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1", children: "Keywords" }),
-          /* @__PURE__ */ jsxs68("div", { className: "space-y-3", children: [
-            /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-1.5", children: Array.isArray(bundle.keywords) && bundle.keywords.map((keyword, kIndex) => /* @__PURE__ */ jsxs68(
+        children: /* @__PURE__ */ jsxs67("div", { className: "flex flex-col gap-3", children: [
+          /* @__PURE__ */ jsx107("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__ */ jsx107("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",
@@ -34999,12 +34969,12 @@ var KeywordBundlesEdit = ({
                 },
                 children: [
                   keyword,
-                  /* @__PURE__ */ jsx108("span", { className: "ml-1 opacity-0 group-hover:opacity-100 transition-opacity", children: "\xD7" })
+                  /* @__PURE__ */ jsx107("span", { className: "ml-1 opacity-0 group-hover:opacity-100 transition-opacity", children: "\xD7" })
                 ]
               },
               kIndex
             )) }),
-            /* @__PURE__ */ jsx108("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx108(
+            /* @__PURE__ */ jsx107("div", { className: "flex gap-2", children: /* @__PURE__ */ jsx107(
               "input",
               {
                 type: "text",
@@ -35028,9 +34998,9 @@ var KeywordBundlesEdit = ({
               }
             ) })
           ] }),
-          /* @__PURE__ */ jsxs68("div", { className: "flex flex-col gap-1.5 mt-1", children: [
-            /* @__PURE__ */ jsx108("label", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1", children: "Priority Level (1-5)" }),
-            /* @__PURE__ */ jsx108(
+          /* @__PURE__ */ jsxs67("div", { className: "flex flex-col gap-1.5 mt-1", children: [
+            /* @__PURE__ */ jsx107("label", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1", children: "Priority Level (1-5)" }),
+            /* @__PURE__ */ jsx107(
               "input",
               {
                 type: "number",
@@ -35058,7 +35028,7 @@ var KeywordBundlesEdit = ({
 var KeywordBundlesDisplay = ({ value }) => {
   const bundles = Array.isArray(value) ? value : [];
   if (bundles.length === 0)
-    return /* @__PURE__ */ jsx108("span", { className: "text-gray-500 italic text-sm", children: "Not specified" });
+    return /* @__PURE__ */ jsx107("span", { className: "text-gray-500 italic text-sm", children: "Not specified" });
   const groups = {};
   bundles.forEach((b) => {
     const p = Number(b?.priority) || 1;
@@ -35067,17 +35037,17 @@ var KeywordBundlesDisplay = ({ value }) => {
     groups[p].push(...keywords);
   });
   const sortedPriorities = Object.keys(groups).map((n) => parseInt(n)).sort((a, b) => a - b);
-  return /* @__PURE__ */ jsx108("div", { className: "space-y-4 pt-2", children: sortedPriorities.map((priority) => {
+  return /* @__PURE__ */ jsx107("div", { className: "space-y-4 pt-2", children: sortedPriorities.map((priority) => {
     const deduped = Array.from(new Set(groups[priority]));
-    return /* @__PURE__ */ jsxs68("div", { className: "space-y-2", children: [
-      /* @__PURE__ */ jsxs68("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs68("span", { className: "text-[10px] uppercase tracking-widest text-purple-400 font-bold", children: [
+    return /* @__PURE__ */ jsxs67("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs67("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs67("span", { className: "text-[10px] uppercase tracking-widest text-purple-400 font-bold", children: [
           "Priority ",
           priority
         ] }),
-        /* @__PURE__ */ jsx108("div", { className: "h-[1px] flex-1 bg-white/10" })
+        /* @__PURE__ */ jsx107("div", { className: "h-[1px] flex-1 bg-white/10" })
       ] }),
-      /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-2", children: deduped.map((keyword) => /* @__PURE__ */ jsx108(
+      /* @__PURE__ */ jsx107("div", { className: "flex flex-wrap gap-2", children: deduped.map((keyword) => /* @__PURE__ */ jsx107(
         "div",
         {
           className: "px-2 py-1 rounded bg-[#1A1A1A] border border-white/10 text-gray-300 text-xs font-medium",
@@ -35089,6 +35059,98 @@ var KeywordBundlesDisplay = ({ value }) => {
   }) });
 };
 
+// src/molecules/creator-discovery/SearchSpecCard/SearchSpecCard.tsx
+import { jsx as jsx108, jsxs as jsxs68 } from "react/jsx-runtime";
+var ObjectDisplay = ({ value }) => {
+  if (!value || typeof value !== "object") return null;
+  return /* @__PURE__ */ jsx108("div", { className: "space-y-1 pt-1", children: Object.entries(value).map(([k, v]) => /* @__PURE__ */ jsxs68("div", { className: "flex gap-2 text-sm", children: [
+    /* @__PURE__ */ jsxs68("span", { className: "text-muted-foreground capitalize min-w-[120px]", children: [
+      k.replace(/_/g, " "),
+      ":"
+    ] }),
+    /* @__PURE__ */ jsx108("span", { className: "text-foreground font-medium", children: Array.isArray(v) ? v.join(", ") : String(v) })
+  ] }, k)) });
+};
+var StringArrayDisplay = ({ value }) => {
+  if (!Array.isArray(value) || value.length === 0)
+    return /* @__PURE__ */ jsx108("span", { className: "text-muted-foreground italic text-sm", children: "Not specified" });
+  return /* @__PURE__ */ jsx108("div", { className: "flex flex-wrap gap-1.5 pt-1", children: value.map((item) => /* @__PURE__ */ jsx108(Badge2, { variant: "outline", className: "text-xs", children: item }, item)) });
+};
+function buildSearchSpecFields(data) {
+  if (!data || typeof data !== "object") return [];
+  return Object.keys(data).map((key) => {
+    const value = data[key];
+    if (key === "keyword_bundles") {
+      return {
+        key,
+        label: "Keyword Bundles",
+        type: "custom",
+        renderDisplay: (v) => /* @__PURE__ */ jsx108(KeywordBundlesDisplay, { value: v }),
+        renderEdit: (v, onChange) => /* @__PURE__ */ jsx108(KeywordBundlesEdit, { value: v, onChange })
+      };
+    }
+    if (key === "geography") {
+      return {
+        key,
+        label: "Geography",
+        type: "custom",
+        renderDisplay: (v) => /* @__PURE__ */ jsx108(CountrySelectDisplay, { value: v }),
+        renderEdit: (v, onChange) => /* @__PURE__ */ jsx108(CountrySelectEdit, { value: v, onChange })
+      };
+    }
+    if (key === "platforms" && Array.isArray(value)) {
+      return {
+        key,
+        label: "Platforms",
+        type: "custom",
+        renderDisplay: (v) => /* @__PURE__ */ jsx108(StringArrayDisplay, { value: v })
+      };
+    }
+    if (typeof value === "object" && value !== null && !Array.isArray(value) && !("min" in value && "max" in value)) {
+      const label = key.split("_").map((w) => w.charAt(0).toUpperCase() + w.slice(1)).join(" ");
+      return {
+        key,
+        label,
+        type: "custom",
+        renderDisplay: (v) => /* @__PURE__ */ jsx108(ObjectDisplay, { value: v })
+      };
+    }
+    const [generated] = generateFieldsFromData({ [key]: value });
+    return generated;
+  });
+}
+var SearchSpecCard = React91.memo(
+  ({
+    selectionStatus,
+    isLatestMessage = true,
+    className,
+    fields: providedFields,
+    data,
+    specData,
+    ...formCardProps
+  }) => {
+    const resolvedData = data || specData;
+    const fields = useMemo5(() => {
+      return providedFields || buildSearchSpecFields(resolvedData ?? {});
+    }, [providedFields, resolvedData]);
+    return /* @__PURE__ */ jsx108(
+      FormCard,
+      {
+        ...formCardProps,
+        data: resolvedData ?? {},
+        title: formCardProps.title || "Search Specification",
+        fields,
+        className,
+        footer: !isLatestMessage && selectionStatus ? /* @__PURE__ */ jsxs68("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
+          /* @__PURE__ */ jsx108(CircleCheck, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx108("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by User" })
+        ] }) : formCardProps.footer
+      }
+    );
+  }
+);
+SearchSpecCard.displayName = "SearchSpecCard";
+
 // src/molecules/creator-discovery/MCQCard/MCQCard.tsx
 import React92 from "react";
 import { jsx as jsx109, jsxs as jsxs69 } from "react/jsx-runtime";
@@ -35108,15 +35170,17 @@ var MCQCard = React92.memo(
     disabled = false
   }) => {
     const [selectedOption, setSelectedOption] = React92.useState(propsSelectedOption);
+    const [isProceeded, setIsProceeded] = React92.useState(false);
     React92.useEffect(() => {
       if (propsSelectedOption) {
         setSelectedOption(propsSelectedOption);
+        setIsProceeded(true);
       }
     }, [propsSelectedOption]);
     const handleOptionClick = (key, e) => {
       e.preventDefault();
       e.stopPropagation();
-      if (isLatestMessage && !isLoading && !disabled) {
+      if (isLatestMessage && !isLoading && !disabled && !isProceeded) {
         setSelectedOption(key);
         onSelect?.(key);
       }
@@ -35124,8 +35188,9 @@ var MCQCard = React92.memo(
     const handleProceed = (e) => {
       e.preventDefault();
       e.stopPropagation();
-      if ((selectedOption || recommended) && !disabled) {
+      if ((selectedOption || recommended) && !disabled && !isProceeded) {
         const result = selectedOption || recommended || "";
+        setIsProceeded(true);
         onProceed?.(result);
         onAction?.({
           type: "mcq_selection",
@@ -35134,7 +35199,7 @@ var MCQCard = React92.memo(
         });
       }
     };
-    const isInteractionDisabled = disabled || !isLatestMessage;
+    const isInteractionDisabled = disabled || !isLatestMessage || isProceeded;
     return /* @__PURE__ */ jsxs69(
       "div",
       {