pxengine 0.1.34 → 0.1.36

package/dist/index.mjs

@@ -5,7 +5,7 @@ var __export = (target, all) => {
 };
 
 // src/render/PXEngineRenderer.tsx
-import React101 from "react";
+import React102 from "react";
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -33324,16 +33324,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
 });
 
@@ -36675,7 +36680,7 @@ var ToolListCard = ({
     "div",
     {
       className: cn(
-        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        "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: [
@@ -36702,10 +36707,10 @@ var ToolListCard = ({
                     /* @__PURE__ */ jsx122("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-[var(--primary-color)]/[0.08]", children: /* @__PURE__ */ jsx122(ToolIcon, { className: "w-3 h-3 text-[var(--primary-color)]/60" }) }),
                     /* @__PURE__ */ jsxs81("div", { className: "flex-1 min-w-0", children: [
                       /* @__PURE__ */ jsxs81("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ jsx122("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: tool.display_name }),
-                        /* @__PURE__ */ jsx122("span", { className: "text-[11px] font-mono px-1.5 py-0.5 rounded bg-[var(--foreground)]/[0.06] text-[var(--foreground)]/50 border border-[var(--foreground)]/[0.06]", children: tool.name })
+                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ jsx122("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
+                        /* @__PURE__ */ jsx122("span", { className: "text-[11px] font-mono px-1.5 py-0.5 rounded bg-[var(--foreground)]/[0.06] text-[var(--foreground)]/50 border border-[var(--foreground)]/[0.06] truncate", children: tool.name })
                       ] }),
-                      tool.description && /* @__PURE__ */ jsx122("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5", children: tool.description })
+                      tool.description && /* @__PURE__ */ jsx122("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5 break-words whitespace-normal", children: tool.description })
                     ] })
                   ]
                 },
@@ -36808,7 +36813,7 @@ var AgentCard = ({
     "div",
     {
       className: cn(
-        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        "text-foreground hover:bg-muted/50 hover:text-foreground my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
         className
       ),
       children: [
@@ -36817,40 +36822,19 @@ var AgentCard = ({
             /* @__PURE__ */ jsx123(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
             /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] text-lg font-bold", children: agent.display_name.charAt(0) })
           ] }),
-          /* @__PURE__ */ jsx123("div", { className: "flex-1 min-w-0", children: isEditing ? /* @__PURE__ */ jsxs82("div", { className: "space-y-2", children: [
-            /* @__PURE__ */ jsx123(
-              "input",
-              {
-                type: "text",
-                value: editState.display_name,
-                onChange: (e) => setEditState((s) => ({ ...s, display_name: e.target.value })),
-                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-sm text-[var(--foreground)] font-semibold outline-none focus:border-[var(--primary-color)] transition-colors",
-                placeholder: "Display name"
-              }
-            ),
-            /* @__PURE__ */ jsx123(
-              "textarea",
-              {
-                value: editState.description,
-                onChange: (e) => setEditState((s) => ({ ...s, description: e.target.value })),
-                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-xs text-[var(--foreground)]/70 outline-none focus:border-[var(--primary-color)] transition-colors resize-none",
-                rows: 2,
-                placeholder: "Description"
-              }
-            ),
-            /* @__PURE__ */ jsx123(
-              "input",
-              {
-                type: "text",
-                value: editState.image,
-                onChange: (e) => setEditState((s) => ({ ...s, image: e.target.value })),
-                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-xs text-[var(--foreground)]/70 font-mono outline-none focus:border-[var(--primary-color)] transition-colors",
-                placeholder: "Avatar image URL"
-              }
-            )
-          ] }) : /* @__PURE__ */ jsxs82(Fragment4, { children: [
+          /* @__PURE__ */ jsxs82("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsx123("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
+              isEditing ? /* @__PURE__ */ jsx123(
+                "input",
+                {
+                  type: "text",
+                  value: editState.display_name,
+                  onChange: (e) => setEditState((s) => ({ ...s, display_name: e.target.value })),
+                  disabled: isSaving,
+                  className: "flex-1 bg-transparent border-b border-[var(--primary-color)]/30 text-sm font-semibold text-[var(--foreground)] outline-none focus:border-[var(--primary-color)] transition-all",
+                  placeholder: "Agent name"
+                }
+              ) : /* @__PURE__ */ jsx123("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
               /* @__PURE__ */ jsx123("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: agent.name }),
               /* @__PURE__ */ jsx123(
                 "span",
@@ -36863,8 +36847,32 @@ var AgentCard = ({
                 }
               )
             ] }),
-            /* @__PURE__ */ jsx123("p", { className: "text-xs text-[var(--foreground)]/60 mt-1 leading-relaxed", children: agent.description })
-          ] }) }),
+            /* @__PURE__ */ jsx123("div", { className: "mt-1", children: isEditing ? /* @__PURE__ */ jsx123(
+              "textarea",
+              {
+                value: editState.description,
+                onChange: (e) => setEditState((s) => ({ ...s, description: e.target.value })),
+                disabled: isSaving,
+                className: "w-full bg-transparent border-b border-[var(--primary-color)]/30 text-xs text-[var(--foreground)]/70 outline-none focus:border-[var(--primary-color)] transition-all resize-none leading-relaxed min-h-[40px]",
+                rows: 2,
+                placeholder: "Describe this agent..."
+              }
+            ) : /* @__PURE__ */ jsx123("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed", children: agent.description }) }),
+            isEditing && /* @__PURE__ */ jsxs82("div", { className: "mt-2 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx123("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold", children: "Avatar:" }),
+              /* @__PURE__ */ jsx123(
+                "input",
+                {
+                  type: "text",
+                  value: editState.image,
+                  onChange: (e) => setEditState((s) => ({ ...s, image: e.target.value })),
+                  disabled: isSaving,
+                  className: "flex-1 bg-[var(--foreground)]/[0.03] border border-[var(--border-color)] rounded px-2 py-0.5 text-[10px] text-[var(--foreground)]/50 font-mono outline-none focus:border-[var(--primary-color)]/50 transition-colors",
+                  placeholder: "URL"
+                }
+              )
+            ] })
+          ] }),
           editable && onSave && /* @__PURE__ */ jsx123("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ jsxs82(Fragment4, { children: [
             /* @__PURE__ */ jsx123(
               "button",
@@ -36880,7 +36888,7 @@ var AgentCard = ({
               {
                 onClick: handleSave,
                 disabled: isSaving,
-                className: "text-[11px] px-2.5 py-1 rounded-md bg-[var(--primary-color)] text-white hover:opacity-90 transition-opacity disabled:opacity-50",
+                className: "text-[11px] px-2.5 py-1 rounded-md bg-[var(--border-color)] text-foreground border border-[var(--border-color)] hover:opacity-90 transition-opacity disabled:opacity-50",
                 children: isSaving ? "Saving..." : "Save"
               }
             )
@@ -36955,7 +36963,7 @@ var AgentDataTable = ({
     "div",
     {
       className: cn(
-        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        "text-foreground hover:bg-muted/50 hover:text-foreground my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
         className
       ),
       children: /* @__PURE__ */ jsx124("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs83("table", { className: "w-full text-xs", children: [
@@ -36999,7 +37007,7 @@ var WorkflowVisualizer = ({
     "div",
     {
       className: cn(
-        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        "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: [
@@ -37130,7 +37138,7 @@ var InstructionPreview = ({
     "div",
     {
       className: cn(
-        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        "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: [
@@ -37197,6 +37205,432 @@ var InstructionPreview = ({
   );
 };
 
+// src/molecules/agent-builder/UIComponentSelector/UIComponentSelector.tsx
+import { useState as useState13 } from "react";
+import { jsx as jsx127, jsxs as jsxs86 } from "react/jsx-runtime";
+function UIComponentSelector({
+  components,
+  onSelect,
+  className
+}) {
+  const [selected, setSelected] = useState13(/* @__PURE__ */ new Set());
+  const [submitted, setSubmitted] = useState13(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__ */ jsxs86(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border bg-card overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs86("div", { className: "px-4 py-3 border-b border-border bg-muted/50", children: [
+          /* @__PURE__ */ jsx127("h3", { className: "text-sm font-semibold text-foreground", children: "Select UI Components" }),
+          /* @__PURE__ */ jsx127("p", { className: "text-xs text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
+        ] }),
+        /* @__PURE__ */ jsx127("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ jsxs86("div", { children: [
+          /* @__PURE__ */ jsx127("h4", { className: "text-xs font-medium text-muted-foreground uppercase tracking-wider mb-2", children: category }),
+          /* @__PURE__ */ jsx127("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ jsxs86(
+            "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__ */ jsx127(
+                  "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__ */ jsxs86("div", { className: "flex-1 min-w-0", children: [
+                  /* @__PURE__ */ jsx127("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
+                  /* @__PURE__ */ jsx127("span", { className: "ml-2 text-xs text-muted-foreground", children: comp.description })
+                ] })
+              ]
+            },
+            comp.name
+          )) })
+        ] }, category)) }),
+        !submitted && /* @__PURE__ */ jsxs86("div", { className: "px-4 py-3 border-t border-border flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxs86("span", { className: "text-xs text-muted-foreground", children: [
+            selected.size,
+            " selected"
+          ] }),
+          /* @__PURE__ */ jsx127(
+            "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
+import { jsx as jsx128, jsxs as jsxs87 } from "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__ */ jsxs87(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs87("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+          /* @__PURE__ */ jsx128("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__ */ jsx128("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
+          /* @__PURE__ */ jsxs87("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx128("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
+              /* @__PURE__ */ jsx128("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__ */ jsx128("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__ */ jsx128(
+                "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__ */ jsx128("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1", children: description })
+          ] })
+        ] }),
+        stages.length > 0 && /* @__PURE__ */ jsxs87("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
+          /* @__PURE__ */ jsxs87("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-3", children: [
+            "Stages (",
+            stages.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx128("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ jsxs87("div", { className: "flex items-stretch", children: [
+            /* @__PURE__ */ jsxs87("div", { className: "flex flex-col items-center mr-3 w-5", children: [
+              /* @__PURE__ */ jsx128(
+                "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__ */ jsx128("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[16px]" })
+            ] }),
+            /* @__PURE__ */ jsxs87("div", { className: "flex-1 mb-2 p-3 rounded-lg border border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: [
+              /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-2", children: [
+                /* @__PURE__ */ jsx128("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
+                /* @__PURE__ */ jsx128("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30", children: stage.agent_name })
+              ] }),
+              /* @__PURE__ */ jsxs87("div", { className: "flex items-center gap-3 mt-1.5 text-[10px] text-[var(--foreground)]/50", children: [
+                stage.tools && stage.tools.length > 0 && /* @__PURE__ */ jsxs87("span", { children: [
+                  stage.tools.length,
+                  " tool",
+                  stage.tools.length !== 1 ? "s" : ""
+                ] }),
+                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ jsxs87("span", { children: [
+                  stage.ui_components.length,
+                  " component",
+                  stage.ui_components.length !== 1 ? "s" : ""
+                ] })
+              ] })
+            ] })
+          ] }, stage.agent_name || idx)) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/MultiAgentPlan/MultiAgentPlan.tsx
+import { jsx as jsx129, jsxs as jsxs88 } from "react/jsx-runtime";
+var MultiAgentPlan = ({
+  stages = [],
+  className
+}) => {
+  return /* @__PURE__ */ jsxs88(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx129("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs88("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx129("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ jsx129(
+            "svg",
+            {
+              width: "10",
+              height: "10",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: "text-violet-600",
+              children: /* @__PURE__ */ jsx129("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx129("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
+          /* @__PURE__ */ jsx129("span", { className: "text-[10px] px-1.5 py-0.5 rounded-full bg-amber-500/10 text-amber-600 font-medium", children: "Draft" })
+        ] }) }),
+        /* @__PURE__ */ jsx129("div", { className: "px-4 py-3", children: /* @__PURE__ */ jsx129("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ jsxs88("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsxs88("div", { className: "flex flex-col items-center mr-3 w-6", children: [
+            /* @__PURE__ */ jsx129("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__ */ jsx129("div", { className: "w-px flex-1 bg-[var(--primary-color)]/20 min-h-[12px]" })
+          ] }),
+          /* @__PURE__ */ jsxs88("div", { className: "flex-1 mb-2 pb-2", children: [
+            /* @__PURE__ */ jsx129("p", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
+            stage.description && /* @__PURE__ */ jsx129("p", { className: "text-[11px] text-[var(--foreground)]/50 mt-0.5", children: stage.description }),
+            stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ jsx129("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ jsx129(
+              "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
+import { useState as useState14, useCallback as useCallback5 } from "react";
+import { jsx as jsx130, jsxs as jsxs89 } from "react/jsx-runtime";
+var MultiAgentUISelector = ({
+  stages = [],
+  components = [],
+  onSelect,
+  className
+}) => {
+  const [activeStageId, setActiveStageId] = useState14(stages[0]?.id || "");
+  const [selections, setSelections] = useState14(
+    () => {
+      const init = {};
+      for (const stage of stages) {
+        init[stage.id] = /* @__PURE__ */ new Set();
+      }
+      return init;
+    }
+  );
+  const [submitted, setSubmitted] = useState14(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 = useCallback5(
+    (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 = useCallback5(() => {
+    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__ */ jsxs89(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx130("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.02]", children: /* @__PURE__ */ jsxs89("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsx130("div", { className: "w-4 h-4 rounded bg-[var(--primary-color)]/20 flex items-center justify-center", children: /* @__PURE__ */ jsxs89(
+            "svg",
+            {
+              width: "10",
+              height: "10",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "currentColor",
+              strokeWidth: "2",
+              className: "text-[var(--primary-color)]",
+              children: [
+                /* @__PURE__ */ jsx130("rect", { x: "3", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx130("rect", { x: "14", y: "3", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx130("rect", { x: "3", y: "14", width: "7", height: "7" }),
+                /* @__PURE__ */ jsx130("rect", { x: "14", y: "14", width: "7", height: "7" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsx130("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "UI Components per Stage" })
+        ] }) }),
+        /* @__PURE__ */ jsx130("div", { className: "flex border-b border-[var(--border-color)] px-4", children: stages.map((stage) => /* @__PURE__ */ jsx130(
+          "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__ */ jsxs89("div", { className: "px-4 py-3", children: [
+          activeStage && /* @__PURE__ */ jsxs89("p", { className: "text-[10px] text-[var(--foreground)]/40 mb-3", children: [
+            "Select components for ",
+            /* @__PURE__ */ jsx130("strong", { children: activeStage.name }),
+            " (",
+            activeStage.agent_name,
+            ")"
+          ] }),
+          Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ jsxs89("div", { className: "mb-3", children: [
+            /* @__PURE__ */ jsx130("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-1.5", children: category }),
+            /* @__PURE__ */ jsx130("div", { className: "grid grid-cols-2 gap-1.5", children: comps.map((comp) => {
+              const isSelected = selections[activeStageId]?.has(comp.name) || false;
+              return /* @__PURE__ */ jsxs89(
+                "button",
+                {
+                  onClick: () => toggleComponent(activeStageId, comp.name),
+                  disabled: submitted,
+                  className: cn(
+                    "text-left p-2.5 rounded-lg border text-[11px] transition-all",
+                    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__ */ jsxs89("div", { className: "flex items-center gap-1.5", children: [
+                      /* @__PURE__ */ jsx130(
+                        "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__ */ jsx130(
+                            "svg",
+                            {
+                              width: "8",
+                              height: "8",
+                              viewBox: "0 0 24 24",
+                              fill: "none",
+                              stroke: "white",
+                              strokeWidth: "3",
+                              children: /* @__PURE__ */ jsx130("polyline", { points: "20 6 9 17 4 12" })
+                            }
+                          )
+                        }
+                      ),
+                      /* @__PURE__ */ jsx130("span", { className: "font-medium text-[var(--foreground)]", children: comp.display_name })
+                    ] }),
+                    /* @__PURE__ */ jsx130("p", { className: "text-[10px] text-[var(--foreground)]/40 mt-0.5 ml-5", children: comp.description })
+                  ]
+                },
+                comp.name
+              );
+            }) })
+          ] }, category))
+        ] }),
+        !submitted && /* @__PURE__ */ jsx130("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx130(
+          "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__ */ jsx130("div", { className: "px-4 pb-3", children: /* @__PURE__ */ jsx130("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/StageIndicator/StageIndicator.tsx
+import { jsx as jsx131, jsxs as jsxs90 } from "react/jsx-runtime";
+var StageIndicator = ({
+  stage_name,
+  agent_name,
+  className
+}) => {
+  return /* @__PURE__ */ jsxs90(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-3 my-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx131("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
+        /* @__PURE__ */ jsxs90("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__ */ jsx131("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" }),
+          /* @__PURE__ */ jsx131("span", { className: "text-[10px] font-medium text-violet-600", children: stage_name || agent_name })
+        ] }),
+        /* @__PURE__ */ jsx131("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
+      ]
+    }
+  );
+};
+
 // src/components/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
@@ -37489,7 +37923,7 @@ __export(ui_exports, {
 // src/components/ui/button-group.tsx
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
 var buttonGroupVariants = cva8(
   "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",
   {
@@ -37509,7 +37943,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx132(
     "div",
     {
       role: "group",
@@ -37526,7 +37960,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? Slot4 : "div";
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx132(
     Comp,
     {
       className: cn(
@@ -37542,7 +37976,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx132(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -37558,9 +37992,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 import { cva as cva9 } from "class-variance-authority";
-import { jsx as jsx128 } from "react/jsx-runtime";
+import { jsx as jsx133 } from "react/jsx-runtime";
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       "data-slot": "empty",
@@ -37573,7 +38007,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       "data-slot": "empty-header",
@@ -37604,7 +38038,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       "data-slot": "empty-icon",
@@ -37615,7 +38049,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       "data-slot": "empty-title",
@@ -37625,7 +38059,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       "data-slot": "empty-description",
@@ -37638,7 +38072,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       "data-slot": "empty-content",
@@ -37654,9 +38088,9 @@ function EmptyContent({ className, ...props }) {
 // src/components/ui/field.tsx
 import { useMemo as useMemo9 } from "react";
 import { cva as cva10 } from "class-variance-authority";
-import { jsx as jsx129, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx134, jsxs as jsxs91 } from "react/jsx-runtime";
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -37674,7 +38108,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     "legend",
     {
       "data-slot": "field-legend",
@@ -37690,7 +38124,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     "div",
     {
       "data-slot": "field-group",
@@ -37730,7 +38164,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     "div",
     {
       role: "group",
@@ -37742,7 +38176,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     "div",
     {
       "data-slot": "field-content",
@@ -37758,7 +38192,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     Label,
     {
       "data-slot": "field-label",
@@ -37773,7 +38207,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     "div",
     {
       "data-slot": "field-label",
@@ -37786,7 +38220,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     "p",
     {
       "data-slot": "field-description",
@@ -37805,7 +38239,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs86(
+  return /* @__PURE__ */ jsxs91(
     "div",
     {
       "data-slot": "field-separator",
@@ -37816,8 +38250,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx129(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ jsx129(
+        /* @__PURE__ */ jsx134(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx134(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -37845,14 +38279,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ jsx129("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
-      (error, index) => error?.message && /* @__PURE__ */ jsx129("li", { children: error.message }, index)
+    return /* @__PURE__ */ jsx134("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsx134("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     "div",
     {
       role: "alert",
@@ -37866,9 +38300,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx130 } from "react/jsx-runtime";
+import { jsx as jsx135 } from "react/jsx-runtime";
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx135(
     "div",
     {
       "data-slot": "input-group",
@@ -37912,7 +38346,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx135(
     "div",
     {
       role: "group",
@@ -37952,7 +38386,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx135(
     Button,
     {
       type,
@@ -37964,7 +38398,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx135(
     "span",
     {
       className: cn(
@@ -37979,7 +38413,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx135(
     Input,
     {
       "data-slot": "input-group-control",
@@ -37995,7 +38429,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsx135(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -38011,9 +38445,9 @@ function InputGroupTextarea({
 // src/components/ui/item.tsx
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx131 } from "react/jsx-runtime";
+import { jsx as jsx136 } from "react/jsx-runtime";
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     "div",
     {
       role: "list",
@@ -38027,7 +38461,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -38065,7 +38499,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? Slot5 : "div";
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     Comp,
     {
       "data-slot": "item",
@@ -38096,7 +38530,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     "div",
     {
       "data-slot": "item-media",
@@ -38107,7 +38541,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     "div",
     {
       "data-slot": "item-content",
@@ -38120,7 +38554,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     "div",
     {
       "data-slot": "item-title",
@@ -38133,7 +38567,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     "p",
     {
       "data-slot": "item-description",
@@ -38147,7 +38581,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     "div",
     {
       "data-slot": "item-actions",
@@ -38157,7 +38591,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     "div",
     {
       "data-slot": "item-header",
@@ -38170,7 +38604,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsx136(
     "div",
     {
       "data-slot": "item-footer",
@@ -38184,9 +38618,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-import { jsx as jsx132 } from "react/jsx-runtime";
+import { jsx as jsx137 } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx137(
     "kbd",
     {
       "data-slot": "kbd",
@@ -38201,7 +38635,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx132(
+  return /* @__PURE__ */ jsx137(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -38212,16 +38646,16 @@ function KbdGroup({ className, ...props }) {
 }
 
 // src/components/ui/sidebar.tsx
-import * as React99 from "react";
+import * as React100 from "react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { cva as cva13 } from "class-variance-authority";
 
 // src/hooks/use-mobile.tsx
-import * as React98 from "react";
+import * as React99 from "react";
 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);
@@ -38234,22 +38668,22 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-import { jsx as jsx133, jsxs as jsxs87 } from "react/jsx-runtime";
+import { jsx as jsx138, jsxs as jsxs92 } from "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,
@@ -38260,10 +38694,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) {
@@ -38275,10 +38709,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();
@@ -38289,7 +38723,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,
@@ -38301,7 +38735,7 @@ var SidebarProvider = React99.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    return /* @__PURE__ */ jsx133(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx133(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx133(
+    return /* @__PURE__ */ jsx138(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx138(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx138(
       "div",
       {
         style: {
@@ -38321,7 +38755,7 @@ var SidebarProvider = React99.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React99.forwardRef(
+var Sidebar = React100.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -38332,7 +38766,7 @@ var Sidebar = React99.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ jsx133(
+      return /* @__PURE__ */ jsx138(
         "div",
         {
           className: cn(
@@ -38346,7 +38780,7 @@ var Sidebar = React99.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ jsx133(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs87(
+      return /* @__PURE__ */ jsx138(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs92(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -38357,16 +38791,16 @@ var Sidebar = React99.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ jsxs87(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ jsx133(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ jsx133(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ jsxs92(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ jsx138(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ jsx138(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ jsx133("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ jsx138("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ jsxs87(
+    return /* @__PURE__ */ jsxs92(
       "div",
       {
         ref,
@@ -38376,7 +38810,7 @@ var Sidebar = React99.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx138(
             "div",
             {
               className: cn(
@@ -38387,7 +38821,7 @@ var Sidebar = React99.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ jsx133(
+          /* @__PURE__ */ jsx138(
             "div",
             {
               className: cn(
@@ -38398,7 +38832,7 @@ var Sidebar = React99.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ jsx133(
+              children: /* @__PURE__ */ jsx138(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -38414,9 +38848,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__ */ jsxs87(
+  return /* @__PURE__ */ jsxs92(
     Button,
     {
       ref,
@@ -38430,16 +38864,16 @@ var SidebarTrigger = React99.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx133(PanelLeft, {}),
-        /* @__PURE__ */ jsx133("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx138(PanelLeft, {}),
+        /* @__PURE__ */ jsx138("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__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     "button",
     {
       ref,
@@ -38462,8 +38896,8 @@ var SidebarRail = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx133(
+var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx138(
     "main",
     {
       ref,
@@ -38477,8 +38911,8 @@ var SidebarInset = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx133(
+var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx138(
     Input,
     {
       ref,
@@ -38492,8 +38926,8 @@ var SidebarInput = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx133(
+var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       ref,
@@ -38504,8 +38938,8 @@ var SidebarHeader = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx133(
+var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       ref,
@@ -38516,8 +38950,8 @@ var SidebarFooter = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx133(
+var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx138(
     Separator2,
     {
       ref,
@@ -38528,8 +38962,8 @@ var SidebarSeparator = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx133(
+var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       ref,
@@ -38543,8 +38977,8 @@ var SidebarContent = React99.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React99.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx133(
+var SidebarGroup = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx138(
     "div",
     {
       ref,
@@ -38555,9 +38989,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 ? Slot6 : "div";
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     Comp,
     {
       ref,
@@ -38572,9 +39006,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 ? Slot6 : "button";
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     Comp,
     {
       ref,
@@ -38591,7 +39025,7 @@ var SidebarGroupAction = React99.forwardRef(({ className, asChild = false, ...pr
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
+var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
   "div",
   {
     ref,
@@ -38601,7 +39035,7 @@ var SidebarGroupContent = React99.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
+var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
   "ul",
   {
     ref,
@@ -38611,7 +39045,7 @@ var SidebarMenu = React99.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
+var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
   "li",
   {
     ref,
@@ -38641,7 +39075,7 @@ var sidebarMenuButtonVariants = cva13(
     }
   }
 );
-var SidebarMenuButton = React99.forwardRef(
+var SidebarMenuButton = React100.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -38653,7 +39087,7 @@ var SidebarMenuButton = React99.forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot6 : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ jsx133(
+    const button = /* @__PURE__ */ jsx138(
       Comp,
       {
         ref,
@@ -38672,9 +39106,9 @@ var SidebarMenuButton = React99.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ jsxs87(Tooltip, { children: [
-      /* @__PURE__ */ jsx133(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ jsx133(
+    return /* @__PURE__ */ jsxs92(Tooltip, { children: [
+      /* @__PURE__ */ jsx138(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx138(
         TooltipContent,
         {
           side: "right",
@@ -38687,9 +39121,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 ? Slot6 : "button";
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     Comp,
     {
       ref,
@@ -38710,7 +39144,7 @@ var SidebarMenuAction = React99.forwardRef(({ className, asChild = false, showOn
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
+var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
   "div",
   {
     ref,
@@ -38728,11 +39162,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__ */ jsxs87(
+  return /* @__PURE__ */ jsxs92(
     "div",
     {
       ref,
@@ -38740,14 +39174,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__ */ jsx133(
+        showIcon && /* @__PURE__ */ jsx138(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ jsx133(
+        /* @__PURE__ */ jsx138(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -38762,7 +39196,7 @@ var SidebarMenuSkeleton = React99.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
+var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
   "ul",
   {
     ref,
@@ -38776,11 +39210,11 @@ var SidebarMenuSub = React99.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React99.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx133("li", { ref, ...props }));
+var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx138("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 ? Slot6 : "a";
-  return /* @__PURE__ */ jsx133(
+  return /* @__PURE__ */ jsx138(
     Comp,
     {
       ref,
@@ -38804,20 +39238,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
-import { jsx as jsx134 } from "react/jsx-runtime";
+import { jsx as jsx139 } from "react/jsx-runtime";
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
-  return /* @__PURE__ */ jsx134(
+  return /* @__PURE__ */ jsx139(
     Sonner,
     {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx134(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ jsx134(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ jsx134(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ jsx134(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ jsx134(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ jsx139(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ jsx139(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ jsx139(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ jsx139(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ jsx139(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -38833,26 +39267,26 @@ var Toaster = ({ ...props }) => {
 };
 
 // src/components/ui/toggle-group.tsx
-import * as React100 from "react";
+import * as React101 from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { jsx as jsx135 } from "react/jsx-runtime";
-var ToggleGroupContext = React100.createContext({
+import { jsx as jsx140 } from "react/jsx-runtime";
+var ToggleGroupContext = React101.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React100.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx135(
+var ToggleGroup = React101.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx140(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx135(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx140(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__ */ jsx135(
+var ToggleGroupItem = React101.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React101.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx140(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -38871,7 +39305,7 @@ var ToggleGroupItem = React100.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-import { jsx as jsx136, jsxs as jsxs88 } from "react/jsx-runtime";
+import { jsx as jsx141, jsxs as jsxs93 } from "react/jsx-runtime";
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -38963,24 +39397,24 @@ var COMPONENT_SUGGESTIONS = {
 };
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ jsxs88(
+  return /* @__PURE__ */ jsxs93(
     "div",
     {
       className: "p-4 border-2 border-amber-500/50 rounded-lg bg-amber-50/80 space-y-2 my-2",
       children: [
-        /* @__PURE__ */ jsxs88("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx136("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ jsxs88("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxs88("p", { className: "text-sm font-semibold text-amber-900", children: [
+        /* @__PURE__ */ jsxs93("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx141("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsxs93("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxs93("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__PURE__ */ jsx136("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
+            /* @__PURE__ */ jsx141("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs88("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
-          /* @__PURE__ */ jsx136("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
-          /* @__PURE__ */ jsx136("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
+        /* @__PURE__ */ jsxs93("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ jsx141("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ jsx141("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -39060,7 +39494,7 @@ var PXEngineRenderer = ({
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (React101.isValidElement(component)) {
+    if (React102.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -39138,7 +39572,7 @@ var PXEngineRenderer = ({
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ jsx136(
+      return /* @__PURE__ */ jsx141(
         TargetComponent,
         {
           ...finalProps,
@@ -39150,7 +39584,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ jsx136(
+      return /* @__PURE__ */ jsx141(
         TargetComponent,
         {
           ...finalProps,
@@ -39162,7 +39596,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ jsx136("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ jsx141("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
 };
 export {
   Accordion,
@@ -39335,6 +39769,9 @@ export {
   MenubarSeparator,
   MenubarShortcut,
   MenubarTrigger,
+  MultiAgentCard,
+  MultiAgentPlan,
+  MultiAgentUISelector,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
@@ -39399,6 +39836,7 @@ export {
   SliderAtom,
   Spinner,
   SpinnerAtom,
+  StageIndicator,
   StatsGrid,
   StepWizard,
   Switch,
@@ -39429,6 +39867,7 @@ export {
   TooltipProvider,
   TooltipTrigger,
   TopPostsGrid,
+  UIComponentSelector,
   VideoAtom,
   WorkflowVisualizer,
   cn