pxengine 0.1.31 → 0.1.33

package/dist/index.cjs

@@ -214,6 +214,8 @@ __export(index_exports, {
   PaginationNext: () => PaginationNext,
   PaginationPrevious: () => PaginationPrevious,
   PlatformIconGroup: () => PlatformIconGroup,
+  PlatformSelectDisplay: () => PlatformSelectDisplay,
+  PlatformSelectEdit: () => PlatformSelectEdit,
   Popover: () => Popover,
   PopoverAtom: () => PopoverAtom,
   PopoverContent: () => PopoverContent,
@@ -33591,6 +33593,8 @@ __export(molecules_exports, {
   MCQCard: () => MCQCard,
   NotificationList: () => NotificationList,
   PlatformIconGroup: () => PlatformIconGroup,
+  PlatformSelectDisplay: () => PlatformSelectDisplay,
+  PlatformSelectEdit: () => PlatformSelectEdit,
   SearchSpecCard: () => SearchSpecCard,
   StatsGrid: () => StatsGrid,
   StepWizard: () => StepWizard,
@@ -33932,6 +33936,9 @@ var EditableField = import_react54.default.memo(
     className,
     renderDisplay,
     renderEdit,
+    isLatestMessage,
+    shouldStopPropagation = true,
+    isChanged,
     ...rest
   }) => {
     void rest;
@@ -33963,15 +33970,14 @@ var EditableField = import_react54.default.memo(
       switch (type) {
         case "textarea":
           return /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-            Textarea,
+            Input,
             {
               ref: inputRef,
               value: localValue || "",
               onChange: (e) => setLocalValue(e.target.value),
               onKeyDown: handleKeyDown,
               placeholder: config.placeholder,
-              rows: config.rows || 3,
-              className: "min-h-[80px] resize-none bg-background dark:bg-gray100 border-gray300"
+              className: "bg-background text-foreground border border-purple-600 focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-gray600"
             }
           );
         case "select":
@@ -34024,7 +34030,7 @@ var EditableField = import_react54.default.memo(
               min: config.numberConfig?.min,
               max: config.numberConfig?.max,
               step: config.numberConfig?.step,
-              className: "bg-background dark:bg-gray100 border-gray300"
+              className: "bg-background text-foreground border border-purple-600 focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-gray600"
             }
           );
         default:
@@ -34037,7 +34043,7 @@ var EditableField = import_react54.default.memo(
               onChange: (e) => setLocalValue(e.target.value),
               onKeyDown: handleKeyDown,
               placeholder: config.placeholder,
-              className: "bg-background dark:bg-gray100 border-gray300"
+              className: "bg-background text-foreground border border-purple-600 focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-gray600"
             }
           );
       }
@@ -34064,48 +34070,58 @@ var EditableField = import_react54.default.memo(
             /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
               "h4",
               {
-                className: "px-2 py-1 tracking-widest bg-background bg-purple200 text-purpleText dark:text-purple-400 text-[10px] font-bold rounded uppercase",
+                className: "px-[6px] py-[2px] tracking-widest bg-purple200 hover:bg-purple200 text-purpleText text-xs font-normal rounded-[4px]",
                 children: label
               }
             ),
-            !isEditingProp && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "inline-flex items-center gap-1.5 text-[0.75rem] font-medium text-green-600 dark:text-green-500 bg-green-500/5 px-2 py-0.5 rounded-full ", children: [
-              "Suggested by an Agent",
+            isEditingProp ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center gap-3", children: [
               /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                "span",
+                "button",
                 {
-                  className: "flex items-center gap-1 cursor-pointer text-foreground hover:text-green-700 transition-colors ml-1 pl-1.5 ",
-                  onClick: onEdit,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(SquarePen, { className: "h-5 w-5" })
-                }
-              )
-            ] })
-          ] }) }),
-          isEditingProp ? /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex flex-col gap-3", children: [
-            renderInput(),
-            /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("div", { className: "flex items-center justify-end gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                Button,
-                {
-                  size: "icon",
-                  variant: "outline",
-                  className: "h-8 w-8 text-foreground rounded-lg",
-                  onClick: onCancel,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    onCancel?.();
+                  },
+                  className: "text-gray-500 hover:text-gray-700 transition-colors",
                   disabled: isSaving,
-                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(X, { className: "h-4 w-4" })
+                  title: "Cancel",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(X, { className: "h-5 w-5" })
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                Button,
+                "button",
                 {
-                  size: "icon",
-                  className: "h-8 w-8 text-foreground rounded-lg shadow-none",
-                  onClick: handleSave,
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleSave();
+                  },
+                  className: "text-gray600 hover:text-gray600 transition-colors",
                   disabled: isSaving,
-                  children: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Save, { className: "h-4 w-4" })
+                  title: "Save",
+                  children: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(LoaderCircle, { className: "h-5 w-5 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Save, { className: "h-5 w-5" })
+                }
+              )
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: cn(
+              "inline-flex items-center gap-1.5 text-[0.75rem] font-medium px-2 py-0.5 rounded-full",
+              isChanged ? "bg-yellow100 text-warningcolor" : "text-green-600 dark:text-green-500 bg-green-500/5"
+            ), children: [
+              isChanged ? "Changed by you" : "Suggested by an Agent",
+              isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+                "span",
+                {
+                  className: "flex items-center gap-1 cursor-pointer text-foreground hover:text-green-700 transition-colors ml-1 pl-1.5 ",
+                  onClick: (e) => {
+                    if (shouldStopPropagation !== false) {
+                      e.stopPropagation();
+                    }
+                    onEdit?.();
+                  },
+                  children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(SquarePen, { className: "h-5 w-5" })
                 }
               )
             ] })
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
+          ] }) }),
+          isEditingProp ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex flex-col gap-3", children: renderInput() }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
             "div",
             {
               className: cn(
@@ -34236,35 +34252,56 @@ var FormCard = import_react56.default.memo(
     hideTitle = false,
     hideCopyButton = false,
     className,
-    footer
+    footer,
+    shouldStopPropagation = true
   }) => {
     const [copied, setCopied] = (0, import_react56.useState)(false);
     const [internalEditingFields, setInternalEditingFields] = (0, import_react56.useState)({});
+    const [internalSavingFields, setInternalSavingFields] = (0, import_react56.useState)({});
     const [internalData, setInternalData] = (0, import_react56.useState)(data);
+    const [userEditedFields, setUserEditedFields] = (0, import_react56.useState)({});
     import_react56.default.useEffect(() => {
-      setInternalData(data);
-    }, [data]);
-    const isExternallyControlled = !!(externalOnFieldEdit || externalOnFieldSave || externalOnFieldCancel);
-    const editingFields = isExternallyControlled ? externalEditingFields || {} : internalEditingFields;
-    const activeData = isExternallyControlled ? data : internalData;
+      setInternalData((prev) => {
+        const newData = { ...data };
+        Object.keys(userEditedFields).forEach((key) => {
+          if (userEditedFields[key] && prev[key] !== void 0) {
+            newData[key] = prev[key];
+          }
+        });
+        return newData;
+      });
+    }, [data, userEditedFields]);
+    const isExternallyControlled = !!externalOnFieldEdit;
+    const activeEditingFields = isExternallyControlled ? externalEditingFields || {} : internalEditingFields;
+    const resolvedSavingFields = Object.keys(savingFields).length > 0 ? savingFields : internalSavingFields;
+    const activeData = internalData;
     const handleFieldEdit = (key) => {
-      if (isExternallyControlled) {
-        externalOnFieldEdit?.(key);
+      if (externalOnFieldEdit) {
+        externalOnFieldEdit(key);
       } else {
         setInternalEditingFields((prev) => ({ ...prev, [key]: true }));
       }
     };
-    const handleFieldSave = (key, newValue) => {
-      if (isExternallyControlled) {
-        externalOnFieldSave?.(key, newValue);
+    const handleFieldSave = async (key, newValue) => {
+      setInternalData((prev) => ({ ...prev, [key]: newValue }));
+      setUserEditedFields((prev) => ({ ...prev, [key]: true }));
+      if (externalOnFieldSave) {
+        setInternalSavingFields((prev) => ({ ...prev, [key]: true }));
+        try {
+          await externalOnFieldSave(key, newValue);
+        } finally {
+          setInternalSavingFields((prev) => ({ ...prev, [key]: false }));
+          setInternalEditingFields((prev) => ({ ...prev, [key]: false }));
+        }
       } else {
-        setInternalData((prev) => ({ ...prev, [key]: newValue }));
         setInternalEditingFields((prev) => ({ ...prev, [key]: false }));
       }
     };
     const handleFieldCancel = (key) => {
-      if (isExternallyControlled) {
-        externalOnFieldCancel?.(key);
+      setInternalData((prev) => ({ ...prev, [key]: data[key] }));
+      setUserEditedFields((prev) => ({ ...prev, [key]: false }));
+      if (externalOnFieldCancel) {
+        externalOnFieldCancel(key);
       } else {
         setInternalEditingFields((prev) => ({ ...prev, [key]: false }));
       }
@@ -34342,10 +34379,11 @@ var FormCard = import_react56.default.memo(
                 value: activeData[field.key],
                 type: field.type,
                 config: field,
-                isEditing: editingFields[field.key],
-                isChanged: changedFields[field.key],
-                isSaving: savingFields[field.key],
+                isEditing: activeEditingFields[field.key],
+                isChanged: changedFields[field.key] || userEditedFields[field.key],
+                isSaving: resolvedSavingFields[field.key],
                 isLatestMessage,
+                shouldStopPropagation,
                 onEdit: () => handleFieldEdit(field.key),
                 onSave: (val) => handleFieldSave(field.key, val),
                 onCancel: () => handleFieldCancel(field.key),
@@ -35109,16 +35147,25 @@ var CountrySelectEdit = ({
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  const inputValue = Array.isArray(value) ? value : [];
+  const inputValue = (0, import_react59.useMemo)(() => {
+    if (Array.isArray(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") {
+      const foundCountry = countries.find(
+        (c) => c.name.toLowerCase() === value.toLowerCase() || c.code.toLowerCase() === value.toLowerCase()
+      );
+      return foundCountry ? [foundCountry.code] : [value];
+    }
+    return [];
+  }, [value]);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "space-y-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative", ref: dropdownRef, children: [
       /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
         "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",
+          className: "flex-1 bg-background border border-border 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__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-gray-700", children: inputValue.length > 0 ? `${inputValue.length} ${inputValue.length === 1 ? "country" : "countries"} selected` : "Select countries..." }),
+            /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-foreground", children: inputValue.length > 0 ? `${inputValue.length} ${inputValue.length === 1 ? "country" : "countries"} selected` : "Select countries..." }),
             /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
               ChevronDown,
               {
@@ -35131,15 +35178,15 @@ var CountrySelectEdit = ({
           ]
         }
       ),
-      isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("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__ */ (0, import_jsx_runtime106.jsx)("div", { className: "p-2 border-b border-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      isDropdownOpen && /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "relative z-10 top-full left-0 right-0 mt-1 bg-background border border-border rounded-lg shadow-xl z-50 max-h-60 overflow-hidden animate-in fade-in slide-in-from-top-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "p-2 border-b border-border", children: /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
           "input",
           {
             type: "text",
             placeholder: "Search countries...",
             value: searchTerm,
             onChange: (e) => setSearchTerm(e.target.value),
-            className: "w-full px-3 py-1.5 text-sm border border-gray-100 rounded-md bg-gray-50 focus:outline-none focus:ring-2 focus:ring-purple500/20 focus:border-purple500",
+            className: "w-full px-3 py-1.5 text-foreground text-sm border border-border rounded-md bg-background focus:outline-none focus:ring-2 focus:ring-purple500/20 focus:border-purple500",
             onClick: (e) => e.stopPropagation()
           }
         ) }),
@@ -35167,8 +35214,8 @@ var CountrySelectEdit = ({
             },
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-sm text-gray-700", children: country.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-gray-400 font-mono", children: country.code })
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-sm text-foreground", children: country.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-xs text-muted-foreground font-mono", children: country.code })
               ] }),
               inputValue.includes(country.code) && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Check, { className: "h-4 w-4 text-purple500" })
             ]
@@ -35180,8 +35227,7 @@ var CountrySelectEdit = ({
     inputValue.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-1.5", children: inputValue.map((countryCode) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
       Badge2,
       {
-        variant: "secondary",
-        className: "bg-purple50 text-purple700 border-purple100 hover:bg-purple100 cursor-default flex items-center gap-1 pr-1",
+        className: "flex items-center gap-1 px-2 py-1 bg-grayPill border border-foreground rounded-md text-white text-sm font-grotesk font-medium",
         children: [
           countryCode,
           /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
@@ -35190,7 +35236,7 @@ var CountrySelectEdit = ({
               onClick: () => onChange(inputValue.filter((c) => c !== countryCode)),
               className: "hover:bg-purple200 rounded-full p-0.5 transition-colors",
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(ChevronDown, { className: "h-3 w-3 rotate-45" }),
+                /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(X, { className: "h-3 w-3" }),
                 " "
               ]
             }
@@ -35202,38 +35248,59 @@ var CountrySelectEdit = ({
   ] });
 };
 var CountrySelectDisplay = ({ value }) => {
-  if (!value || !Array.isArray(value) || value.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-muted-foreground italic", children: "Not specified" });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-1.5", children: value.map((countryCode) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
-    Badge2,
-    {
-      variant: "outline",
-      className: "text-foreground border-gray-200 py-1",
-      children: countryCode
-    },
-    countryCode
-  )) });
+  const displayValues = (0, import_react59.useMemo)(() => {
+    if (Array.isArray(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") return [value];
+    return [];
+  }, [value]);
+  if (displayValues.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-muted-foreground italic text-sm", children: "Not specified" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: displayValues.map((item) => {
+    const country = countries.find(
+      (c) => c.code.toLowerCase() === item.toLowerCase() || c.name.toLowerCase() === item.toLowerCase()
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      "div",
+      {
+        className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-foreground rounded-md text-foreground text-sm font-grotesk font-medium",
+        children: country ? country.name : item
+      },
+      item
+    );
+  }) });
 };
 var KeywordBundlesEdit = ({
   value,
   onChange
 }) => {
   const bundles = Array.isArray(value) ? value : [];
+  const parseKeywords = (v) => {
+    if (Array.isArray(v)) return v;
+    if (typeof v === "string") return v.split(",").map((s) => s.trim()).filter(Boolean);
+    return [];
+  };
   const groups = {};
   bundles.forEach((b, idx) => {
-    const p = Number(b?.priority) || 1;
+    const p = Number(b?.priority) || idx + 1;
     if (!groups[p]) groups[p] = [];
-    groups[p].push({ bundle: b, index: idx });
+    groups[p].push({
+      bundle: {
+        ...b,
+        keywords: parseKeywords(b?.keywords),
+        priority: p
+      },
+      index: idx
+    });
   });
   const sortedPriorities = Object.keys(groups).map((n) => parseInt(n)).sort((a, b) => a - b);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "space-y-6 pt-2", children: sortedPriorities.map((priority) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "space-y-3", children: [
     /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(Badge2, { className: "bg-purple500 hover:bg-purple500 py-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "inline-block px-3 py-1 bg-purple200 hover:bg-purple200 text-purpleText text-sm font-medium rounded-md uppercase", children: [
         "Priority ",
         priority
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "h-px flex-1 bg-gray-100" })
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "h-px flex-1 bg-white/10" })
     ] }),
     groups[priority].map(({ bundle, index: bundleIndex }) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
       "div",
@@ -35243,14 +35310,15 @@ var KeywordBundlesEdit = ({
           /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("label", { className: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1", children: "Keywords" }),
           /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "space-y-3", children: [
             /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-1.5", children: Array.isArray(bundle.keywords) && bundle.keywords.map((keyword, kIndex) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
-              Badge2,
+              "div",
               {
-                className: "bg-white py-1 border-gray-200 text-gray-700 hover:bg-red-50 hover:text-red-600 hover:border-red-100 transition-all cursor-pointer group",
+                className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-white rounded-md text-white text-sm font-medium hover:bg-red-900/40 hover:border-red-500 transition-all cursor-pointer group",
                 onClick: () => {
                   const updatedBundles = [...bundles];
+                  const currentKeywords = parseKeywords(updatedBundles[bundleIndex].keywords);
                   updatedBundles[bundleIndex] = {
-                    ...bundle,
-                    keywords: bundle.keywords.filter(
+                    ...updatedBundles[bundleIndex],
+                    keywords: currentKeywords.filter(
                       (_, i) => i !== kIndex
                     )
                   };
@@ -35258,7 +35326,7 @@ var KeywordBundlesEdit = ({
                 },
                 children: [
                   keyword,
-                  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "ml-1 opacity-0 group-hover:opacity-100 transition-opacity", children: "\xD7" })
+                  /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "ml-1 opacity-60 group-hover:opacity-100 transition-opacity", children: "\xD7" })
                 ]
               },
               kIndex
@@ -35268,7 +35336,7 @@ var KeywordBundlesEdit = ({
               {
                 type: "text",
                 placeholder: "Add keyword...",
-                className: "flex-1 px-3 py-1.5 text-sm border border-gray-200 rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500",
+                className: "flex-1 px-3 py-1.5 text-sm border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-purple-500/20 focus:border-purple500",
                 onKeyPress: (e) => {
                   if (e.key === "Enter") {
                     const input = e.target;
@@ -35304,7 +35372,7 @@ var KeywordBundlesEdit = ({
                   };
                   onChange(updatedBundles);
                 },
-                className: "w-20 px-3 py-1.5 text-sm border border-gray-200 rounded-md bg-white focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 outline-none"
+                className: "w-20 px-3 py-1.5 text-sm border border-border rounded-md bg-background text-foreground focus:ring-2 focus:ring-purple-500/20 focus:border-purple-500 outline-none"
               }
             )
           ] })
@@ -35319,27 +35387,31 @@ var KeywordBundlesDisplay = ({ value }) => {
   if (bundles.length === 0)
     return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-gray-500 italic text-sm", children: "Not specified" });
   const groups = {};
-  bundles.forEach((b) => {
-    const p = Number(b?.priority) || 1;
-    const keywords = Array.isArray(b?.keywords) ? b.keywords : [];
+  bundles.forEach((b, idx) => {
+    const p = Number(b?.priority) || idx + 1;
+    let keywords = b?.keywords || [];
+    if (typeof keywords === "string") {
+      keywords = keywords.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    if (!Array.isArray(keywords)) keywords = [];
     if (!groups[p]) groups[p] = [];
     groups[p].push(...keywords);
   });
   const sortedPriorities = Object.keys(groups).map((n) => parseInt(n)).sort((a, b) => a - b);
   return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "space-y-4 pt-2", children: sortedPriorities.map((priority) => {
     const deduped = Array.from(new Set(groups[priority]));
-    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "space-y-2", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "space-y-3", children: [
       /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("span", { className: "text-[10px] uppercase tracking-widest text-purple-400 font-bold", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)("div", { className: "inline-block px-3 py-1 bg-purple200 hover:bg-purple200 text-purpleText text-sm font-medium rounded-md uppercase", children: [
           "Priority ",
           priority
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "h-[1px] flex-1 bg-white/10" })
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "h-px flex-1 bg-white/10" })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-2", children: deduped.map((keyword) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: deduped.map((keyword) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         "div",
         {
-          className: "px-2 py-1 rounded bg-background border text-gray-300 text-sm font-medium py-1",
+          className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-white rounded-md text-white text-sm font-medium",
           children: keyword
         },
         keyword
@@ -35347,6 +35419,75 @@ var KeywordBundlesDisplay = ({ value }) => {
     ] }, priority);
   }) });
 };
+var DEFAULT_PLATFORMS = ["Instagram", "YouTube", "TikTok"];
+var PlatformSelectEdit = ({
+  value,
+  onChange
+}) => {
+  const selectedPlatforms = (0, import_react59.useMemo)(() => {
+    if (Array.isArray(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") {
+      return value.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+  }, [value]);
+  const isSelected = (p) => selectedPlatforms.some((s) => s.toLowerCase() === p.toLowerCase());
+  const togglePlatform = (platform) => {
+    if (isSelected(platform)) {
+      onChange(
+        selectedPlatforms.filter(
+          (p) => p.toLowerCase() !== platform.toLowerCase()
+        )
+      );
+    } else {
+      onChange([...selectedPlatforms, platform]);
+    }
+  };
+  const options = (0, import_react59.useMemo)(() => {
+    return DEFAULT_PLATFORMS;
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-4 py-2", children: options.map((platform) => /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(
+    "label",
+    {
+      className: "flex items-center gap-2 cursor-pointer group",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+          "div",
+          {
+            className: cn(
+              "w-5 h-5 rounded flex items-center justify-center border-2 transition-all",
+              isSelected(platform) ? "bg-purple-600 border-purple-600" : "border-gray-300 group-hover:border-purple-400"
+            ),
+            onClick: () => togglePlatform(platform),
+            children: isSelected(platform) && /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(Check, { className: "h-3.5 w-3.5 text-white stroke-[3]" })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-sm font-medium text-foreground select-none", children: platform })
+      ]
+    },
+    platform
+  )) });
+};
+var PlatformSelectDisplay = ({ value }) => {
+  const displayValues = (0, import_react59.useMemo)(() => {
+    if (Array.isArray(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") {
+      return value.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+  }, [value]);
+  if (displayValues.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("span", { className: "text-muted-foreground italic text-sm", children: "Not specified" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: displayValues.map((platform) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
+    "div",
+    {
+      className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-foreground rounded-md text-foreground text-sm font-grotesk font-medium",
+      children: platform
+    },
+    platform
+  )) });
+};
 
 // src/molecules/creator-discovery/CampaignSeedCard/CampaignSeedCard.tsx
 var import_jsx_runtime107 = require("react/jsx-runtime");
@@ -35363,7 +35504,14 @@ var ObjectDisplay = ({ value }) => {
 var StringArrayDisplay = ({ value }) => {
   if (!Array.isArray(value) || value.length === 0)
     return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "text-muted-foreground italic text-sm", children: "Not specified" });
-  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: value.map((item) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Badge2, { variant: "outline", className: "text-sm border-gray-200 py-1", children: item }, item)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: value.map((item) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+    "div",
+    {
+      className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-foreground rounded-md text-foreground text-sm font-grotesk font-medium",
+      children: item
+    },
+    item
+  )) });
 };
 function buildCampaignSeedFields(data) {
   if (!data || typeof data !== "object") return [];
@@ -35397,7 +35545,7 @@ function buildCampaignSeedFields(data) {
               onChange(bundles);
             },
             placeholder: "Keyword 1, Keyword 2 (Priority: 1)...",
-            className: "min-h-[120px] bg-background border-gray-300"
+            className: "min-h-[120px] bg-background text-foreground border-gray-300"
           }
         )
       };
@@ -35408,49 +35556,20 @@ function buildCampaignSeedFields(data) {
         label: "Geography",
         type: "custom",
         renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CountrySelectDisplay, { value: v }),
-        renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
-          Textarea,
-          {
-            value: Array.isArray(v) ? v.join(", ") : String(v || ""),
-            onChange: (e) => {
-              const items = e.target.value.split(",").map((s) => s.trim().toUpperCase()).filter(Boolean);
-              onChange(items);
-            },
-            placeholder: "Enter country codes (US, GB, PK) separated by commas...",
-            className: "min-h-[80px] bg-background border-gray-300"
-          }
-        )
+        renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CountrySelectEdit, { value: v, onChange })
       };
     }
-    if (key === "platforms" && Array.isArray(value)) {
+    if (key === "platforms" || key === "target_platforms" || key === "targetPlatforms") {
       return {
         key,
         label: "Platforms",
         type: "custom",
-        renderDisplay: (v) => {
-          const platforms = Array.isArray(v) ? v : [v];
-          return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("div", { className: "flex flex-wrap gap-2", children: platforms.map((p) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
-            BadgeAtom,
-            {
-              id: `platform-${p}`,
-              type: "badge",
-              label: p,
-              variant: "outline",
-              className: "bg-background bg-purple200 border-gray400 text-white font-medium"
-            },
-            p
-          )) });
-        },
+        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(PlatformSelectDisplay, { value: v }),
         renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
-          Textarea,
+          PlatformSelectEdit,
           {
-            value: Array.isArray(v) ? v.join(", ") : String(v || ""),
-            onChange: (e) => {
-              const items = e.target.value.split(",").map((s) => s.trim()).filter(Boolean);
-              onChange(items);
-            },
-            placeholder: "Enter platforms separated by commas...",
-            className: "min-h-[80px] bg-background border-gray-300"
+            value: v,
+            onChange
           }
         )
       };
@@ -35472,9 +35591,9 @@ function buildCampaignSeedFields(data) {
         type: "custom",
         renderDisplay: (v) => {
           if (typeof v === "object" && v !== null) {
-            return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "text-white font-medium", children: `${v.min?.toLocaleString()} - ${v.max?.toLocaleString()}` });
+            return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "text-foreground font-medium", children: `${v.min?.toLocaleString()} - ${v.max?.toLocaleString()}` });
           }
-          return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "text-white font-medium", children: v });
+          return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "text-foreground font-medium", children: v });
         }
       };
     }
@@ -35501,7 +35620,7 @@ function buildCampaignSeedFields(data) {
               onChange(newObj);
             },
             placeholder: "Enter key: value pairs (one per line)...",
-            className: "min-h-[120px] bg-background border-gray-300 font-mono text-xs"
+            className: "min-h-[120px] bg-background text-foreground border-gray-300 font-mono text-xs"
           }
         )
       };
@@ -35570,7 +35689,14 @@ var ObjectDisplay2 = ({ value }) => {
 var StringArrayDisplay2 = ({ value }) => {
   if (!Array.isArray(value) || value.length === 0)
     return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { className: "text-muted-foreground italic text-sm", children: "Not specified" });
-  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: value.map((item) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(Badge2, { variant: "outline", className: "text-sm border-gray-200 py-1", children: item }, item)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: value.map((item) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    "div",
+    {
+      className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-foreground rounded-md text-foreground text-sm font-grotesk font-medium",
+      children: item
+    },
+    item
+  )) });
 };
 function buildSearchSpecFields(data) {
   if (!data || typeof data !== "object") return [];
@@ -35594,11 +35720,28 @@ function buildSearchSpecFields(data) {
         renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(CountrySelectEdit, { value: v, onChange })
       };
     }
-    if ((key === "platforms" || key === "exclude_keywords" || key === "excludeKeywords") && Array.isArray(value)) {
-      const label = key === "platforms" ? "Platforms" : "Exclude Keywords";
+    if (key === "platforms" && Array.isArray(value)) {
       return {
         key,
-        label,
+        label: "Platforms",
+        type: "custom",
+        config: {
+          options: data.platform_options || data.available_platforms || data.platforms_list || []
+        },
+        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(PlatformSelectDisplay, { value: v }),
+        renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+          PlatformSelectEdit,
+          {
+            value: v,
+            onChange
+          }
+        )
+      };
+    }
+    if ((key === "exclude_keywords" || key === "excludeKeywords") && Array.isArray(value)) {
+      return {
+        key,
+        label: "Exclude Keywords",
         type: "custom",
         renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(StringArrayDisplay2, { value: v }),
         renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
@@ -35609,8 +35752,8 @@ function buildSearchSpecFields(data) {
               const items = e.target.value.split(",").map((s) => s.trim()).filter(Boolean);
               onChange(items);
             },
-            placeholder: `Enter ${label.toLowerCase()} separated by commas...`,
-            className: "min-h-[100px] bg-background border-gray-300"
+            placeholder: "Enter exclude keywords separated by commas...",
+            className: "min-h-[100px] bg-background text-foreground border-gray-300"
           }
         )
       };
@@ -35638,7 +35781,7 @@ function buildSearchSpecFields(data) {
               onChange(newObj);
             },
             placeholder: "Enter key: value pairs (one per line)...",
-            className: "min-h-[120px] bg-background border-gray-300 font-mono text-xs"
+            className: "min-h-[120px] bg-background text-foreground border-gray-300 font-mono text-xs"
           }
         )
       };
@@ -36397,6 +36540,7 @@ var import_framer_motion = require("framer-motion");
 var import_jsx_runtime121 = require("react/jsx-runtime");
 var CampaignConceptCard = import_react64.default.memo(
   ({
+    index,
     isRecommended,
     isOpen: controlledIsOpen,
     onToggle,
@@ -36411,7 +36555,6 @@ var CampaignConceptCard = import_react64.default.memo(
     ...formCardProps
   }) => {
     const [internalIsOpen, setInternalIsOpen] = (0, import_react64.useState)(false);
-    const [copied, setCopied] = (0, import_react64.useState)(false);
     const isOpen = controlledIsOpen !== void 0 ? controlledIsOpen : internalIsOpen;
     const handleToggle = () => {
       if (onToggle) {
@@ -36422,35 +36565,6 @@ var CampaignConceptCard = import_react64.default.memo(
     };
     const cardTitle = propsTitle || data.title || data.name || data.concept_name || data.conceptName || "Campaign Concept";
     const isSelected = selectionStatus != null;
-    const flattenValue = (val) => {
-      if (val === null || val === void 0) return "-";
-      if (Array.isArray(val)) {
-        return val.map((item) => {
-          if (typeof item === "object" && item !== null) {
-            return item.label || item.value || item.name || JSON.stringify(item);
-          }
-          return String(item);
-        }).join(", ");
-      }
-      if (typeof val === "object") {
-        return Object.entries(val).map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`).join(", ");
-      }
-      return String(val);
-    };
-    const handleCopyAll = (e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      const allFields = providedFields || generateFieldsFromData(data);
-      const lines = [
-        typeof cardTitle === "string" ? cardTitle : JSON.stringify(cardTitle),
-        "",
-        ...allFields.map((f) => `${f.label}: ${flattenValue(data[f.key])}`)
-      ];
-      navigator.clipboard.writeText(lines.join("\n")).then(() => {
-        setCopied(true);
-        setTimeout(() => setCopied(false), 2e3);
-      });
-    };
     const handleProceed = () => {
       onAction?.({
         type: "concept_selection",
@@ -36468,6 +36582,7 @@ var CampaignConceptCard = import_react64.default.memo(
         "secondary_kpis",
         "budget_allocation",
         "budgetAllocation",
+        "geography",
         "estimated_creators",
         "estimatedCreators",
         "platforms",
@@ -36504,9 +36619,9 @@ var CampaignConceptCard = import_react64.default.memo(
                       idx + 1,
                       "."
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm font-medium rounded-md border border-[#85888f] dark:border-gray900 font-grotesk", children: String(label) }),
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-grayPill border border-foreground px-2 py-1 text-foreground text-sm font-grotesk font-medium rounded-md", children: String(label) }),
                     /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground", children: "=" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm rounded-md border border-[#85888f] dark:border-gray900 font-grotesk font-medium", children: formatVal(value) })
+                    /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-grayPill border border-foreground px-2 py-1 text-foreground text-sm rounded-md font-grotesk font-medium", children: formatVal(value) })
                   ] }, idx);
                 }) });
               }
@@ -36518,9 +36633,9 @@ var CampaignConceptCard = import_react64.default.memo(
                     idx + 1,
                     "."
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm font-medium rounded-md border border-[#85888f] dark:border-gray900 font-grotesk", children: formatKey(k) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-grayPill border border-foreground px-2 py-1 text-foreground text-sm font-grotesk font-medium rounded-md", children: formatKey(k) }),
                   /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground", children: "=" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm rounded-md border border-[#85888f] dark:border-gray900 font-grotesk font-medium", children: formatVal(v) })
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center bg-grayPill border border-foreground px-2 py-1 text-foreground text-sm rounded-md font-grotesk font-medium", children: formatVal(v) })
                 ] }, k)) });
               }
               return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: String(val) });
@@ -36541,41 +36656,27 @@ var CampaignConceptCard = import_react64.default.memo(
                   onChange(newObj);
                 },
                 placeholder: "Tier name: percentage (one per line)...",
-                className: "min-h-[120px] bg-background border-gray-300 font-mono text-xs"
+                className: "min-h-[120px] bg-background text-foreground border-gray-300 font-mono text-xs"
               }
             )
           };
         }
+        if (field.key === "geography") {
+          return {
+            ...field,
+            label: "Geography",
+            renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(CountrySelectDisplay, { value: v }),
+            renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(CountrySelectEdit, { value: v, onChange })
+          };
+        }
         if (field.key === "estimatedCreators" || field.key === "estimated_creators") {
           return {
             ...field,
             label: "Estimated Creators",
             renderDisplay: (val) => {
               if (!val) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
-              if (typeof val === "object" && !Array.isArray(val)) {
-                return /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-2", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center px-2 py-1 bg-[#85888f] dark:bg-grayPill text-white dark:text-foreground text-sm font-medium rounded-md border font-grotesk", children: val.min ?? 0 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground", children: "-" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center px-2 py-1 bg-[#85888f] dark:bg-grayPill text-white dark:text-foreground text-sm font-medium rounded-md border font-grotesk", children: val.max ?? 0 })
-                ] });
-              }
-              if (typeof val === "string" && val.includes("-")) {
-                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex items-center gap-2", children: val.split("-").map((part, idx, arr) => /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)(import_react64.default.Fragment, { children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "inline-flex items-center px-2 py-1 bg-[#85888f] dark:bg-grayPill text-white dark:text-foreground text-sm font-medium rounded-md border font-grotesk", children: part.trim() }),
-                  idx < arr.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground", children: "-" })
-                ] }, idx)) });
-              }
-              if (Array.isArray(val)) {
-                return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex items-center gap-2", children: val.map((v, idx) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                  "span",
-                  {
-                    className: "inline-flex items-center px-2 py-1 bg-[#85888f] dark:bg-grayPill text-white dark:text-foreground text-sm font-medium rounded-md border font-grotesk",
-                    children: String(v)
-                  },
-                  idx
-                )) });
-              }
-              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-txtColor font-medium", children: String(val) });
+              const displayValue = typeof val === "object" && !Array.isArray(val) ? `${val.min ?? 0}-${val.max ?? 0}` : String(val);
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm", children: displayValue });
             },
             renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
               Input,
@@ -36591,7 +36692,7 @@ var CampaignConceptCard = import_react64.default.memo(
                   }
                 },
                 placeholder: "Min-Max (e.g. 10-30)...",
-                className: "bg-background border-gray-300"
+                className: "bg-background text-foreground border-gray-300"
               }
             )
           };
@@ -36607,7 +36708,7 @@ var CampaignConceptCard = import_react64.default.memo(
                 value: String(v || ""),
                 onChange: (e) => onChange(e.target.value),
                 placeholder: "Enter primary KPI...",
-                className: "bg-background border-gray-300"
+                className: "bg-background text-foreground border-gray-300"
               }
             )
           };
@@ -36629,7 +36730,7 @@ var CampaignConceptCard = import_react64.default.memo(
                   onChange(items);
                 },
                 placeholder: "Enter KPIs separated by commas...",
-                className: "min-h-[80px] bg-background border-gray-300"
+                className: "min-h-[80px] bg-background text-foreground border-gray-300"
               }
             )
           };
@@ -36637,43 +36738,34 @@ var CampaignConceptCard = import_react64.default.memo(
         if (field.key === "platforms" || field.key === "target_platforms" || field.key === "targetPlatforms") {
           return {
             ...field,
-            renderDisplay: (val) => {
-              const platforms = Array.isArray(val) ? val.map(String) : typeof val === "string" ? val.split(/,\s*/).map((s) => s.trim()).filter(Boolean) : val ? [String(val)] : [];
-              if (platforms.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
-              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: platforms.map((p) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                "span",
-                {
-                  className: "inline-flex items-center bg-[#85888f] dark:bg-grayPill px-2 py-1 text-white dark:text-foreground text-sm font-medium rounded-md border border-[#85888f] dark:border-gray900 font-grotesk",
-                  children: p
-                },
-                p
-              )) });
-            },
+            renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(PlatformSelectDisplay, { value: v }),
             renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-              Textarea,
+              PlatformSelectEdit,
               {
-                value: Array.isArray(v) ? v.join(", ") : String(v || ""),
-                onChange: (e) => {
-                  const items = e.target.value.split(",").map((s) => s.trim()).filter(Boolean);
-                  onChange(items);
-                },
-                placeholder: "Enter platforms separated by commas...",
-                className: "min-h-[80px] bg-background border-gray-300"
+                value: v,
+                onChange
               }
             )
           };
         }
+        if (field.key === "description" || field.key === "creator_strategy" || field.key === "creatorStrategy") {
+          return {
+            ...field,
+            type: "textarea",
+            renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm leading-relaxed", children: val ? String(val) : "-" })
+          };
+        }
         return {
           ...field,
           renderDisplay: (val) => {
             if (Array.isArray(val)) {
               if (val.length === 0) return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: "-" });
-              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap gap-1.5 pt-1", children: val.map((item, idx) => {
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex flex-wrap gap-2 pt-1", children: val.map((item, idx) => {
                 const label = typeof item === "object" && item !== null ? item.label || item.value || item.name || JSON.stringify(item) : String(item);
                 return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
                   "span",
                   {
-                    className: "inline-block bg-paperBackground border border-gray400 text-txtColor text-xs px-2 py-0.5 rounded-full",
+                    className: "inline-flex items-center bg-grayPill border border-foreground px-3 py-1 text-foreground text-sm font-grotesk font-medium rounded-md",
                     children: label
                   },
                   idx
@@ -36681,9 +36773,9 @@ var CampaignConceptCard = import_react64.default.memo(
               }) });
             }
             if (typeof val === "object" && val !== null) {
-              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "text-muted-foreground text-xs font-mono bg-paperBackground p-2 rounded border border-gray400 mt-1 overflow-auto max-h-24", children: Object.entries(val).map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`).join("\n") });
+              return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "text-muted-foreground text-xs font-mono bg-paperBackground p-2 rounded mt-1 overflow-auto max-h-24", children: Object.entries(val).map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`).join("\n") });
             }
-            return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-txtColor text-sm", children: val !== void 0 && val !== null ? String(val) : "-" });
+            return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm", children: val !== void 0 && val !== null ? String(val) : "-" });
           }
         };
       });
@@ -36704,43 +36796,36 @@ var CampaignConceptCard = import_react64.default.memo(
               onClick: handleToggle,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex-1", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("h2", { className: "mb-1 py-1 text-txtColor font-bold", children: typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("h3", { className: "mb-1 py-1 text-txtColor font-bold text-lg", children: [
+                    "Concept ",
+                    index !== void 0 ? index : "",
+                    " : ",
+                    typeof cardTitle === "object" ? JSON.stringify(cardTitle) : String(cardTitle)
+                  ] }),
                   /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex flex-wrap gap-2", children: [
-                    isRecommended && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "bg-green-600 text-white px-2 py-0.5 rounded border border-green-700", children: "Recommended" }) }),
+                    isRecommended && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "bg-green-600/20 text-green-600 px-2 py-1 rounded-[20px]", children: "Recommended" }) }),
                     !effectiveIsLatest && selectionStatus && /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "inline-flex text-[10px] font-bold uppercase tracking-widest text-[#3B82F6]", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "bg-[#3B82F6]/10 px-2 py-0.5 rounded border border-[#3B82F6]/20", children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by You" }) })
                   ] })
                 ] }),
-                /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex items-center gap-2 ml-3", onClick: (e) => e.stopPropagation(), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                    "button",
-                    {
-                      onClick: handleCopyAll,
-                      title: "Copy all details",
-                      className: "p-2 bg-background hover:bg-gray200 dark:hover:bg-gray200 text-foreground rounded-lg shadow-lg transition-all active:scale-95",
-                      "aria-label": "Copy all details",
-                      children: copied ? /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Check, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(Copy, { className: "h-4 w-4" })
-                    }
-                  ),
-                  /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                    "button",
-                    {
-                      onClick: (e) => {
-                        e.preventDefault();
-                        e.stopPropagation();
-                        handleToggle();
-                      },
-                      className: "p-2 bg-background hover:bg-gray200 dark:hover:bg-gray200 text-foreground rounded-lg shadow-lg",
-                      "aria-label": isOpen ? "Collapse" : "Expand",
-                      title: isOpen ? "Collapse" : "Expand",
-                      children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
-                        ChevronDown,
-                        {
-                          className: `h-4 w-4 transition-transform ${isOpen ? "rotate-0" : "-rotate-90"}`
-                        }
-                      )
-                    }
-                  )
-                ] })
+                /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("div", { className: "flex items-center gap-2 ml-3", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                  "button",
+                  {
+                    onClick: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      handleToggle();
+                    },
+                    className: "p-2 bg-background hover:bg-gray200 dark:hover:bg-gray200 text-foreground rounded-lg shadow-lg",
+                    "aria-label": isOpen ? "Collapse" : "Expand",
+                    title: isOpen ? "Collapse" : "Expand",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+                      ChevronDown,
+                      {
+                        className: `h-4 w-4 transition-transform ${isOpen ? "rotate-0" : "-rotate-90"}`
+                      }
+                    )
+                  }
+                ) })
               ]
             }
           ),
@@ -38679,7 +38764,7 @@ var PXEngineRenderer = ({
     if (id && !finalProps.id) {
       finalProps.id = id;
     }
-    const uniqueKey = id || `${componentName}-${index || Math.random().toString(36).substr(2, 9)}`;
+    const uniqueKey = id || (index !== void 0 ? `${componentName}-${index}` : `${componentName}-root`);
     const normalizedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
     const resolveComponent = (identifier) => {
       const normalized = identifier.split(/[-_]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
@@ -38946,6 +39031,8 @@ var PXEngineRenderer = ({
   PaginationNext,
   PaginationPrevious,
   PlatformIconGroup,
+  PlatformSelectDisplay,
+  PlatformSelectEdit,
   Popover,
   PopoverAtom,
   PopoverContent,