pxengine 0.1.35 → 0.1.37

package/dist/index.cjs

@@ -200,6 +200,9 @@ __export(index_exports, {
   MenubarSeparator: () => MenubarSeparator,
   MenubarShortcut: () => MenubarShortcut,
   MenubarTrigger: () => MenubarTrigger,
+  MultiAgentCard: () => MultiAgentCard,
+  MultiAgentPlan: () => MultiAgentPlan,
+  MultiAgentUISelector: () => MultiAgentUISelector,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuContent: () => NavigationMenuContent,
   NavigationMenuItem: () => NavigationMenuItem,
@@ -264,6 +267,7 @@ __export(index_exports, {
   SliderAtom: () => SliderAtom,
   Spinner: () => Spinner,
   SpinnerAtom: () => SpinnerAtom,
+  StageIndicator: () => StageIndicator,
   StatsGrid: () => StatsGrid,
   StepWizard: () => StepWizard,
   Switch: () => Switch,
@@ -294,6 +298,7 @@ __export(index_exports, {
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
   TopPostsGrid: () => TopPostsGrid,
+  UIComponentSelector: () => UIComponentSelector,
   VideoAtom: () => VideoAtom,
   WorkflowVisualizer: () => WorkflowVisualizer,
   cn: () => cn
@@ -301,7 +306,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/render/PXEngineRenderer.tsx
-var import_react69 = __toESM(require("react"), 1);
+var import_react71 = __toESM(require("react"), 1);
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -33599,16 +33604,21 @@ __export(molecules_exports, {
   KeywordBundlesEdit: () => KeywordBundlesEdit,
   LoadingOverlay: () => LoadingOverlay,
   MCQCard: () => MCQCard,
+  MultiAgentCard: () => MultiAgentCard,
+  MultiAgentPlan: () => MultiAgentPlan,
+  MultiAgentUISelector: () => MultiAgentUISelector,
   NotificationList: () => NotificationList,
   PlatformIconGroup: () => PlatformIconGroup,
   PlatformSelectDisplay: () => PlatformSelectDisplay,
   PlatformSelectEdit: () => PlatformSelectEdit,
   SearchSpecCard: () => SearchSpecCard,
+  StageIndicator: () => StageIndicator,
   StatsGrid: () => StatsGrid,
   StepWizard: () => StepWizard,
   TagCloud: () => TagCloud,
   ToolListCard: () => ToolListCard,
   TopPostsGrid: () => TopPostsGrid,
+  UIComponentSelector: () => UIComponentSelector,
   WorkflowVisualizer: () => WorkflowVisualizer
 });
 
@@ -37475,6 +37485,432 @@ var InstructionPreview = ({
   );
 };
 
+// src/molecules/agent-builder/UIComponentSelector/UIComponentSelector.tsx
+var import_react68 = require("react");
+var import_jsx_runtime127 = require("react/jsx-runtime");
+function UIComponentSelector({
+  components,
+  onSelect,
+  className
+}) {
+  const [selected, setSelected] = (0, import_react68.useState)(/* @__PURE__ */ new Set());
+  const [submitted, setSubmitted] = (0, import_react68.useState)(false);
+  const grouped = components.reduce(
+    (acc, comp) => {
+      const cat = comp.category || "Other";
+      if (!acc[cat]) acc[cat] = [];
+      acc[cat].push(comp);
+      return acc;
+    },
+    {}
+  );
+  const toggle = (name) => {
+    if (submitted) return;
+    setSelected((prev) => {
+      const next = new Set(prev);
+      if (next.has(name)) next.delete(name);
+      else next.add(name);
+      return next;
+    });
+  };
+  const handleContinue = () => {
+    setSubmitted(true);
+    onSelect?.(Array.from(selected));
+  };
+  const categoryOrder = Object.keys(grouped).sort();
+  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border bg-card overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "px-4 py-3 border-b border-border bg-muted/50", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("h3", { className: "text-sm font-semibold text-foreground", children: "Select UI Components" }),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: category }),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+            "label",
+            {
+              className: cn(
+                "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-colors",
+                submitted ? "cursor-default opacity-70" : "hover:bg-muted/50",
+                selected.has(comp.name) && !submitted && "bg-primary/5 border border-primary/20",
+                selected.has(comp.name) && submitted && "bg-primary/5"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: selected.has(comp.name),
+                    onChange: () => toggle(comp.name),
+                    disabled: submitted,
+                    className: "mt-0.5 h-4 w-4 rounded border-border text-primary focus:ring-primary/50 disabled:opacity-50"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
+                  /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("span", { className: "ml-2 text-xs text-muted-foreground", children: comp.description })
+                ] })
+              ]
+            },
+            comp.name
+          )) })
+        ] }, category)) }),
+        !submitted && /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("div", { className: "px-4 py-3 border-t border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
+            selected.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+            "button",
+            {
+              onClick: handleContinue,
+              className: "px-4 py-1.5 text-sm font-medium rounded-lg bg-primary text-primary-foreground hover:bg-primary/90 transition-colors",
+              children: "Continue"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/molecules/agent-builder/MultiAgentCard/MultiAgentCard.tsx
+var import_jsx_runtime128 = require("react/jsx-runtime");
+var MultiAgentCard = ({
+  name,
+  display_name,
+  description,
+  stages = [],
+  enabled = true,
+  className
+}) => {
+  const avatarUrl = `https://api.dicebear.com/7.x/avataaars/svg?seed=${name}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
+    "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",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-[var(--primary-color)]/20 overflow-hidden bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: name }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full font-medium bg-violet-500/10 text-violet-600", children: "Multi-Agent" }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "text-[10px] px-1.5 py-0.5 rounded-full font-medium",
+                    enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
+                  ),
+                  children: enabled ? "Active" : "Disabled"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1", children: description })
+          ] })
+        ] }),
+        stages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-3", children: [
+            "Stages (",
+            stages.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex flex-col items-center mr-3 w-5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+                "div",
+                {
+                  className: cn(
+                    "w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0",
+                    "bg-[var(--primary-color)]/10 text-[var(--primary-color)] border border-[var(--primary-color)]/30"
+                  ),
+                  children: idx + 1
+                }
+              ),
+              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[16px]" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
+                /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30", children: stage.agent_name })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "flex items-center gap-3 mt-1.5 text-[10px] text-[var(--foreground)]/50", children: [
+                stage.tools && stage.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { children: [
+                  stage.tools.length,
+                  " tool",
+                  stage.tools.length !== 1 ? "s" : ""
+                ] }),
+                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("span", { children: [
+                  stage.ui_components.length,
+                  " component",
+                  stage.ui_components.length !== 1 ? "s" : ""
+                ] })
+              ] })
+            ] })
+          ] }, stage.agent_name || idx)) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/MultiAgentPlan/MultiAgentPlan.tsx
+var import_jsx_runtime129 = require("react/jsx-runtime");
+var MultiAgentPlan = ({
+  stages = [],
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+    "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",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+            "svg",
+            {
+              width: "10",
+              height: "10",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: "text-violet-600",
+              children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 font-medium", children: "Draft" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex flex-col items-center mr-3 w-6", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-[var(--primary-color)]/10 text-[var(--primary-color)] border border-[var(--primary-color)]/30", children: idx + 1 }),
+            idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[12px]" })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "flex-1 mb-2 pb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
+            stage.description && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("p", { className: "text-[11px] text-[var(--foreground)]/50 mt-0.5", children: stage.description }),
+            stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+              "span",
+              {
+                className: "text-[10px] px-1.5 py-0.5 rounded bg-[var(--primary-color)]/10 text-[var(--primary-color)] font-mono",
+                children: tool
+              },
+              tool
+            )) })
+          ] })
+        ] }, stage.name || idx)) }) })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
+var import_react69 = require("react");
+var import_jsx_runtime130 = require("react/jsx-runtime");
+var MultiAgentUISelector = ({
+  stages = [],
+  components = [],
+  onSelect,
+  className
+}) => {
+  const [activeStageId, setActiveStageId] = (0, import_react69.useState)(stages[0]?.id || "");
+  const [selections, setSelections] = (0, import_react69.useState)(
+    () => {
+      const init = {};
+      for (const stage of stages) {
+        init[stage.id] = /* @__PURE__ */ new Set();
+      }
+      return init;
+    }
+  );
+  const [submitted, setSubmitted] = (0, import_react69.useState)(false);
+  const grouped = components.reduce((acc, comp) => {
+    const cat = comp.category || "Other";
+    if (!acc[cat]) acc[cat] = [];
+    acc[cat].push(comp);
+    return acc;
+  }, {});
+  const toggleComponent = (0, import_react69.useCallback)(
+    (stageId, compName) => {
+      if (submitted) return;
+      setSelections((prev) => {
+        const updated = { ...prev };
+        const set = new Set(updated[stageId] || []);
+        if (set.has(compName)) {
+          set.delete(compName);
+        } else {
+          set.add(compName);
+        }
+        updated[stageId] = set;
+        return updated;
+      });
+    },
+    [submitted]
+  );
+  const handleContinue = (0, import_react69.useCallback)(() => {
+    setSubmitted(true);
+    if (onSelect) {
+      const result = {};
+      for (const [stageId, set] of Object.entries(selections)) {
+        result[stageId] = Array.from(set);
+      }
+      onSelect(result);
+    }
+  }, [onSelect, selections]);
+  const activeStage = stages.find((s) => s.id === activeStageId);
+  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+    "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",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "w-4 h-4 rounded bg-[var(--primary-color)]/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)(
+            "svg",
+            {
+              width: "10",
+              height: "10",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: "text-[var(--primary-color)]",
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" }),
+                /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
+        ] }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "flex border-b border-[var(--border-color)] px-4", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+          "button",
+          {
+            onClick: () => setActiveStageId(stage.id),
+            disabled: submitted,
+            className: cn(
+              "px-3 py-2 text-[11px] font-medium border-b-2 transition-colors",
+              activeStageId === stage.id ? "border-[var(--primary-color)] text-[var(--primary-color)]" : "border-transparent text-[var(--foreground)]/50 hover:text-[var(--foreground)]",
+              submitted && "opacity-60 cursor-default"
+            ),
+            children: stage.name
+          },
+          stage.id
+        )) }),
+        /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "px-4 py-3", children: [
+          activeStage && /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("p", { className: "text-[10px] text-[var(--foreground)]/40 mb-3", children: [
+            "Select components for ",
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("strong", { children: activeStage.name }),
+            " (",
+            activeStage.agent_name,
+            ")"
+          ] }),
+          Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "mb-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
+            /* @__PURE__ */ (0, import_jsx_runtime130.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_runtime130.jsxs)(
+                "button",
+                {
+                  onClick: () => toggleComponent(activeStageId, comp.name),
+                  disabled: submitted,
+                  className: cn(
+                    "text-left p-2.5 rounded-lg border text-[11px] transition-all overflow-hidden",
+                    isSelected ? "border-[var(--primary-color)] bg-[var(--primary-color)]/5" : "border-[var(--border-color)] hover:border-[var(--primary-color)]/50",
+                    submitted && "opacity-60 cursor-default"
+                  ),
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                        "div",
+                        {
+                          className: cn(
+                            "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
+                            isSelected ? "bg-[var(--primary-color)] border-[var(--primary-color)]" : "border-[var(--foreground)]/20"
+                          ),
+                          children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+                            "svg",
+                            {
+                              width: "8",
+                              height: "8",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "white",
+                              strokeWidth: "3",
+                              children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("polyline", { points: "20 6 9 17 4 12" })
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name })
+                    ] }),
+                    /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5 whitespace-normal", children: comp.description })
+                  ]
+                },
+                comp.name
+              );
+            }) })
+          ] }, category))
+        ] }),
+        !submitted && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+          "button",
+          {
+            onClick: handleContinue,
+            className: "w-full py-2 rounded-lg bg-[var(--primary-color)] text-white text-xs font-medium hover:opacity-90 transition-opacity",
+            children: "Continue"
+          }
+        ) }),
+        submitted && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5 ", children: "Selections confirmed" }) })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/StageIndicator/StageIndicator.tsx
+var import_jsx_runtime131 = require("react/jsx-runtime");
+var StageIndicator = ({
+  stage_name,
+  agent_name,
+  className
+}) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 my-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-center gap-1.5 px-3 py-1 rounded-full bg-violet-500/10 border border-violet-500/20", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" }),
+          /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { className: "text-[10px] font-medium text-violet-600", children: stage_name || agent_name })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
+      ]
+    }
+  );
+};
+
 // src/components/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
@@ -37767,7 +38203,7 @@ __export(ui_exports, {
 // src/components/ui/button-group.tsx
 var import_react_slot4 = require("@radix-ui/react-slot");
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime132 = require("react/jsx-runtime");
 var buttonGroupVariants = (0, import_class_variance_authority8.cva)(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -37787,7 +38223,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     "div",
     {
       role: "group",
@@ -37804,7 +38240,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? import_react_slot4.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     Comp,
     {
       className: cn(
@@ -37820,7 +38256,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -37836,9 +38272,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       "data-slot": "empty",
@@ -37851,7 +38287,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       "data-slot": "empty-header",
@@ -37882,7 +38318,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       "data-slot": "empty-icon",
@@ -37893,7 +38329,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       "data-slot": "empty-title",
@@ -37903,7 +38339,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       "data-slot": "empty-description",
@@ -37916,7 +38352,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
     "div",
     {
       "data-slot": "empty-content",
@@ -37930,11 +38366,11 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-var import_react68 = require("react");
+var import_react70 = require("react");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -37952,7 +38388,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     "legend",
     {
       "data-slot": "field-legend",
@@ -37968,7 +38404,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     "div",
     {
       "data-slot": "field-group",
@@ -38008,7 +38444,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     "div",
     {
       role: "group",
@@ -38020,7 +38456,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     "div",
     {
       "data-slot": "field-content",
@@ -38036,7 +38472,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     Label,
     {
       "data-slot": "field-label",
@@ -38051,7 +38487,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     "div",
     {
       "data-slot": "field-label",
@@ -38064,7 +38500,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     "p",
     {
       "data-slot": "field-description",
@@ -38083,7 +38519,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(
     "div",
     {
       "data-slot": "field-separator",
@@ -38094,8 +38530,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -38113,7 +38549,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = (0, import_react68.useMemo)(() => {
+  const content = (0, import_react70.useMemo)(() => {
     if (children) {
       return children;
     }
@@ -38123,14 +38559,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
-      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime129.jsx)("li", { children: error.message }, index)
+    return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     "div",
     {
       role: "alert",
@@ -38144,9 +38580,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime130 = require("react/jsx-runtime");
+var import_jsx_runtime135 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -38190,7 +38626,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     "div",
     {
       role: "group",
@@ -38230,7 +38666,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     Button,
     {
       type,
@@ -38242,7 +38678,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     "span",
     {
       className: cn(
@@ -38257,7 +38693,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     Input,
     {
       "data-slot": "input-group-control",
@@ -38273,7 +38709,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -38289,9 +38725,9 @@ function InputGroupTextarea({
 // src/components/ui/item.tsx
 var import_react_slot5 = require("@radix-ui/react-slot");
 var import_class_variance_authority12 = require("class-variance-authority");
-var import_jsx_runtime131 = require("react/jsx-runtime");
+var import_jsx_runtime136 = require("react/jsx-runtime");
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "div",
     {
       role: "list",
@@ -38305,7 +38741,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -38343,7 +38779,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? import_react_slot5.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     Comp,
     {
       "data-slot": "item",
@@ -38374,7 +38810,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "div",
     {
       "data-slot": "item-media",
@@ -38385,7 +38821,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "div",
     {
       "data-slot": "item-content",
@@ -38398,7 +38834,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "div",
     {
       "data-slot": "item-title",
@@ -38411,7 +38847,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "p",
     {
       "data-slot": "item-description",
@@ -38425,7 +38861,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "div",
     {
       "data-slot": "item-actions",
@@ -38435,7 +38871,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "div",
     {
       "data-slot": "item-header",
@@ -38448,7 +38884,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
     "div",
     {
       "data-slot": "item-footer",
@@ -38462,9 +38898,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime137 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     "kbd",
     {
       "data-slot": "kbd",
@@ -38479,7 +38915,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime137.jsx)(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -38490,16 +38926,16 @@ function KbdGroup({ className, ...props }) {
 }
 
 // src/components/ui/sidebar.tsx
-var React99 = __toESM(require("react"), 1);
+var React100 = __toESM(require("react"), 1);
 var import_react_slot6 = require("@radix-ui/react-slot");
 var import_class_variance_authority13 = require("class-variance-authority");
 
 // src/hooks/use-mobile.tsx
-var React98 = __toESM(require("react"), 1);
+var React99 = __toESM(require("react"), 1);
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React98.useState(void 0);
-  React98.useEffect(() => {
+  const [isMobile, setIsMobile] = React99.useState(void 0);
+  React99.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -38512,22 +38948,22 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime138 = require("react/jsx-runtime");
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React99.createContext(null);
+var SidebarContext = React100.createContext(null);
 function useSidebar() {
-  const context = React99.useContext(SidebarContext);
+  const context = React100.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React99.forwardRef(
+var SidebarProvider = React100.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -38538,10 +38974,10 @@ var SidebarProvider = React99.forwardRef(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React99.useState(false);
-    const [_open, _setOpen] = React99.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React100.useState(false);
+    const [_open, _setOpen] = React100.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React99.useCallback(
+    const setOpen = React100.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -38553,10 +38989,10 @@ var SidebarProvider = React99.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React99.useCallback(() => {
+    const toggleSidebar = React100.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React99.useEffect(() => {
+    React100.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -38567,7 +39003,7 @@ var SidebarProvider = React99.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React99.useMemo(
+    const contextValue = React100.useMemo(
       () => ({
         state,
         open,
@@ -38579,7 +39015,7 @@ var SidebarProvider = React99.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
       "div",
       {
         style: {
@@ -38599,7 +39035,7 @@ var SidebarProvider = React99.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React99.forwardRef(
+var Sidebar = React100.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -38610,7 +39046,7 @@ var Sidebar = React99.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         "div",
         {
           className: cn(
@@ -38624,7 +39060,7 @@ var Sidebar = React99.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -38635,16 +39071,16 @@ var Sidebar = React99.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
       "div",
       {
         ref,
@@ -38654,7 +39090,7 @@ var Sidebar = React99.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             "div",
             {
               className: cn(
@@ -38665,7 +39101,7 @@ var Sidebar = React99.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
             "div",
             {
               className: cn(
@@ -38676,7 +39112,7 @@ var Sidebar = React99.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -38692,9 +39128,9 @@ var Sidebar = React99.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React99.forwardRef(({ className, onClick, ...props }, ref) => {
+var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
     Button,
     {
       ref,
@@ -38708,16 +39144,16 @@ var SidebarTrigger = React99.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(PanelLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(PanelLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React99.forwardRef(({ className, ...props }, ref) => {
+var SidebarRail = React100.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "button",
     {
       ref,
@@ -38740,8 +39176,8 @@ var SidebarRail = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "main",
     {
       ref,
@@ -38755,8 +39191,8 @@ var SidebarInset = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     Input,
     {
       ref,
@@ -38770,8 +39206,8 @@ var SidebarInput = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       ref,
@@ -38782,8 +39218,8 @@ var SidebarHeader = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       ref,
@@ -38794,8 +39230,8 @@ var SidebarFooter = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     Separator2,
     {
       ref,
@@ -38806,8 +39242,8 @@ var SidebarSeparator = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       ref,
@@ -38821,8 +39257,8 @@ var SidebarContent = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarGroup = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     "div",
     {
       ref,
@@ -38833,9 +39269,9 @@ var SidebarGroup = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React99.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupLabel = React100.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     Comp,
     {
       ref,
@@ -38850,9 +39286,9 @@ var SidebarGroupLabel = React99.forwardRef(({ className, asChild = false, ...pro
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React99.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupAction = React100.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     Comp,
     {
       ref,
@@ -38869,7 +39305,7 @@ var SidebarGroupAction = React99.forwardRef(({ className, asChild = false, ...pr
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
   "div",
   {
     ref,
@@ -38879,7 +39315,7 @@ var SidebarGroupContent = React99.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
   "ul",
   {
     ref,
@@ -38889,7 +39325,7 @@ var SidebarMenu = React99.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
   "li",
   {
     ref,
@@ -38919,7 +39355,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority13.cva)(
     }
   }
 );
-var SidebarMenuButton = React99.forwardRef(
+var SidebarMenuButton = React100.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -38931,7 +39367,7 @@ var SidebarMenuButton = React99.forwardRef(
   }, ref) => {
     const Comp = asChild ? import_react_slot6.Slot : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
       Comp,
       {
         ref,
@@ -38950,9 +39386,9 @@ var SidebarMenuButton = React99.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
         TooltipContent,
         {
           side: "right",
@@ -38965,9 +39401,9 @@ var SidebarMenuButton = React99.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React99.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+var SidebarMenuAction = React100.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "button";
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     Comp,
     {
       ref,
@@ -38988,7 +39424,7 @@ var SidebarMenuAction = React99.forwardRef(({ className, asChild = false, showOn
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
   "div",
   {
     ref,
@@ -39006,11 +39442,11 @@ var SidebarMenuBadge = React99.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React99.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React99.useMemo(() => {
+var SidebarMenuSkeleton = React100.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React100.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
     "div",
     {
       ref,
@@ -39018,14 +39454,14 @@ var SidebarMenuSkeleton = React99.forwardRef(({ className, showIcon = false, ...
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -39040,7 +39476,7 @@ var SidebarMenuSkeleton = React99.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
   "ul",
   {
     ref,
@@ -39054,11 +39490,11 @@ var SidebarMenuSub = React99.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React99.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("li", { ref, ...props }));
+var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React99.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+var SidebarMenuSubButton = React100.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? import_react_slot6.Slot : "a";
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
     Comp,
     {
       ref,
@@ -39082,20 +39518,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
-var import_jsx_runtime134 = require("react/jsx-runtime");
+var import_jsx_runtime139 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
     import_sonner.Toaster,
     {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -39111,26 +39547,26 @@ var Toaster = ({ ...props }) => {
 };
 
 // src/components/ui/toggle-group.tsx
-var React100 = __toESM(require("react"), 1);
+var React101 = __toESM(require("react"), 1);
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
-var import_jsx_runtime135 = require("react/jsx-runtime");
-var ToggleGroupContext = React100.createContext({
+var import_jsx_runtime140 = require("react/jsx-runtime");
+var ToggleGroupContext = React101.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React100.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+var ToggleGroup = React101.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React100.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React100.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime135.jsx)(
+var ToggleGroupItem = React101.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React101.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -39149,7 +39585,7 @@ var ToggleGroupItem = React100.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-var import_jsx_runtime136 = require("react/jsx-runtime");
+var import_jsx_runtime141 = require("react/jsx-runtime");
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -39241,24 +39677,24 @@ var COMPONENT_SUGGESTIONS = {
 };
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
     "div",
     {
       className: "p-4 border-2 border-amber-500/50 rounded-lg bg-amber-50/80 space-y-2 my-2",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
+            /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
           ] })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime136.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
+        /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -39338,7 +39774,7 @@ var PXEngineRenderer = ({
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (import_react69.default.isValidElement(component)) {
+    if (import_react71.default.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -39394,6 +39830,7 @@ var PXEngineRenderer = ({
         console.warn(
           `[PXEngineRenderer] Component not found: ${componentName}`
         );
+        return null;
       }
     }
     const resolvedNormalized = resolvedIdentifier.charAt(0).toUpperCase() + resolvedIdentifier.slice(1);
@@ -39416,7 +39853,7 @@ var PXEngineRenderer = ({
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -39428,7 +39865,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -39440,7 +39877,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime136.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
@@ -39614,6 +40051,9 @@ var PXEngineRenderer = ({
   MenubarSeparator,
   MenubarShortcut,
   MenubarTrigger,
+  MultiAgentCard,
+  MultiAgentPlan,
+  MultiAgentUISelector,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
@@ -39678,6 +40118,7 @@ var PXEngineRenderer = ({
   SliderAtom,
   Spinner,
   SpinnerAtom,
+  StageIndicator,
   StatsGrid,
   StepWizard,
   Switch,
@@ -39708,6 +40149,7 @@ var PXEngineRenderer = ({
   TooltipProvider,
   TooltipTrigger,
   TopPostsGrid,
+  UIComponentSelector,
   VideoAtom,
   WorkflowVisualizer,
   cn