pxengine 0.1.45 → 0.1.47

package/dist/index.mjs

@@ -34667,6 +34667,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
 import { useState as useState8, useRef as useRef5, useEffect as useEffect6, useMemo as useMemo4 } from "react";
@@ -37849,23 +37882,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__ */ jsxs90("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
-          /* @__PURE__ */ jsx132("h3", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Select UI Components" }),
-          /* @__PURE__ */ jsx132("p", { className: "text-xs text-[var(--foreground)]/50 mt-0.5", children: "Choose which visual components this agent can use in its responses." })
-        ] }),
+        /* @__PURE__ */ jsx132("div", { className: "px-4 py-3 border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ jsxs90("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx132("div", { className: "w-5 h-5 rounded-md bg-interactive/15 flex items-center justify-center", children: /* @__PURE__ */ jsxs90(
+            "svg",
+            {
+              width: "12",
+              height: "12",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: "text-interactive",
+              children: [
+                /* @__PURE__ */ jsx132("rect", { x: "3", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx132("rect", { x: "14", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx132("rect", { x: "3", y: "14", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx132("rect", { x: "14", y: "14", width: "7", height: "7" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs90("div", { children: [
+            /* @__PURE__ */ jsx132("h3", { className: "text-xs font-semibold text-foreground", children: "Select UI Components" }),
+            /* @__PURE__ */ jsx132("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+          ] })
+        ] }) }),
         /* @__PURE__ */ jsx132("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ jsxs90("div", { children: [
-          /* @__PURE__ */ jsx132("h4", { className: "text-xs font-medium text-[var(--foreground)]/50 uppercase tracking-wider mb-2", children: category }),
+          /* @__PURE__ */ jsx132("h4", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2", children: category }),
           /* @__PURE__ */ jsx132("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ jsxs90(
             "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"
               ),
@@ -37875,7 +37928,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();
@@ -37907,7 +37960,7 @@ function UIComponentSelector({
                 ),
                 /* @__PURE__ */ jsxs90("div", { className: "flex-1 min-w-0", children: [
                   /* @__PURE__ */ jsxs90("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ jsx132("span", { className: "text-sm font-medium text-[var(--foreground)]", children: comp.display_name }),
+                    /* @__PURE__ */ jsx132("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
                     comp.recommended && /* @__PURE__ */ jsx132("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__ */ jsx132(
                       "button",
@@ -37918,7 +37971,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__ */ jsxs90(
                           "svg",
@@ -37931,7 +37984,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__ */ jsx132("circle", { cx: "12", cy: "12", r: "10" }),
                               /* @__PURE__ */ jsx132("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
@@ -37942,15 +37995,15 @@ function UIComponentSelector({
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsx132("span", { className: "ml-0 text-xs text-[var(--foreground)]/50", children: comp.description })
+                  /* @__PURE__ */ jsx132("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
                 ] })
               ]
             },
             comp.name
           )) })
         ] }, category)) }),
-        !submitted && isLatestMessage && /* @__PURE__ */ jsxs90("div", { className: "px-4 py-3 border-t border-[var(--border-color)] flex items-center justify-between", children: [
-          /* @__PURE__ */ jsxs90("span", { className: "text-xs text-[var(--foreground)]/50", children: [
+        !submitted && isLatestMessage && /* @__PURE__ */ jsxs90("div", { className: "px-4 py-3 border-t border-border/60 flex items-center justify-between bg-muted/30", children: [
+          /* @__PURE__ */ jsxs90("span", { className: "text-xs text-muted-foreground", children: [
             selected.size,
             " selected"
           ] }),
@@ -37962,7 +38015,8 @@ function UIComponentSelector({
               children: "Continue"
             }
           )
-        ] })
+        ] }),
+        submitted && /* @__PURE__ */ jsx132("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx132("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
       ]
     }
   );
@@ -38215,17 +38269,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__ */ jsx135("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs93("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ jsx135("div", { className: "w-4 h-4 rounded bg-interactive/20 flex items-center justify-center", children: /* @__PURE__ */ jsxs93(
+        /* @__PURE__ */ jsx135("div", { className: "px-4 py-3 border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ jsxs93("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx135("div", { className: "w-5 h-5 rounded-md bg-interactive/15 flex items-center justify-center", children: /* @__PURE__ */ jsxs93(
             "svg",
             {
-              width: "10",
-              height: "10",
+              width: "12",
+              height: "12",
               viewBox: "0 0 24 24",
               fill: "none",
               stroke: "currentColor",
@@ -38239,15 +38293,15 @@ var MultiAgentUISelector = ({
               ]
             }
           ) }),
-          /* @__PURE__ */ jsx135("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
+          /* @__PURE__ */ jsx135("span", { className: "text-xs font-semibold text-foreground", children: "UI Components per Stage" })
         ] }) }),
-        /* @__PURE__ */ jsx135("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__ */ jsx135(
+        /* @__PURE__ */ jsx135("div", { className: "flex gap-1 border-b border-border/60 px-4 py-2 bg-muted/20", children: stages.map((stage) => /* @__PURE__ */ jsx135(
           "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
           },
@@ -38255,9 +38309,9 @@ var MultiAgentUISelector = ({
         )) }),
         /* @__PURE__ */ jsxs93("div", { className: "px-4 py-3", children: [
           activeStage && /* @__PURE__ */ jsxs93("div", { className: "flex items-center justify-between mb-3", children: [
-            /* @__PURE__ */ jsxs93("p", { className: "text-[10px] text-[var(--foreground)]/40", children: [
+            /* @__PURE__ */ jsxs93("p", { className: "text-[10px] text-muted-foreground", children: [
               "Select components for ",
-              /* @__PURE__ */ jsx135("strong", { children: activeStage.name }),
+              /* @__PURE__ */ jsx135("strong", { className: "text-foreground", children: activeStage.name }),
               " (",
               activeStage.agent_name,
               ")"
@@ -38271,19 +38325,19 @@ var MultiAgentUISelector = ({
                   children: "Select All"
                 }
               ),
-              /* @__PURE__ */ jsx135("span", { className: "text-[var(--foreground)]/20", children: "|" }),
+              /* @__PURE__ */ jsx135("span", { className: "text-muted-foreground/40", children: "|" }),
               /* @__PURE__ */ jsx135(
                 "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__ */ jsxs93("div", { className: "mb-3", children: [
-            /* @__PURE__ */ jsx135("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
+            /* @__PURE__ */ jsx135("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: category }),
             /* @__PURE__ */ jsx135("div", { className: "grid grid-cols-2 gap-1.5", children: comps.map((comp) => {
               const isSelected = selections[activeStageId]?.has(comp.name) || false;
               return /* @__PURE__ */ jsxs93(
@@ -38300,7 +38354,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: [
@@ -38310,7 +38364,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__ */ jsx135(
                             "svg",
@@ -38326,7 +38380,7 @@ var MultiAgentUISelector = ({
                           )
                         }
                       ),
-                      /* @__PURE__ */ jsx135("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name }),
+                      /* @__PURE__ */ jsx135("span", { className: "font-medium text-foreground", children: comp.display_name }),
                       comp.recommended && /* @__PURE__ */ jsx135("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__ */ jsx135(
                         "button",
@@ -38336,7 +38390,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__ */ jsxs93(
                             "svg",
@@ -38349,7 +38403,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__ */ jsx135("circle", { cx: "12", cy: "12", r: "10" }),
                                 /* @__PURE__ */ jsx135("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
@@ -38360,7 +38414,7 @@ var MultiAgentUISelector = ({
                         }
                       )
                     ] }),
-                    /* @__PURE__ */ jsx135("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
+                    /* @__PURE__ */ jsx135("p", { className: "text-[10px] text-muted-foreground mt-0.5 ml-5 whitespace-normal", children: comp.description })
                   ]
                 },
                 comp.name
@@ -38368,7 +38422,7 @@ var MultiAgentUISelector = ({
             }) })
           ] }, category))
         ] }),
-        !submitted && isLatestMessage && /* @__PURE__ */ jsx135("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx135(
+        !submitted && isLatestMessage && /* @__PURE__ */ jsx135("div", { className: "px-4 py-3 border-t border-border/60 bg-muted/30", children: /* @__PURE__ */ jsx135(
           "button",
           {
             onClick: handleContinue,
@@ -38376,7 +38430,7 @@ var MultiAgentUISelector = ({
             children: "Continue"
           }
         ) }),
-        submitted && /* @__PURE__ */ jsx135("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx135("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5 ", children: "Selections confirmed" }) })
+        submitted && /* @__PURE__ */ jsx135("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx135("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
       ]
     }
   );
@@ -40658,6 +40712,8 @@ export {
   VideoAtom,
   WorkflowVisualizer,
   cn,
+  generateFieldsFromData,
+  generateFieldsFromPropDefinitions,
   useCreatorWidgetPolling
 };
 /*! Bundled license information: