pxengine 0.1.28 → 0.1.30

package/dist/index.cjs

@@ -352,6 +352,10 @@ __export(atoms_exports, {
   VideoAtom: () => VideoAtom
 });
 
+// src/atoms/TextAtom.tsx
+var import_react_markdown = __toESM(require("react-markdown"), 1);
+var import_remark_gfm = __toESM(require("remark-gfm"), 1);
+
 // src/lib/utils.ts
 var import_clsx = require("clsx");
 var import_tailwind_merge = require("tailwind-merge");
@@ -366,7 +370,8 @@ var TextAtom = ({
   variant = "p",
   className,
   style,
-  backgroundColor
+  backgroundColor,
+  markdown = false
 }) => {
   const baseStyles = {
     h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray900",
@@ -379,14 +384,25 @@ var TextAtom = ({
     label: "text-[10px] font-bold text-gray400 uppercase tracking-widest pl-1"
   };
   const Component2 = variant === "small" || variant === "muted" || variant === "label" ? "p" : variant;
+  const wrapperStyles = {
+    ...style,
+    ...backgroundColor && { backgroundColor }
+  };
+  if (markdown) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "div",
+      {
+        className: cn(baseStyles[variant], "prose prose-sm max-w-none", className),
+        style: wrapperStyles,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_markdown.default, { remarkPlugins: [import_remark_gfm.default], children: content })
+      }
+    );
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
     Component2,
     {
       className: cn(baseStyles[variant], className),
-      style: {
-        ...style,
-        ...backgroundColor && { backgroundColor }
-      },
+      style: wrapperStyles,
       children: content
     }
   );
@@ -25545,7 +25561,7 @@ var InputAtom = ({
 var import_class_variance_authority3 = require("class-variance-authority");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border px-2.5 py-1 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
@@ -34040,7 +34056,7 @@ var EditableField = import_react54.default.memo(
       "div",
       {
         className: cn(
-          "relative z-10 group flex flex-col gap-2 p-3 bg-background dark:bg-gray700 rounded-md mb-8",
+          "relative z-10 group flex flex-col gap-2 p-3 bg-paperBackground rounded-md mb-8",
           className
         ),
         children: [
@@ -34052,13 +34068,14 @@ var EditableField = import_react54.default.memo(
                 children: label
               }
             ),
-            !isEditingProp && /* @__PURE__ */ (0, import_jsx_runtime94.jsxs)("span", { className: "inline-flex items-center gap-1 text-[10px] font-medium text-green-500 dark:text-green-500", children: [
+            !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",
               /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(
-                Pencil,
+                "span",
                 {
-                  className: "h-3 w-3 hover:text-green-700 cursor-pointer",
-                  onClick: onEdit
+                  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" })
                 }
               )
             ] })
@@ -34071,7 +34088,7 @@ var EditableField = import_react54.default.memo(
                 {
                   size: "icon",
                   variant: "outline",
-                  className: "h-8 w-8 text-destructive border-destructive/20 hover:bg-destructive/10 rounded-lg",
+                  className: "h-8 w-8 text-foreground rounded-lg",
                   onClick: onCancel,
                   disabled: isSaving,
                   children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(X, { className: "h-4 w-4" })
@@ -34081,10 +34098,10 @@ var EditableField = import_react54.default.memo(
                 Button,
                 {
                   size: "icon",
-                  className: "h-8 w-8 bg-purpleLight text-purpleText2 hover:bg-purpleText1 rounded-lg border border-purpleText1 shadow-none",
+                  className: "h-8 w-8 text-foreground rounded-lg shadow-none",
                   onClick: handleSave,
                   disabled: isSaving,
-                  children: isSaving ? /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime94.jsx)(Check, { className: "h-4 w-4" })
+                  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" })
                 }
               )
             ] })
@@ -34092,9 +34109,10 @@ var EditableField = import_react54.default.memo(
             "div",
             {
               className: cn(
-                "relative flex items-center justify-between rounded-lg px-3 py-2",
-                "text-[14px] text-foreground font-normal leading-relaxed"
+                "relative flex items-start justify-between rounded-lg px-3 py-2",
+                "text-base text-foreground/90 font-medium leading-relaxed"
               ),
+              style: { fontFamily: "Noto Sans, sans-serif" },
               children: /* @__PURE__ */ (0, import_jsx_runtime94.jsx)("div", { className: "flex-1", children: formattedValue() })
             }
           )
@@ -34202,47 +34220,109 @@ var import_react56 = __toESM(require("react"), 1);
 var import_jsx_runtime96 = require("react/jsx-runtime");
 var FormCard = import_react56.default.memo(
   ({
-    // title,
+    title,
     fields,
     data,
-    editingFields = {},
+    editingFields: externalEditingFields,
     changedFields = {},
     savingFields = {},
-    onFieldEdit,
-    onFieldSave,
-    onFieldCancel,
+    onFieldEdit: externalOnFieldEdit,
+    onFieldSave: externalOnFieldSave,
+    onFieldCancel: externalOnFieldCancel,
     showTimeline = true,
     proceedLabel,
     onProceed,
     isLatestMessage = true,
+    hideTitle = false,
+    hideCopyButton = false,
     className,
     footer
   }) => {
+    const [copied, setCopied] = (0, import_react56.useState)(false);
+    const [internalEditingFields, setInternalEditingFields] = (0, import_react56.useState)({});
+    const [internalData, setInternalData] = (0, import_react56.useState)(data);
+    import_react56.default.useEffect(() => {
+      setInternalData(data);
+    }, [data]);
+    const isExternallyControlled = !!(externalOnFieldEdit || externalOnFieldSave || externalOnFieldCancel);
+    const editingFields = isExternallyControlled ? externalEditingFields || {} : internalEditingFields;
+    const activeData = isExternallyControlled ? data : internalData;
+    const handleFieldEdit = (key) => {
+      if (isExternallyControlled) {
+        externalOnFieldEdit?.(key);
+      } else {
+        setInternalEditingFields((prev) => ({ ...prev, [key]: true }));
+      }
+    };
+    const handleFieldSave = (key, newValue) => {
+      if (isExternallyControlled) {
+        externalOnFieldSave?.(key, newValue);
+      } else {
+        setInternalData((prev) => ({ ...prev, [key]: newValue }));
+        setInternalEditingFields((prev) => ({ ...prev, [key]: false }));
+      }
+    };
+    const handleFieldCancel = (key) => {
+      if (isExternallyControlled) {
+        externalOnFieldCancel?.(key);
+      } else {
+        setInternalEditingFields((prev) => ({ ...prev, [key]: false }));
+      }
+    };
     const handleCopyAll = () => {
-      const text = fields.map((field) => {
-        const value = data[field.key];
-        return `${field.label}: ${typeof value === "object" ? JSON.stringify(value) : value}`;
-      }).join("\n");
-      navigator.clipboard.writeText(text);
+      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 text = [
+        title,
+        "",
+        ...fields.map((field) => {
+          const value = activeData[field.key];
+          return `${field.label}: ${flattenValue(value)}`;
+        })
+      ].join("\n");
+      navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 2e3);
+      });
     };
     return /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)(
       "div",
       {
         className: cn(
-          "relative w-full rounded-[20px] bg-background dark:bg-gray100 border border-gray400 shadow-lg overflow-hidden mb-6 font-noto",
+          "relative w-full rounded-[20px] bg-paperBackground dark:bg-gray100 border border-gray400 shadow-lg overflow-hidden mb-6 font-noto",
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+          !hideCopyButton && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
             "button",
             {
               onClick: handleCopyAll,
               title: "Copy all details",
-              className: "absolute top-4 right-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray200 text-gray-400 hover:text-gray-600 dark:hover:text-gray300 transition-all active:scale-95 z-10",
-              children: /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Copy, { className: "h-4 w-4" })
+              className: "absolute top-4 right-4 p-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-200 text-gray-400 hover:text-gray-600 dark:hover:text-gray300 transition-all active:scale-95 z-10",
+              children: copied ? /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Check, { className: "h-4 w-4 text-green-500" }) : /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(Copy, { className: "h-4 w-4" })
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime96.jsxs)("div", { className: "p-6 relative", children: [
+            !hideTitle && title && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
+              "h3",
+              {
+                className: "text-gray900 dark:text-white mb-12 text-[1rem] font-bold",
+                children: title
+              }
+            ),
             showTimeline && /* @__PURE__ */ (0, import_jsx_runtime96.jsx)(
               "div",
               {
@@ -34259,16 +34339,16 @@ var FormCard = import_react56.default.memo(
               EditableField,
               {
                 label: field.label,
-                value: data[field.key],
+                value: activeData[field.key],
                 type: field.type,
                 config: field,
                 isEditing: editingFields[field.key],
                 isChanged: changedFields[field.key],
                 isSaving: savingFields[field.key],
                 isLatestMessage,
-                onEdit: () => onFieldEdit?.(field.key),
-                onSave: (val) => onFieldSave?.(field.key, val),
-                onCancel: () => onFieldCancel?.(field.key),
+                onEdit: () => handleFieldEdit(field.key),
+                onSave: (val) => handleFieldSave(field.key, val),
+                onCancel: () => handleFieldCancel(field.key),
                 renderDisplay: field.renderDisplay,
                 renderEdit: field.renderEdit,
                 showIndex: showTimeline,
@@ -35129,7 +35209,7 @@ var CountrySelectDisplay = ({ value }) => {
     Badge2,
     {
       variant: "outline",
-      className: "bg-gray-50 text-gray-700 border-gray-200",
+      className: "text-foreground border-gray-200 py-1",
       children: countryCode
     },
     countryCode
@@ -35149,7 +35229,7 @@ var KeywordBundlesEdit = ({
   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", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime106.jsxs)(Badge2, { className: "bg-purple500 hover:bg-purple500 py-1", children: [
         "Priority ",
         priority
       ] }),
@@ -35165,7 +35245,7 @@ var KeywordBundlesEdit = ({
             /* @__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,
               {
-                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",
+                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",
                 onClick: () => {
                   const updatedBundles = [...bundles];
                   updatedBundles[bundleIndex] = {
@@ -35259,7 +35339,7 @@ var KeywordBundlesDisplay = ({ value }) => {
       /* @__PURE__ */ (0, import_jsx_runtime106.jsx)("div", { className: "flex flex-wrap gap-2", children: deduped.map((keyword) => /* @__PURE__ */ (0, import_jsx_runtime106.jsx)(
         "div",
         {
-          className: "px-2 py-1 rounded bg-background bg-gray400 border border-white/10 text-gray-300 text-xs font-medium",
+          className: "px-2 py-1 rounded bg-background border text-gray-300 text-sm font-medium py-1",
           children: keyword
         },
         keyword
@@ -35283,7 +35363,7 @@ 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-xs", children: item }, item)) });
+  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)) });
 };
 function buildCampaignSeedFields(data) {
   if (!data || typeof data !== "object") return [];
@@ -35294,7 +35374,32 @@ function buildCampaignSeedFields(data) {
         key,
         label: "Keyword Bundles",
         type: "custom",
-        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(KeywordBundlesDisplay, { value: v })
+        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(KeywordBundlesDisplay, { value: v }),
+        renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+          Textarea,
+          {
+            value: Array.isArray(v) ? v.map((b) => `${(b.keywords || []).join(", ")} (Priority: ${b.priority || 1})`).join("\n") : String(v || ""),
+            onChange: (e) => {
+              const lines = e.target.value.split("\n").filter(Boolean);
+              const bundles = lines.map((line) => {
+                const match2 = line.match(/(.*?)\s*\(Priority:\s*(\d+)\)/i);
+                if (match2) {
+                  return {
+                    keywords: match2[1].split(",").map((s) => s.trim()).filter(Boolean),
+                    priority: parseInt(match2[2]) || 1
+                  };
+                }
+                return {
+                  keywords: line.split(",").map((s) => s.trim()).filter(Boolean),
+                  priority: 1
+                };
+              });
+              onChange(bundles);
+            },
+            placeholder: "Keyword 1, Keyword 2 (Priority: 1)...",
+            className: "min-h-[120px] bg-background border-gray-300"
+          }
+        )
       };
     }
     if (key === "geography") {
@@ -35302,7 +35407,19 @@ function buildCampaignSeedFields(data) {
         key,
         label: "Geography",
         type: "custom",
-        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CountrySelectDisplay, { value: v })
+        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"
+          }
+        )
       };
     }
     if (key === "platforms" && Array.isArray(value)) {
@@ -35323,7 +35440,19 @@ function buildCampaignSeedFields(data) {
             },
             p
           )) });
-        }
+        },
+        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()).filter(Boolean);
+              onChange(items);
+            },
+            placeholder: "Enter platforms separated by commas...",
+            className: "min-h-[80px] bg-background border-gray-300"
+          }
+        )
       };
     }
     if (Array.isArray(value) && value.every((v) => typeof v === "string")) {
@@ -35355,7 +35484,26 @@ function buildCampaignSeedFields(data) {
         key,
         label,
         type: "custom",
-        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ObjectDisplay, { value: v })
+        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(ObjectDisplay, { value: v }),
+        renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
+          Textarea,
+          {
+            value: Object.entries(v || {}).map(([k, val]) => `${k.replace(/_/g, " ")}: ${val}`).join("\n"),
+            onChange: (e) => {
+              const lines = e.target.value.split("\n").filter(Boolean);
+              const newObj = {};
+              lines.forEach((line) => {
+                const [k, ...rest] = line.split(":");
+                if (k) {
+                  newObj[k.trim().replace(/\s+/g, "_").toLowerCase()] = rest.join(":").trim();
+                }
+              });
+              onChange(newObj);
+            },
+            placeholder: "Enter key: value pairs (one per line)...",
+            className: "min-h-[120px] bg-background border-gray-300 font-mono text-xs"
+          }
+        )
       };
     }
     const [generated] = generateFieldsFromData({ [key]: value });
@@ -35396,7 +35544,7 @@ var CampaignSeedCard = import_react60.default.memo(
         showTimeline: true,
         isLatestMessage: effectiveIsLatest,
         className: cn("font-noto", className),
-        footer: !effectiveIsLatest && (selectionStatus || hasUserResponded) ? /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
+        footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
           /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(CircleCheck, { className: "h-3.5 w-3.5" }),
           /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { children: selectionStatus === "agent" ? "Suggested by Agent" : "Selected by you" })
         ] }) : formCardProps.footer
@@ -35422,7 +35570,7 @@ 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-xs", children: item }, item)) });
+  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)) });
 };
 function buildSearchSpecFields(data) {
   if (!data || typeof data !== "object") return [];
@@ -35446,12 +35594,25 @@ function buildSearchSpecFields(data) {
         renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(CountrySelectEdit, { value: v, onChange })
       };
     }
-    if (key === "platforms" && Array.isArray(value)) {
+    if ((key === "platforms" || key === "exclude_keywords" || key === "excludeKeywords") && Array.isArray(value)) {
+      const label = key === "platforms" ? "Platforms" : "Exclude Keywords";
       return {
         key,
-        label: "Platforms",
+        label,
         type: "custom",
-        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(StringArrayDisplay2, { value: v })
+        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(StringArrayDisplay2, { value: v }),
+        renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+          Textarea,
+          {
+            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 ${label.toLowerCase()} separated by commas...`,
+            className: "min-h-[100px] bg-background border-gray-300"
+          }
+        )
       };
     }
     if (typeof value === "object" && value !== null && !Array.isArray(value) && !("min" in value && "max" in value)) {
@@ -35460,7 +35621,26 @@ function buildSearchSpecFields(data) {
         key,
         label,
         type: "custom",
-        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ObjectDisplay2, { value: v })
+        renderDisplay: (v) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(ObjectDisplay2, { value: v }),
+        renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+          Textarea,
+          {
+            value: Object.entries(v || {}).map(([k, val]) => `${k.replace(/_/g, " ")}: ${val}`).join("\n"),
+            onChange: (e) => {
+              const lines = e.target.value.split("\n").filter(Boolean);
+              const newObj = {};
+              lines.forEach((line) => {
+                const [k, ...rest] = line.split(":");
+                if (k) {
+                  newObj[k.trim().replace(/\s+/g, "_").toLowerCase()] = rest.join(":").trim();
+                }
+              });
+              onChange(newObj);
+            },
+            placeholder: "Enter key: value pairs (one per line)...",
+            className: "min-h-[120px] bg-background border-gray-300 font-mono text-xs"
+          }
+        )
       };
     }
     const [generated] = generateFieldsFromData({ [key]: value });
@@ -35491,7 +35671,7 @@ var SearchSpecCard = import_react61.default.memo(
       });
     };
     const effectiveIsLatest = isLatestMessage && !hasUserResponded;
-    return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("div", { className: "flex flex-col gap-2", children: /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(
       FormCard,
       {
         ...formCardProps,
@@ -35502,12 +35682,12 @@ var SearchSpecCard = import_react61.default.memo(
         onProceed: handleProceed,
         isLatestMessage: effectiveIsLatest,
         className,
-        footer: !effectiveIsLatest && (selectionStatus || hasUserResponded) ? /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
+        footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime108.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-xs font-semibold py-1", children: [
           /* @__PURE__ */ (0, import_jsx_runtime108.jsx)(CircleCheck, { className: "h-4 w-4" }),
           /* @__PURE__ */ (0, import_jsx_runtime108.jsx)("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by User" })
         ] }) : formCardProps.footer
       }
-    );
+    ) });
   }
 );
 SearchSpecCard.displayName = "SearchSpecCard";
@@ -36344,7 +36524,26 @@ var CampaignConceptCard = import_react64.default.memo(
                 ] }, k)) });
               }
               return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-muted-foreground text-sm", children: String(val) });
-            }
+            },
+            renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              Textarea,
+              {
+                value: typeof v === "object" ? Object.entries(v || {}).map(([k, val]) => `${k.replace(/_/g, " ")}: ${val}`).join("\n") : String(v || ""),
+                onChange: (e) => {
+                  const lines = e.target.value.split("\n").filter(Boolean);
+                  const newObj = {};
+                  lines.forEach((line) => {
+                    if (line.includes(":")) {
+                      const [k, ...rest] = line.split(":");
+                      newObj[k.trim().replace(/\s+/g, "_").toLowerCase()] = rest.join(":").trim().replace("%", "");
+                    }
+                  });
+                  onChange(newObj);
+                },
+                placeholder: "Tier name: percentage (one per line)...",
+                className: "min-h-[120px] bg-background border-gray-300 font-mono text-xs"
+              }
+            )
           };
         }
         if (field.key === "estimatedCreators" || field.key === "estimated_creators") {
@@ -36377,14 +36576,40 @@ var CampaignConceptCard = import_react64.default.memo(
                 )) });
               }
               return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-txtColor font-medium", children: String(val) });
-            }
+            },
+            renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              Input,
+              {
+                value: typeof v === "object" ? `${v.min ?? 0}-${v.max ?? 0}` : String(v || ""),
+                onChange: (e) => {
+                  const val = e.target.value;
+                  if (val.includes("-")) {
+                    const [min2, max2] = val.split("-").map((s) => parseInt(s.trim()) || 0);
+                    onChange({ min: min2, max: max2 });
+                  } else {
+                    onChange(val);
+                  }
+                },
+                placeholder: "Min-Max (e.g. 10-30)...",
+                className: "bg-background border-gray-300"
+              }
+            )
           };
         }
         if (field.key === "primary_kpi" || field.key === "primaryKpi") {
           return {
             ...field,
             label: field.label || "Primary KPI",
-            renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm", children: val ? String(val) : "-" })
+            renderDisplay: (val) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm", children: val ? String(val) : "-" }),
+            renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              Input,
+              {
+                value: String(v || ""),
+                onChange: (e) => onChange(e.target.value),
+                placeholder: "Enter primary KPI...",
+                className: "bg-background border-gray-300"
+              }
+            )
           };
         }
         if (field.key === "secondary_kpis" || field.key === "secondaryKpis") {
@@ -36394,7 +36619,19 @@ var CampaignConceptCard = import_react64.default.memo(
             renderDisplay: (val) => {
               const display = Array.isArray(val) ? val.map(String).join(", ") : val ? String(val) : "-";
               return /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "text-foreground text-sm", children: display });
-            }
+            },
+            renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              Textarea,
+              {
+                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 KPIs separated by commas...",
+                className: "min-h-[80px] bg-background border-gray-300"
+              }
+            )
           };
         }
         if (field.key === "platforms" || field.key === "target_platforms" || field.key === "targetPlatforms") {
@@ -36411,7 +36648,19 @@ var CampaignConceptCard = import_react64.default.memo(
                 },
                 p
               )) });
-            }
+            },
+            renderEdit: (v, onChange) => /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(
+              Textarea,
+              {
+                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"
+              }
+            )
           };
         }
         return {
@@ -36457,8 +36706,8 @@ var CampaignConceptCard = import_react64.default.memo(
                 /* @__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)("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 text-[#22C55E]", children: /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { className: "bg-[#22C55E]/10 px-2 py-0.5 rounded border border-[#22C55E]/20", children: "Recommended" }) }),
-                    !effectiveIsLatest && (selectionStatus || hasUserResponded) && /* @__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" }) })
+                    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" }) }),
+                    !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: [
@@ -36524,8 +36773,10 @@ var CampaignConceptCard = import_react64.default.memo(
                     proceedLabel: "Continue with this concept",
                     onProceed: handleProceed,
                     isLatestMessage: effectiveIsLatest,
+                    hideTitle: true,
+                    hideCopyButton: true,
                     className: "bg-transparent border-none shadow-none mb-0 p-0",
-                    footer: !effectiveIsLatest && (selectionStatus || hasUserResponded) ? /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
+                    footer: !effectiveIsLatest && selectionStatus ? /* @__PURE__ */ (0, import_jsx_runtime121.jsxs)("div", { className: "flex justify-end items-center gap-1.5 text-green-600 text-[10px] font-semibold py-4 pr-6", children: [
                       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)(CircleCheck, { className: "h-3.5 w-3.5" }),
                       /* @__PURE__ */ (0, import_jsx_runtime121.jsx)("span", { children: selectionStatus === "agent" ? "Selected by Agent" : "Selected by You" })
                     ] }) : formCardProps.footer