pxengine 0.1.45 → 0.1.47

package/dist/index.cjs

@@ -307,6 +307,8 @@ __export(index_exports, {
   VideoAtom: () => VideoAtom,
   WorkflowVisualizer: () => WorkflowVisualizer,
   cn: () => cn,
+  generateFieldsFromData: () => generateFieldsFromData,
+  generateFieldsFromPropDefinitions: () => generateFieldsFromPropDefinitions,
   useCreatorWidgetPolling: () => useCreatorWidgetPolling
 });
 module.exports = __toCommonJS(index_exports);
@@ -34953,6 +34955,39 @@ function generateFieldsFromData(data) {
     return config;
   });
 }
+function generateFieldsFromPropDefinitions(propDefs, data) {
+  if (!propDefs || !Array.isArray(propDefs)) return [];
+  return propDefs.filter((def) => def.editable === true).map((def) => {
+    const value = data?.[def.name];
+    const editType = def.editConfig?.editFieldType || inferFieldType(value);
+    const config = {
+      key: def.name,
+      label: def.description || normalizeLabel(def.name),
+      type: editType
+    };
+    if (def.editConfig?.placeholder) {
+      config.placeholder = def.editConfig.placeholder;
+    }
+    if (def.editConfig?.options) {
+      config.options = def.editConfig.options;
+    }
+    if (def.editConfig?.sliderConfig) {
+      config.sliderConfig = {
+        min: def.editConfig.sliderConfig.min,
+        max: def.editConfig.sliderConfig.max,
+        step: def.editConfig.sliderConfig.step
+      };
+    }
+    if (def.editConfig?.numberConfig) {
+      config.numberConfig = {
+        min: def.editConfig.numberConfig.min,
+        max: def.editConfig.numberConfig.max,
+        step: def.editConfig.numberConfig.step
+      };
+    }
+    return config;
+  });
+}
 
 // src/molecules/creator-discovery/SearchSpecCard/CustomFieldRenderers.tsx
 var import_react59 = require("react");
@@ -38135,23 +38170,43 @@ function UIComponentSelector({
     "div",
     {
       className: cn(
-        "rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        "my-3 rounded-xl border border-border bg-card overflow-hidden shadow-sm",
         className
       ),
       style: FONT_STYLE6,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h3", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Select UI Components" }),
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 mt-0.5", children: "Choose which visual components this agent can use in its responses." })
-        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "px-4 py-3 border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "w-5 h-5 rounded-md bg-interactive/15 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: "text-interactive",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h3", { className: "text-xs font-semibold text-foreground", children: "Select UI Components" }),
+            /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+          ] })
+        ] }) }),
         /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h4", { className: "text-xs font-medium text-[var(--foreground)]/50 uppercase tracking-wider mb-2", children: category }),
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("h4", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2", children: category }),
           /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
             "label",
             {
               className: cn(
-                "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
-                submitted || !isLatestMessage ? "cursor-default opacity-70" : "hover:bg-[var(--foreground)]/[0.03]",
+                "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all",
+                submitted || !isLatestMessage ? "cursor-default opacity-60" : "hover:bg-muted/80",
                 selected.has(comp.name) && !submitted && "bg-interactive/5 border border-interactive/20",
                 selected.has(comp.name) && submitted && "bg-interactive/5"
               ),
@@ -38161,7 +38216,7 @@ function UIComponentSelector({
                   {
                     className: cn(
                       "mt-0.5 w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
-                      selected.has(comp.name) ? "bg-interactive border-interactive" : "border-[var(--foreground)]/20"
+                      selected.has(comp.name) ? "bg-interactive border-interactive" : "border-muted-foreground/30"
                     ),
                     onClick: (e) => {
                       e.preventDefault();
@@ -38193,7 +38248,7 @@ function UIComponentSelector({
                 ),
                 /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex-1 min-w-0", children: [
                   /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-sm font-medium text-[var(--foreground)]", children: comp.display_name }),
+                    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
                     comp.recommended && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20", children: "Recommended" }),
                     onPreview && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
                       "button",
@@ -38204,7 +38259,7 @@ function UIComponentSelector({
                           e.stopPropagation();
                           onPreview(comp.name);
                         },
-                        className: "shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
+                        className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
                         title: `Preview ${comp.display_name}`,
                         children: /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
                           "svg",
@@ -38217,7 +38272,7 @@ function UIComponentSelector({
                             strokeWidth: "2",
                             strokeLinecap: "round",
                             strokeLinejoin: "round",
-                            className: "text-[var(--foreground)]/40 hover:text-interactive",
+                            className: "text-muted-foreground hover:text-interactive",
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
                               /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
@@ -38228,15 +38283,15 @@ function UIComponentSelector({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ml-0 text-xs text-[var(--foreground)]/50", children: comp.description })
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
                 ] })
               ]
             },
             comp.name
           )) })
         ] }, category)) }),
-        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-t border-[var(--border-color)] flex items-center justify-between", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "text-xs text-[var(--foreground)]/50", children: [
+        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "px-4 py-3 border-t border-border/60 flex items-center justify-between bg-muted/30", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
             selected.size,
             " selected"
           ] }),
@@ -38248,7 +38303,8 @@ function UIComponentSelector({
               children: "Continue"
             }
           )
-        ] })
+        ] }),
+        submitted && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
       ]
     }
   );
@@ -38501,17 +38557,17 @@ var MultiAgentUISelector = ({
     "div",
     {
       className: cn(
-        "text-foreground hover:bg-muted/50 hover:text-foreground my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        "my-3 rounded-xl border border-border bg-card overflow-hidden shadow-sm",
         className
       ),
       style: FONT_STYLE9,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 py-3 border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "w-5 h-5 rounded-md bg-interactive/15 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
             "svg",
             {
-              width: "10",
-              height: "10",
+              width: "12",
+              height: "12",
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -38525,15 +38581,15 @@ var MultiAgentUISelector = ({
               ]
             }
           ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
+          /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-xs font-semibold text-foreground", children: "UI Components per Stage" })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex gap-1 border-b border-[var(--border-color)] px-4 py-2 bg-[var(--foreground)]/[0.01]", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "flex gap-1 border-b border-border/60 px-4 py-2 bg-muted/20", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           "button",
           {
             onClick: () => setActiveStageId(stage.id),
             className: cn(
               "px-3 py-1.5 text-[11px] font-medium rounded-full transition-colors",
-              activeStageId === stage.id ? "bg-interactive text-white" : "text-[var(--foreground)]/50 hover:text-[var(--foreground)] hover:bg-[var(--foreground)]/[0.05]"
+              activeStageId === stage.id ? "bg-interactive text-white" : "text-muted-foreground hover:text-foreground hover:bg-muted"
             ),
             children: stage.name
           },
@@ -38541,9 +38597,9 @@ var MultiAgentUISelector = ({
         )) }),
         /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "px-4 py-3", children: [
           activeStage && /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("p", { className: "text-[10px] text-[var(--foreground)]/40", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("p", { className: "text-[10px] text-muted-foreground", children: [
               "Select components for ",
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("strong", { children: activeStage.name }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("strong", { className: "text-foreground", children: activeStage.name }),
               " (",
               activeStage.agent_name,
               ")"
@@ -38557,19 +38613,19 @@ var MultiAgentUISelector = ({
                   children: "Select All"
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-[var(--foreground)]/20", children: "|" }),
+              /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "text-muted-foreground/40", children: "|" }),
               /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                 "button",
                 {
                   onClick: () => clearAll(activeStageId),
-                  className: "text-[10px] text-[var(--foreground)]/40 hover:text-[var(--foreground)]/60 font-medium",
+                  className: "text-[10px] text-muted-foreground hover:text-foreground font-medium",
                   children: "Clear"
                 }
               )
             ] })
           ] }),
           Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)("div", { className: "mb-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
+            /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: category }),
             /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "grid grid-cols-2 gap-1.5", children: comps.map((comp) => {
               const isSelected = selections[activeStageId]?.has(comp.name) || false;
               return /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
@@ -38586,7 +38642,7 @@ var MultiAgentUISelector = ({
                   },
                   className: cn(
                     "text-left p-2.5 rounded-lg border text-[11px] transition-all overflow-hidden cursor-pointer",
-                    isSelected ? "border-interactive bg-interactive/5" : "border-[var(--border-color)] hover:border-interactive/50",
+                    isSelected ? "border-interactive bg-interactive/5" : "border-border hover:border-interactive/50",
                     (submitted || !isLatestMessage) && "opacity-60 cursor-default"
                   ),
                   children: [
@@ -38596,7 +38652,7 @@ var MultiAgentUISelector = ({
                         {
                           className: cn(
                             "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
-                            isSelected ? "bg-interactive border-interactive" : "border-[var(--foreground)]/20"
+                            isSelected ? "bg-interactive border-interactive" : "border-muted-foreground/30"
                           ),
                           children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                             "svg",
@@ -38612,7 +38668,7 @@ var MultiAgentUISelector = ({
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
+                      /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "font-medium text-foreground", children: comp.display_name }),
                       comp.recommended && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("span", { className: "px-1 py-px text-[8px] font-semibold uppercase tracking-wider rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 leading-tight", children: "Rec" }),
                       onPreview && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
                         "button",
@@ -38622,7 +38678,7 @@ var MultiAgentUISelector = ({
                             e.stopPropagation();
                             onPreview(comp.name);
                           },
-                          className: "ml-auto shrink-0 p-0.5 rounded hover:bg-[var(--foreground)]/10 transition-colors",
+                          className: "ml-auto shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
                           title: `Preview ${comp.display_name}`,
                           children: /* @__PURE__ */ (0, import_jsx_runtime135.jsxs)(
                             "svg",
@@ -38635,7 +38691,7 @@ var MultiAgentUISelector = ({
                               strokeWidth: "2",
                               strokeLinecap: "round",
                               strokeLinejoin: "round",
-                              className: "text-[var(--foreground)]/40 hover:text-[var(--primary-color)]",
+                              className: "text-muted-foreground hover:text-primary",
                               children: [
                                 /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
                                 /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
@@ -38646,7 +38702,7 @@ var MultiAgentUISelector = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
+                    /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("p", { className: "text-[10px] text-muted-foreground mt-0.5 ml-5 whitespace-normal", children: comp.description })
                   ]
                 },
                 comp.name
@@ -38654,7 +38710,7 @@ var MultiAgentUISelector = ({
             }) })
           ] }, category))
         ] }),
-        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 py-3 border-t border-border/60 bg-muted/30", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
           "button",
           {
             onClick: handleContinue,
@@ -38662,7 +38718,7 @@ var MultiAgentUISelector = ({
             children: "Continue"
           }
         ) }),
-        submitted && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5 ", children: "Selections confirmed" }) })
+        submitted && /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
       ]
     }
   );
@@ -40945,6 +41001,8 @@ var PXEngineRenderer = ({
   VideoAtom,
   WorkflowVisualizer,
   cn,
+  generateFieldsFromData,
+  generateFieldsFromPropDefinitions,
   useCreatorWidgetPolling
 });
 /*! Bundled license information: