pxengine 0.1.58 → 0.1.60

package/dist/index.cjs

@@ -36,8 +36,6 @@ __export(index_exports, {
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
   ActionButton: () => ActionButton,
-  AgentCard: () => AgentCard,
-  AgentDataTable: () => AgentDataTable,
   Alert: () => Alert,
   AlertAtom: () => AlertAtom,
   AlertDescription: () => AlertDescription,
@@ -196,7 +194,6 @@ __export(index_exports, {
   InputOTPGroup: () => InputOTPGroup,
   InputOTPSeparator: () => InputOTPSeparator,
   InputOTPSlot: () => InputOTPSlot,
-  InstructionPreview: () => InstructionPreview,
   KbdAtom: () => KbdAtom,
   KeywordBundlesDisplay: () => KeywordBundlesDisplay,
   KeywordBundlesEdit: () => KeywordBundlesEdit,
@@ -214,9 +211,6 @@ __export(index_exports, {
   MenubarSeparator: () => MenubarSeparator,
   MenubarShortcut: () => MenubarShortcut,
   MenubarTrigger: () => MenubarTrigger,
-  MultiAgentCard: () => MultiAgentCard,
-  MultiAgentPlan: () => MultiAgentPlan,
-  MultiAgentUISelector: () => MultiAgentUISelector,
   NavigationMenu: () => NavigationMenu,
   NavigationMenuContent: () => NavigationMenuContent,
   NavigationMenuItem: () => NavigationMenuItem,
@@ -284,7 +278,6 @@ __export(index_exports, {
   SocialPostCard: () => SocialPostCard,
   Spinner: () => Spinner,
   SpinnerAtom: () => SpinnerAtom,
-  StageIndicator: () => StageIndicator,
   StatsGrid: () => StatsGrid,
   StepWizard: () => StepWizard,
   Switch: () => Switch,
@@ -308,16 +301,13 @@ __export(index_exports, {
   TextareaAtom: () => TextareaAtom,
   TimelineAtom: () => TimelineAtom,
   ToggleAtom: () => ToggleAtom,
-  ToolListCard: () => ToolListCard,
   Tooltip: () => Tooltip,
   TooltipAtom: () => TooltipAtom,
   TooltipContent: () => TooltipContent,
   TooltipProvider: () => TooltipProvider,
   TooltipTrigger: () => TooltipTrigger,
   TopPostsGrid: () => TopPostsGrid,
-  UIComponentSelector: () => UIComponentSelector,
   VideoAtom: () => VideoAtom,
-  WorkflowVisualizer: () => WorkflowVisualizer,
   cn: () => cn,
   defaultFetchSelections: () => defaultFetchSelections,
   defaultPersistSelection: () => defaultPersistSelection,
@@ -328,7 +318,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/render/PXEngineRenderer.tsx
-var import_react83 = __toESM(require("react"), 1);
+var import_react78 = __toESM(require("react"), 1);
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -428,9 +418,11 @@ var TextAtom = ({
     label: "var(--gray400)"
   };
   const Component2 = variant === "small" || variant === "muted" || variant === "label" ? "p" : variant;
+  const hasPxBg = style && "--px-bg-color" in style;
   const wrapperStyles = {
     color: `var(--px-text-color, ${defaultColors[variant] ?? "inherit"})`,
     ...backgroundColor && { backgroundColor },
+    ...hasPxBg && { backgroundColor: "var(--px-bg-color, transparent)" },
     ...style
   };
   if (markdown) {
@@ -24893,14 +24885,20 @@ var IconAtom = ({
     console.warn(`[IconAtom] Icon "${icon}" not found in lucide-react.`);
     return null;
   }
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const resolvedColor = hasPxVars ? void 0 : color;
+  const resolvedStyle = {
+    ...hasPxVars && { color: "var(--px-text-color, currentColor)" },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     IconComponent,
     {
       size,
-      color,
+      color: resolvedColor,
       strokeWidth,
-      className: cn("shrink-0", textColor, className),
-      style
+      className: cn("shrink-0", !hasPxVars && textColor, className),
+      style: resolvedStyle
     }
   );
 };
@@ -24935,6 +24933,14 @@ var ButtonAtom = ({
   };
   const customClass = variantMap[variant] || "";
   const shadcnVariant = ["purple", "gradient"].includes(variant) ? "default" : variant;
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const mergedStyle = {
+    ...style,
+    ...hasPxVars ? {
+      backgroundColor: "var(--px-accent-color)",
+      color: "var(--px-accent-fg)"
+    } : {}
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
     Button,
     {
@@ -24943,7 +24949,8 @@ var ButtonAtom = ({
       disabled: disabled || isLoading,
       onClick: handleClick,
       className: cn("rounded-full font-semibold", customClass, className),
-      style,
+      style: mergedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LoaderCircle, { className: "mr-2 h-4 w-4 animate-spin" }),
         label
@@ -25072,6 +25079,15 @@ var CardAtom = ({
   style,
   renderComponent
 }) => {
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const mergedStyle = {
+    ...style,
+    ...hasPxVars ? {
+      backgroundColor: "var(--px-bg-color)",
+      borderColor: "var(--px-border-color)",
+      color: "var(--px-text-color)"
+    } : {}
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
     Card,
     {
@@ -25079,13 +25095,14 @@ var CardAtom = ({
         "rounded-[32px] border border-border/50 bg-card/80 text-card-foreground shadow-[0_8px_30px_rgb(0,0,0,0.04)] overflow-hidden backdrop-blur-xl ring-1 ring-border/5",
         className
       ),
-      style,
+      style: mergedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: [
         (title || description) && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(CardHeader, { children: [
           title && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardTitle, { className: "text-xl font-bold text-gray900", children: title }),
           description && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardDescription, { children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardContent, { className: "space-y-4", children: children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.default.Fragment, { children: renderComponent(child, index) }, child.id || `card-content-${index}`)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardContent, { className: "space-y-4", children: (children || []).map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.default.Fragment, { children: renderComponent(child, index) }, child.id || `card-content-${index}`)) }),
         footer && footer.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(CardFooter, { className: "bg-gray50/50 border-t border-gray200 flex flex-wrap gap-2 pt-6", children: footer.map((footerChild, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_react4.default.Fragment, { children: renderComponent(footerChild, index) }, footerChild.id || `card-footer-${index}`)) })
       ]
     }
@@ -25434,8 +25451,9 @@ var InputAtom = ({
   const alignmentClass = getAlignmentClass(style?.textAlign);
   const alignedContainerClass = cn(containerClass, alignmentClass);
   const { textAlign, ...remainingStyle } = style || {};
+  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   const labelBaseStyle = {
-    color: labelColor,
+    color: hasPxVars ? "var(--px-label-color, inherit)" : labelColor,
     backgroundColor: "transparent",
     background: "none"
   };
@@ -25455,6 +25473,14 @@ var InputAtom = ({
     );
   };
   const renderInput = () => {
+    const inputStyle = {
+      ...hasPxVars && {
+        color: "var(--px-text-color, inherit)",
+        backgroundColor: "var(--px-bg-color, transparent)",
+        borderColor: "var(--px-border-color, hsl(var(--border)))"
+      },
+      ...remainingStyle
+    };
     const commonProps = {
       placeholder,
       value: defaultValue,
@@ -25465,7 +25491,7 @@ var InputAtom = ({
         "rounded-xl border-border bg-transparent focus:ring-primary shadow-none",
         className
       ),
-      style: remainingStyle
+      style: inputStyle
     };
     switch (inputType) {
       case "textarea":
@@ -25585,7 +25611,6 @@ var InputAtom = ({
         );
     }
   };
-  const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("div", { className: alignedContainerClass, style: remainingStyle, "data-px-styled": hasPxVars ? "" : void 0, children: [
     inputType !== "checkbox" && inputType !== "switch" && renderLabel(),
     renderInput()
@@ -25701,9 +25726,22 @@ var AvatarAtom = ({
   className,
   style
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Avatar, { className: cn("h-10 w-10", className), style, children: [
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const fallbackStyle = hasPxVars ? {
+    backgroundColor: "var(--px-bg-color, var(--purple50))",
+    color: "var(--px-text-color, var(--purple100))",
+    borderColor: "var(--px-border-color, transparent)"
+  } : void 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(Avatar, { className: cn("h-10 w-10", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: [
     src && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AvatarImage, { src, alt }),
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(AvatarFallback, { className: "bg-purple50 text-purple600 font-bold uppercase", children: fallback })
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      AvatarFallback,
+      {
+        className: cn("font-bold uppercase", !hasPxVars && "bg-purple50 text-purple600"),
+        style: fallbackStyle,
+        children: fallback
+      }
+    )
   ] });
 };
 
@@ -25871,7 +25909,20 @@ var ProgressAtom = ({
   style
 }) => {
   const hasPxVars = style && Object.keys(style).some((key) => key.startsWith("--px-"));
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("w-full py-2", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Progress, { value, className: "h-2 bg-gray-100" }) });
+  const progressStyle = hasPxVars ? {
+    backgroundColor: "var(--px-track-color)"
+  } : {};
+  const wrapperStyle = {
+    ...style
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: cn("w-full py-2", className), style: wrapperStyle, "data-px-styled": hasPxVars ? "" : void 0, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    Progress,
+    {
+      value,
+      className: "h-2 bg-gray-100",
+      style: progressStyle
+    }
+  ) });
 };
 
 // src/components/ui/skeleton.tsx
@@ -25981,12 +26032,22 @@ var AlertAtom = ({
   };
   const customClass = variantMap[variant] || "";
   const shadcnVariant = ["warning", "info", "success"].includes(variant) ? "default" : variant;
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const mergedStyle = {
+    ...style,
+    ...hasPxVars ? {
+      color: "var(--px-text-color)",
+      backgroundColor: "var(--px-bg-color)",
+      borderColor: "var(--px-border-color)"
+    } : {}
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     Alert,
     {
       variant: shadcnVariant,
       className: cn("rounded-2xl", customClass, className),
-      style,
+      style: mergedStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon3, { className: "h-4 w-4" }),
         /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(AlertTitle, { className: "font-bold", children: title }),
@@ -26022,13 +26083,20 @@ Separator2.displayName = SeparatorPrimitive.Root.displayName;
 var import_jsx_runtime33 = require("react/jsx-runtime");
 var SeparatorAtom = ({
   orientation = "horizontal",
-  className
+  className,
+  style
 }) => {
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const resolvedStyle = {
+    ...hasPxVars && { backgroundColor: "var(--px-bg-color)" },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     Separator2,
     {
       orientation,
-      className: cn("bg-gray-100", className)
+      className: cn("bg-gray-100", className),
+      style: resolvedStyle
     }
   );
 };
@@ -26149,11 +26217,11 @@ var TableAtom = ({
         borderColor
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Table3, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableHeader, { style: { backgroundColor: headerBgColor }, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableRow, { children: safeHeaders.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(TableRow, { style: { backgroundColor: headerBgColor }, children: safeHeaders.map((header, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
           TableHead,
           {
             className: "text-xs font-bold uppercase tracking-widest px-6 py-4",
-            style: { color: headerTextColor },
+            style: { color: headerTextColor, backgroundColor: headerBgColor },
             children: header
           },
           i
@@ -31774,16 +31842,28 @@ var import_jsx_runtime56 = require("react/jsx-runtime");
 var CalendarAtom = ({
   mode = "single",
   selectedDate,
-  className
+  className,
+  style
 }) => {
   const date = selectedDate ? new Date(selectedDate) : void 0;
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const wrapperStyle = {
+    ...hasPxVars && {
+      backgroundColor: "var(--px-bg-color, transparent)",
+      borderColor: "var(--px-border-color, hsl(var(--border) / 0.5))",
+      color: "var(--px-text-color, inherit)"
+    },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
     "div",
     {
       className: cn(
-        "p-4 bg-background/80 backdrop-blur-xl rounded-[28px] border border-border/50 shadow-[0_20px_50px_rgba(0,0,0,0.1)] inline-block transition-all hover:shadow-[0_20px_60px_rgba(0,0,0,0.15)] ring-1 ring-border/5",
+        "p-4 backdrop-blur-xl rounded-[28px] border shadow-[0_20px_50px_rgba(0,0,0,0.1)] inline-block transition-all hover:shadow-[0_20px_60px_rgba(0,0,0,0.15)] ring-1 ring-border/5",
+        !hasPxVars && "bg-background/80 border-border/50",
         className
       ),
+      style: wrapperStyle,
       children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(Calendar2, { mode, selected: date, className: "rounded-xl" })
     }
   );
@@ -33558,12 +33638,25 @@ var ChartAtom = ({
         return null;
     }
   };
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const wrapperStyle = {
+    ...hasPxVars && {
+      color: "var(--px-text-color, inherit)",
+      backgroundColor: "var(--px-bg-color, transparent)",
+      borderColor: "var(--px-border-color, transparent)",
+      borderWidth: hasPxVars ? "1px" : void 0,
+      borderStyle: hasPxVars ? "solid" : void 0,
+      borderRadius: "1rem",
+      padding: "0.75rem"
+    },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime85.jsx)(
     ChartContainer,
     {
       config: safeConfig,
       className: cn("min-h-[200px] w-full", className),
-      style,
+      style: wrapperStyle,
       children: renderChart()
     }
   );
@@ -33606,7 +33699,8 @@ var import_react52 = __toESM(require("react"), 1);
 var import_jsx_runtime87 = require("react/jsx-runtime");
 var RatingAtom = ({ value, max: max2 = 5, readonly = false, className, style, onChange }) => {
   const [hoverValue, setHoverValue] = import_react52.default.useState(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: cn("flex items-center gap-1", className), style, children: Array.from({ length: max2 }, (_, i) => {
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)("div", { className: cn("flex items-center gap-1", className), style, "data-px-styled": hasPxVars ? "" : void 0, children: Array.from({ length: max2 }, (_, i) => {
     const starValue = i + 1;
     const isActive = (hoverValue ?? value) >= starValue;
     return /* @__PURE__ */ (0, import_jsx_runtime87.jsx)(
@@ -33614,9 +33708,13 @@ var RatingAtom = ({ value, max: max2 = 5, readonly = false, className, style, on
       {
         className: cn(
           "h-5 w-5 transition-colors",
-          isActive ? "fill-yellow-400 text-yellow-400" : "text-gray-300",
+          !hasPxVars && (isActive ? "fill-yellow-400 text-yellow-400" : "text-gray-300"),
           !readonly && "cursor-pointer hover:scale-110"
         ),
+        style: hasPxVars ? {
+          color: isActive ? "var(--px-accent-color, #facc15)" : "var(--px-track-color, #d1d5db)",
+          fill: isActive ? "var(--px-accent-color, #facc15)" : "transparent"
+        } : void 0,
         onClick: () => !readonly && onChange?.(starValue),
         onMouseEnter: () => !readonly && setHoverValue(starValue),
         onMouseLeave: () => !readonly && setHoverValue(null)
@@ -33719,8 +33817,6 @@ ArrowToggleAtom.displayName = "ArrowToggleAtom";
 var molecules_exports = {};
 __export(molecules_exports, {
   ActionButton: () => ActionButton,
-  AgentCard: () => AgentCard,
-  AgentDataTable: () => AgentDataTable,
   AudienceDemographicsCard: () => AudienceDemographicsCard,
   AudienceMetricCard: () => AudienceMetricCard,
   BrandAffinityGroup: () => BrandAffinityGroup,
@@ -33754,14 +33850,10 @@ __export(molecules_exports, {
   GoogleSheetsConnectCard: () => GoogleSheetsConnectCard,
   GoogleSheetsListCard: () => GoogleSheetsListCard,
   GrowthChartCard: () => GrowthChartCard,
-  InstructionPreview: () => InstructionPreview,
   KeywordBundlesDisplay: () => KeywordBundlesDisplay,
   KeywordBundlesEdit: () => KeywordBundlesEdit,
   LoadingOverlay: () => LoadingOverlay,
   MCQCard: () => MCQCard,
-  MultiAgentCard: () => MultiAgentCard,
-  MultiAgentPlan: () => MultiAgentPlan,
-  MultiAgentUISelector: () => MultiAgentUISelector,
   NotificationList: () => NotificationList,
   PlatformIconGroup: () => PlatformIconGroup,
   PlatformSelectDisplay: () => PlatformSelectDisplay,
@@ -33769,14 +33861,10 @@ __export(molecules_exports, {
   RecommendationCard: () => RecommendationCard,
   SearchSpecCard: () => SearchSpecCard,
   SocialPostCard: () => SocialPostCard,
-  StageIndicator: () => StageIndicator,
   StatsGrid: () => StatsGrid,
   StepWizard: () => StepWizard,
   TagCloud: () => TagCloud,
-  ToolListCard: () => ToolListCard,
   TopPostsGrid: () => TopPostsGrid,
-  UIComponentSelector: () => UIComponentSelector,
-  WorkflowVisualizer: () => WorkflowVisualizer,
   defaultFetchSelections: () => defaultFetchSelections,
   defaultPersistSelection: () => defaultPersistSelection,
   useCreatorWidgetPolling: () => useCreatorWidgetPolling
@@ -34607,9 +34695,16 @@ var import_jsx_runtime97 = require("react/jsx-runtime");
 var StatsGrid = ({
   items,
   stats,
-  className
+  className,
+  style
 }) => {
   const displayItems = items || stats || [];
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const cardStyle = hasPxVars ? {
+    backgroundColor: "var(--px-bg-color, var(--card-background, white))",
+    borderColor: "var(--px-border-color, var(--border-color, #e5e7eb))"
+  } : void 0;
+  const textColor = hasPxVars ? "var(--px-text-color, inherit)" : void 0;
   return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
     "div",
     {
@@ -34617,6 +34712,7 @@ var StatsGrid = ({
         "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4",
         className
       ),
+      style,
       children: displayItems?.map((item, index) => {
         const Icon3 = item.icon ? lucide_react_exports[item.icon] : null;
         const trendColor = item.trendDirection === "up" ? "text-emerald-600 dark:text-emerald-400" : item.trendDirection === "down" ? "text-rose-600 dark:text-rose-400" : "text-muted-foreground";
@@ -34624,7 +34720,11 @@ var StatsGrid = ({
         return /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
           Card,
           {
-            className: "bg-[var(--card-background,theme(colors.white))] dark:bg-[var(--card-background,theme(colors.zinc.900))] border-[var(--border-color,theme(colors.gray.200))] backdrop-blur-sm shadow-sm hover:shadow-md transition-all duration-300 rounded-[24px] overflow-hidden",
+            className: cn(
+              "backdrop-blur-sm shadow-sm hover:shadow-md transition-all duration-300 rounded-[24px] overflow-hidden",
+              !hasPxVars && "bg-[var(--card-background,theme(colors.white))] dark:bg-[var(--card-background,theme(colors.zinc.900))] border-[var(--border-color,theme(colors.gray.200))]"
+            ),
+            style: cardStyle,
             children: /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(CardContent, { className: "p-5 flex flex-col gap-1.5", children: [
               /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-center justify-between", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
@@ -34634,10 +34734,17 @@ var StatsGrid = ({
                     type: "text",
                     content: item.label,
                     variant: "small",
-                    className: "text-muted-foreground font-medium tracking-wide uppercase text-[10px]"
+                    className: cn(!hasPxVars && "text-muted-foreground", "font-medium tracking-wide uppercase text-[10px]"),
+                    style: textColor ? { color: textColor } : void 0
                   }
                 ),
-                Icon3 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(Icon3, { className: "w-4 h-4 text-[var(--primary-color,theme(colors.purple.500))]" })
+                Icon3 && /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
+                  Icon3,
+                  {
+                    className: cn("w-4 h-4", !hasPxVars && "text-[var(--primary-color,theme(colors.purple.500))]"),
+                    style: textColor ? { color: textColor } : void 0
+                  }
+                )
               ] }),
               /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)("div", { className: "flex items-baseline gap-3", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime97.jsx)(
@@ -34648,9 +34755,11 @@ var StatsGrid = ({
                     content: String(item.value),
                     variant: "h3",
                     className: cn(
-                      "font-bold text-[var(--foreground)] tracking-tight leading-tight",
+                      "font-bold tracking-tight leading-tight",
+                      !hasPxVars && "text-[var(--foreground)]",
                       String(item.value).length > 20 ? "text-base" : String(item.value).length > 12 ? "text-lg" : "text-xl"
-                    )
+                    ),
+                    style: textColor ? { color: textColor } : void 0
                   }
                 ),
                 item.trend && /* @__PURE__ */ (0, import_jsx_runtime97.jsxs)(
@@ -34815,16 +34924,26 @@ var FilterBar = ({ filters, showSearch = true, className, onFilterToggle, onSear
 // src/molecules/generic/FileUpload/FileUpload.tsx
 var import_react57 = __toESM(require("react"), 1);
 var import_jsx_runtime101 = require("react/jsx-runtime");
-var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
+var FileUpload = ({ title, accept, multiple, className, style, onFilesSelected }) => {
   const [isDragging, setIsDragging] = import_react57.default.useState(false);
+  const hasPxVars = style && Object.keys(style).some((k) => k.startsWith("--px-"));
+  const wrapperStyle = {
+    ...hasPxVars && {
+      borderColor: isDragging ? "var(--px-accent-color)" : "var(--px-border-color)",
+      backgroundColor: isDragging ? void 0 : "var(--px-bg-color, transparent)"
+    },
+    ...style
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime101.jsxs)(
     "div",
     {
       className: cn(
         "relative flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-3xl transition-all",
-        isDragging ? "border-purple-500 bg-purple-50" : "border-purple-100 bg-white",
+        !hasPxVars && (isDragging ? "border-purple-500 bg-purple-50" : "border-purple-100 bg-white"),
         className
       ),
+      style: wrapperStyle,
+      "data-px-styled": hasPxVars ? "" : void 0,
       onDragOver: (e) => {
         e.preventDefault();
         setIsDragging(true);
@@ -34838,8 +34957,22 @@ var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
         }
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("div", { className: "w-12 h-12 bg-purple-100 rounded-2xl flex items-center justify-center mb-4 text-purple-600", children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Upload, { className: "w-6 h-6" }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("h4", { className: "font-bold text-gray-900 mb-1", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+          "div",
+          {
+            className: cn("w-12 h-12 rounded-2xl flex items-center justify-center mb-4", !hasPxVars && "bg-purple-100 text-purple-600"),
+            style: hasPxVars ? { backgroundColor: "var(--px-accent-color)", color: "var(--px-accent-fg, white)", opacity: 0.15 } : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(Upload, { className: "w-6 h-6", style: hasPxVars ? { color: "var(--px-accent-color)", opacity: 1 } : void 0 })
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
+          "h4",
+          {
+            className: cn("font-bold mb-1", !hasPxVars && "text-gray-900"),
+            style: hasPxVars ? { color: "var(--px-text-color, inherit)" } : void 0,
+            children: title
+          }
+        ),
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)("p", { className: "text-sm text-muted-foreground mb-6", children: "Drag and drop or click to browse" }),
         /* @__PURE__ */ (0, import_jsx_runtime101.jsx)(
           "input",
@@ -34855,7 +34988,8 @@ var FileUpload = ({ title, accept, multiple, className, onFilesSelected }) => {
           Button,
           {
             variant: "outline",
-            className: "rounded-full border-purple-200 text-purple-700 hover:bg-purple-50",
+            className: cn("rounded-full", !hasPxVars && "border-purple-200 text-purple-700 hover:bg-purple-50"),
+            style: hasPxVars ? { borderColor: "var(--px-accent-color)", color: "var(--px-accent-color)" } : void 0,
             children: "Select Files"
           }
         )
@@ -40928,1307 +41062,6 @@ function CreatorWidgetInner({
 }
 var CreatorWidget = (0, import_react76.memo)(CreatorWidgetInner);
 
-// src/molecules/workstream-builder/ToolListCard/ToolListCard.tsx
-var import_jsx_runtime150 = require("react/jsx-runtime");
-var FONT_STYLE = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-var ICON_MAP = {
-  Search,
-  Database,
-  Globe,
-  FileText,
-  Zap,
-  Layout: PanelsTopLeft,
-  Wrench,
-  BookOpen,
-  BarChart3: ChartColumn,
-  Link,
-  MessageSquare,
-  Sparkles,
-  FolderOpen,
-  Code,
-  Shield,
-  Image,
-  Mail,
-  Calendar
-};
-var CATEGORY_FALLBACK = {
-  search: Search,
-  data: Database,
-  knowledge: BookOpen,
-  web: Globe,
-  content: FileText,
-  ui: PanelsTopLeft,
-  analytics: ChartColumn,
-  integration: Link,
-  communication: MessageSquare,
-  generation: Sparkles,
-  file: FolderOpen,
-  code: Code,
-  security: Shield,
-  general: Zap
-};
-var CATEGORY_HEADER_BG = {
-  search: "bg-blue-500/[0.04]",
-  data: "bg-emerald-500/[0.04]",
-  knowledge: "bg-purple-500/[0.04]",
-  web: "bg-cyan-500/[0.04]",
-  content: "bg-pink-500/[0.04]",
-  ui: "bg-violet-500/[0.04]",
-  analytics: "bg-orange-500/[0.04]",
-  integration: "bg-amber-500/[0.04]",
-  general: "bg-[var(--foreground)]/[0.02]"
-};
-function resolveIcon(tool) {
-  if (tool.icon && ICON_MAP[tool.icon]) return ICON_MAP[tool.icon];
-  if (tool.category && CATEGORY_FALLBACK[tool.category.toLowerCase()])
-    return CATEGORY_FALLBACK[tool.category.toLowerCase()];
-  return Wrench;
-}
-function resolveCategoryIcon(category) {
-  return CATEGORY_FALLBACK[category.toLowerCase()] || Wrench;
-}
-var ToolListCard = ({
-  tools,
-  className
-}) => {
-  const grouped = {};
-  for (const tool of tools) {
-    const cat = tool.category || "General";
-    if (!grouped[cat]) grouped[cat] = [];
-    grouped[cat].push(tool);
-  }
-  const categories = Object.keys(grouped);
-  return /* @__PURE__ */ (0, import_jsx_runtime150.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
-      ),
-      style: FONT_STYLE,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(Wrench, { className: "w-3.5 h-3.5 text-interactive" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
-          /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: tools.length })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
-          const CatIcon = resolveCategoryIcon(cat);
-          const headerBg = CATEGORY_HEADER_BG[cat.toLowerCase()] || CATEGORY_HEADER_BG.general;
-          return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "px-4 py-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: cn("flex items-center gap-2 mb-2.5 -mx-4 px-4 py-1.5", headerBg), children: [
-              /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(CatIcon, { className: "w-3.5 h-3.5 text-interactive/70" }),
-              /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
-              /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
-              const ToolIcon = resolveIcon(tool);
-              return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(
-                "div",
-                {
-                  className: "group flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--foreground)]/[0.03] transition-colors",
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-interactive/[0.08]", children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(ToolIcon, { className: "w-3 h-3 text-interactive/60" }) }),
-                    /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "flex items-center gap-2 flex-wrap", children: [
-                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)] truncate max-w-full", children: tool.display_name }),
-                        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("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__ */ (0, import_jsx_runtime150.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5 break-words whitespace-normal", children: tool.description })
-                    ] })
-                  ]
-                },
-                tool.name
-              );
-            }) })
-          ] }, cat);
-        }) })
-      ]
-    }
-  );
-};
-
-// src/molecules/workstream-builder/AgentCard/AgentCard.tsx
-var import_react77 = require("react");
-var import_jsx_runtime151 = require("react/jsx-runtime");
-var FONT_STYLE2 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-var AgentCard = ({
-  agent,
-  editable = true,
-  compact = false,
-  onSave,
-  className
-}) => {
-  const [isEditing, setIsEditing] = (0, import_react77.useState)(false);
-  const [isSaving, setIsSaving] = (0, import_react77.useState)(false);
-  const [editState, setEditState] = (0, import_react77.useState)({
-    display_name: agent.display_name,
-    description: agent.description,
-    image: agent.image || ""
-  });
-  const avatarUrl = agent.image || `https://api.dicebear.com/7.x/avataaars/svg?seed=${agent.name}`;
-  const handleEdit = (0, import_react77.useCallback)(() => {
-    setEditState({
-      display_name: agent.display_name,
-      description: agent.description,
-      image: agent.image || ""
-    });
-    setIsEditing(true);
-  }, [agent]);
-  const handleCancel = (0, import_react77.useCallback)(() => {
-    setIsEditing(false);
-  }, []);
-  const handleSave = (0, import_react77.useCallback)(async () => {
-    if (!onSave) return;
-    const updates = {};
-    if (editState.display_name !== agent.display_name)
-      updates.display_name = editState.display_name;
-    if (editState.description !== agent.description)
-      updates.description = editState.description;
-    if (editState.image !== (agent.image || ""))
-      updates.image = editState.image;
-    if (Object.keys(updates).length === 0) {
-      setIsEditing(false);
-      return;
-    }
-    setIsSaving(true);
-    try {
-      await onSave(agent, updates);
-      setIsEditing(false);
-    } catch (err) {
-      console.error("AgentCard save failed:", err);
-    } finally {
-      setIsSaving(false);
-    }
-  }, [onSave, agent, editState]);
-  if (compact) {
-    return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(
-      "div",
-      {
-        className: cn(
-          "flex items-center gap-3 py-1",
-          className
-        ),
-        style: FONT_STYLE2,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(Avatar, { className: "h-8 w-8 shrink-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-xs font-bold", children: agent.display_name.charAt(0) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
-              /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(
-                "span",
-                {
-                  className: cn(
-                    "inline-flex items-center gap-1 text-[10px] px-1.5 py-0.5 rounded-full font-medium",
-                    agent.enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: cn(
-                      "w-1.5 h-1.5 rounded-full",
-                      agent.enabled ? "bg-emerald-500" : "bg-red-500"
-                    ) }),
-                    agent.enabled ? "Active" : "Disabled"
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
-          ] })
-        ]
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime151.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",
-        className
-      ),
-      style: FONT_STYLE2,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4 bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-interactive/20", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(AvatarFallback, { className: "bg-interactive/10 text-interactive text-lg font-bold", children: agent.display_name.charAt(0) })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { className: "flex items-center gap-2", children: [
-              isEditing ? /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-                "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-interactive/30 text-sm font-semibold text-foreground outline-none focus:border-interactive transition-all",
-                  placeholder: "Agent name"
-                }
-              ) : /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
-              /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("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__ */ (0, import_jsx_runtime151.jsxs)(
-                "span",
-                {
-                  className: cn(
-                    "inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full font-medium",
-                    agent.enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: cn(
-                      "w-1.5 h-1.5 rounded-full",
-                      agent.enabled ? "bg-emerald-500" : "bg-red-500"
-                    ) }),
-                    agent.enabled ? "Active" : "Disabled"
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { className: "mt-1", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-              "textarea",
-              {
-                value: editState.description,
-                onChange: (e) => setEditState((s) => ({ ...s, description: e.target.value })),
-                disabled: isSaving,
-                className: "w-full bg-transparent border-b border-interactive/30 text-xs text-foreground/70 outline-none focus:border-interactive transition-all resize-none leading-relaxed min-h-[40px]",
-                rows: 2,
-                placeholder: "Describe this agent..."
-              }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-normal", children: agent.description }) }),
-            isEditing && /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { className: "mt-2 flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold", children: "Avatar:" }),
-              /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-                "input",
-                {
-                  type: "text",
-                  value: editState.image,
-                  onChange: (e) => setEditState((s) => ({ ...s, image: e.target.value })),
-                  disabled: isSaving,
-                  className: "flex-1 bg-foreground/[0.03] border border-[var(--border-color)] rounded px-2 py-0.5 text-[10px] text-foreground/50 font-mono outline-none focus:border-interactive/50 transition-colors",
-                  placeholder: "URL"
-                }
-              )
-            ] })
-          ] }),
-          editable && onSave && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(import_jsx_runtime151.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-              "button",
-              {
-                onClick: handleCancel,
-                disabled: isSaving,
-                className: "text-[11px] px-2.5 py-1 rounded-md border border-[var(--border-color)] text-[var(--foreground)]/60 hover:text-[var(--foreground)] transition-colors disabled:opacity-50",
-                children: "Cancel"
-              }
-            ),
-            /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-              "button",
-              {
-                onClick: handleSave,
-                disabled: isSaving,
-                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"
-              }
-            )
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-            "button",
-            {
-              onClick: handleEdit,
-              className: "text-[11px] px-2.5 py-1 rounded-md border border-[var(--border-color)] text-foreground/50 hover:text-foreground hover:border-interactive/50 transition-colors",
-              children: "Edit"
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-3 text-xs", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("span", { className: "text-[var(--foreground)]/40", children: [
-          "Model:",
-          " ",
-          /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
-        ] }) }),
-        agent.tools && agent.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-2", children: [
-            "Tools (",
-            agent.tools.length,
-            ")"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-            "span",
-            {
-              className: "text-[11px] px-2 py-0.5 rounded-md bg-interactive/10 text-interactive font-mono border border-interactive/20",
-              children: tool
-            },
-            tool
-          )) })
-        ] })
-      ]
-    }
-  );
-};
-
-// src/molecules/workstream-builder/AgentDataTable/AgentDataTable.tsx
-var import_jsx_runtime152 = require("react/jsx-runtime");
-var FONT_STYLE3 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-var AgentDataTable = ({
-  headers,
-  rows,
-  className
-}) => {
-  const renderCell = (value) => {
-    if (typeof value === "boolean") {
-      return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
-        "span",
-        {
-          className: cn(
-            "inline-flex items-center gap-1.5 text-[11px] font-medium px-2 py-0.5 rounded-full",
-            value ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
-          ),
-          children: [
-            value ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("polyline", { points: "20 6 9 17 4 12" }) }) : /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-              /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
-            ] }),
-            value ? "Yes" : "No"
-          ]
-        }
-      );
-    }
-    return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("span", { className: "text-[var(--foreground)]", children: String(value) });
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
-    "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",
-        className
-      ),
-      style: FONT_STYLE3,
-      children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "overflow-x-auto", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("table", { className: "w-full text-xs", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
-          "th",
-          {
-            className: "text-left px-4 py-2.5 text-[11px] font-semibold text-[var(--foreground)]/60 uppercase tracking-wide whitespace-nowrap",
-            children: header
-          },
-          header
-        )) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
-          "tr",
-          {
-            className: cn(
-              "border-b border-[var(--border-color)] last:border-b-0 hover:bg-[var(--foreground)]/[0.03] transition-colors",
-              rowIdx % 2 === 1 && "bg-[var(--foreground)]/[0.015]"
-            ),
-            children: row.map((cell, cellIdx) => /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
-              "td",
-              {
-                className: "px-4 py-2.5 text-xs whitespace-nowrap",
-                children: renderCell(cell)
-              },
-              cellIdx
-            ))
-          },
-          rowIdx
-        )) })
-      ] }) })
-    }
-  );
-};
-
-// src/molecules/workstream-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
-var import_react78 = require("react");
-var import_jsx_runtime153 = require("react/jsx-runtime");
-var FONT_STYLE4 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-var WorkflowVisualizer = ({
-  steps,
-  className
-}) => {
-  const [expandedStep, setExpandedStep] = (0, import_react78.useState)(
-    steps[0]?.id || null
-  );
-  return /* @__PURE__ */ (0, import_jsx_runtime153.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
-      ),
-      style: FONT_STYLE4,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03] flex items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
-            "svg",
-            {
-              width: "14",
-              height: "14",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              className: "text-interactive",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Workflow" }),
-          /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("span", { className: "ml-auto text-[11px] font-medium text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.06] px-2 py-0.5 rounded-full", children: [
-            steps.length,
-            " steps"
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "px-4 py-3", children: steps.map((step, idx) => {
-          const isLast = idx === steps.length - 1;
-          const isExpanded = expandedStep === step.id;
-          return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex flex-col items-center shrink-0", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "w-7 h-7 rounded-full bg-interactive/10 border-2 border-interactive/30 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "text-[10px] font-bold text-interactive", children: idx + 1 }) }),
-              !isLast && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "w-0.5 flex-1 min-h-[16px] bg-interactive/15" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
-              "div",
-              {
-                className: cn(
-                  "flex-1 mb-3 rounded-lg border border-[var(--border-color)] transition-all",
-                  isExpanded ? "bg-[var(--foreground)]/[0.02] shadow-sm" : "hover:bg-[var(--foreground)]/[0.02] hover:shadow-sm hover:-translate-y-0.5"
-                ),
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
-                    "button",
-                    {
-                      onClick: () => setExpandedStep(isExpanded ? null : step.id),
-                      className: "w-full text-left px-3 py-2.5 flex items-center gap-2 whitespace-normal",
-                      children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }) }),
-                        /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
-                          "svg",
-                          {
-                            width: "12",
-                            height: "12",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            className: cn(
-                              "shrink-0 text-[var(--foreground)]/30 transition-transform",
-                              isExpanded && "rotate-180"
-                            ),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("polyline", { points: "6 9 12 15 18 9" })
-                          }
-                        )
-                      ]
-                    }
-                  ),
-                  isExpanded && /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "px-3 pb-3 space-y-2.5", children: [
-                    step.description && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed whitespace-normal", children: step.description }),
-                    step.sub_steps && step.sub_steps.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("div", { className: "space-y-1", children: step.sub_steps.map((sub) => /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)(
-                      "div",
-                      {
-                        className: "flex items-start gap-2 text-xs",
-                        children: [
-                          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-interactive/40" }),
-                          /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "text-[var(--foreground)]/60", children: sub.action })
-                        ]
-                      },
-                      sub.id
-                    )) }),
-                    step.tools && step.tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold tracking-wider", children: "Tools:" }),
-                      step.tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
-                        "span",
-                        {
-                          className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
-                          children: tool
-                        },
-                        tool
-                      ))
-                    ] }),
-                    step.on_failure && /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("div", { className: "flex items-start gap-2 text-xs bg-[var(--redBackground,_#ef4444)]/[0.06] border border-[var(--redText,_#ef4444)]/10 rounded-md px-2.5 py-2 whitespace-normal", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "shrink-0 text-[10px] font-semibold text-[var(--redText,_#ef4444)]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
-                      /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
-                    ] })
-                  ] })
-                ]
-              }
-            )
-          ] }, step.id);
-        }) })
-      ]
-    }
-  );
-};
-
-// src/molecules/workstream-builder/InstructionPreview/InstructionPreview.tsx
-var import_react79 = require("react");
-var import_jsx_runtime154 = require("react/jsx-runtime");
-var FONT_STYLE5 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-var InstructionPreview = ({
-  agent_name,
-  description,
-  instruction,
-  workflow_summary,
-  tools,
-  className
-}) => {
-  const [isExpanded, setIsExpanded] = (0, import_react79.useState)(false);
-  const [copied, setCopied] = (0, import_react79.useState)(false);
-  const previewLength = 300;
-  const isLong = instruction.length > previewLength;
-  const displayText = isExpanded || !isLong ? instruction : instruction.slice(0, previewLength) + "...";
-  const handleCopy = (0, import_react79.useCallback)(async () => {
-    try {
-      await navigator.clipboard.writeText(instruction);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    } catch {
-      const textarea = document.createElement("textarea");
-      textarea.value = instruction;
-      textarea.style.position = "fixed";
-      textarea.style.opacity = "0";
-      document.body.appendChild(textarea);
-      textarea.select();
-      document.execCommand("copy");
-      document.body.removeChild(textarea);
-      setCopied(true);
-      setTimeout(() => setCopied(false), 2e3);
-    }
-  }, [instruction]);
-  return /* @__PURE__ */ (0, import_jsx_runtime154.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
-      ),
-      style: FONT_STYLE5,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "w-6 h-6 rounded-md bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(
-            "svg",
-            {
-              width: "14",
-              height: "14",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              className: "text-interactive",
-              strokeLinecap: "round",
-              strokeLinejoin: "round",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-                /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("polyline", { points: "14 2 14 8 20 8" }),
-                /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
-                /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
-                /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("polyline", { points: "10 9 9 9 8 9" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
-            description && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5 whitespace-normal", children: description })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: "px-4 py-3 space-y-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: "flex items-center justify-between mb-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider", children: "Instruction" }),
-              /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
-                "button",
-                {
-                  onClick: handleCopy,
-                  className: "text-[10px] px-2 py-0.5 rounded-md text-interactive hover:bg-interactive/10 transition-colors font-medium",
-                  children: copied ? "Copied!" : "Copy"
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed whitespace-pre-wrap font-mono bg-[var(--foreground)]/[0.02] border border-[var(--border-color)] rounded-lg p-3", children: displayText }),
-            isLong && /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(
-              "button",
-              {
-                onClick: () => setIsExpanded(!isExpanded),
-                className: "inline-flex items-center gap-1 text-[11px] text-interactive hover:underline mt-1",
-                children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
-                    "svg",
-                    {
-                      width: "12",
-                      height: "12",
-                      viewBox: "0 0 24 24",
-                      fill: "none",
-                      stroke: "currentColor",
-                      strokeWidth: "2",
-                      className: cn("transition-transform", isExpanded && "rotate-180"),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("polyline", { points: "6 9 12 15 18 9" })
-                    }
-                  ),
-                  isExpanded ? "Show less" : "Show full instruction"
-                ]
-              }
-            )
-          ] }),
-          workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
-            /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: "flex items-start gap-2 text-xs", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "shrink-0 w-5 h-5 rounded-full bg-interactive/10 flex items-center justify-center text-[10px] font-bold text-interactive", children: idx + 1 }),
-              /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
-            ] }, idx)) })
-          ] }),
-          tools && tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Tools" }),
-            /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
-              "span",
-              {
-                className: "text-[10px] font-mono px-2 py-0.5 rounded bg-interactive/[0.08] text-interactive/70 border border-interactive/10",
-                children: tool
-              },
-              tool
-            )) })
-          ] })
-        ] })
-      ]
-    }
-  );
-};
-
-// src/molecules/workstream-builder/UIComponentSelector/UIComponentSelector.tsx
-var import_react80 = require("react");
-var import_jsx_runtime155 = require("react/jsx-runtime");
-var FONT_STYLE6 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-function UIComponentSelector({
-  components,
-  onSelect,
-  onPreview,
-  className,
-  isLatestMessage = true
-}) {
-  const [selected, setSelected] = (0, import_react80.useState)(() => {
-    const recommended = components.filter((c) => c.recommended).map((c) => c.name);
-    return new Set(recommended);
-  });
-  const [submitted, setSubmitted] = (0, import_react80.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 || !isLatestMessage) 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_runtime155.jsxs)(
-    "div",
-    {
-      className: cn(
-        "my-3 rounded-xl border border-border bg-card overflow-hidden shadow-sm",
-        className
-      ),
-      style: FONT_STYLE6,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "px-4 py-3 border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "w-5 h-5 rounded-md bg-interactive/15 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(
-            "svg",
-            {
-              width: "12",
-              height: "12",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              className: "text-interactive",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("h3", { className: "text-xs font-semibold text-foreground", children: "Select UI Components" }),
-            /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("p", { className: "text-[10px] text-muted-foreground mt-0.5", children: "Choose which visual components this agent can use in its responses." })
-          ] })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "px-4 py-3 space-y-4", children: categoryOrder.map((category) => /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("h4", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wider mb-2", children: category }),
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "space-y-1.5", children: grouped[category].map((comp) => /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(
-            "label",
-            {
-              className: cn(
-                "flex items-start gap-3 px-3 py-2 rounded-lg cursor-pointer transition-all",
-                submitted || !isLatestMessage ? "cursor-default opacity-60" : "hover:bg-muted/80",
-                selected.has(comp.name) && !submitted && "bg-interactive/5 border border-interactive/20",
-                selected.has(comp.name) && submitted && "bg-interactive/5"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
-                  "div",
-                  {
-                    className: cn(
-                      "mt-0.5 w-4 h-4 rounded border flex items-center justify-center shrink-0 transition-colors",
-                      selected.has(comp.name) ? "bg-interactive border-interactive" : "border-muted-foreground/30"
-                    ),
-                    onClick: (e) => {
-                      e.preventDefault();
-                      toggle(comp.name);
-                    },
-                    children: selected.has(comp.name) && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
-                      "svg",
-                      {
-                        width: "10",
-                        height: "10",
-                        viewBox: "0 0 24 24",
-                        fill: "none",
-                        stroke: "white",
-                        strokeWidth: "3",
-                        children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("polyline", { points: "20 6 9 17 4 12" })
-                      }
-                    )
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
-                  "input",
-                  {
-                    type: "checkbox",
-                    checked: selected.has(comp.name),
-                    onChange: () => toggle(comp.name),
-                    disabled: submitted || !isLatestMessage,
-                    className: "sr-only"
-                  }
-                ),
-                /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { className: "flex-1 min-w-0", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { className: "flex items-center gap-1", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "text-sm font-medium text-foreground", children: comp.display_name }),
-                    comp.recommended && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "px-1.5 py-0.5 text-[9px] font-semibold uppercase tracking-wider rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20", children: "Recommended" }),
-                    onPreview && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
-                      "button",
-                      {
-                        type: "button",
-                        onClick: (e) => {
-                          e.preventDefault();
-                          e.stopPropagation();
-                          onPreview(comp.name);
-                        },
-                        className: "shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
-                        title: `Preview ${comp.display_name}`,
-                        children: /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(
-                          "svg",
-                          {
-                            width: "14",
-                            height: "14",
-                            viewBox: "0 0 24 24",
-                            fill: "none",
-                            stroke: "currentColor",
-                            strokeWidth: "2",
-                            strokeLinecap: "round",
-                            strokeLinejoin: "round",
-                            className: "text-muted-foreground hover:text-interactive",
-                            children: [
-                              /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-                              /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
-                            ]
-                          }
-                        )
-                      }
-                    )
-                  ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "ml-0 text-xs text-muted-foreground", children: comp.description })
-                ] })
-              ]
-            },
-            comp.name
-          )) })
-        ] }, category)) }),
-        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { className: "px-4 py-3 border-t border-border/60 flex items-center justify-between bg-muted/30", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("span", { className: "text-xs text-muted-foreground", children: [
-            selected.size,
-            " selected"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
-            "button",
-            {
-              onClick: handleContinue,
-              className: "px-4 py-1.5 text-sm font-medium rounded-lg bg-interactive text-white hover:bg-interactive/90 transition-colors",
-              children: "Continue"
-            }
-          )
-        ] }),
-        submitted && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
-      ]
-    }
-  );
-}
-
-// src/molecules/workstream-builder/MultiAgentCard/MultiAgentCard.tsx
-var import_jsx_runtime156 = require("react/jsx-runtime");
-var FONT_STYLE7 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-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_runtime156.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
-      ),
-      style: FONT_STYLE7,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "flex items-start gap-4 px-5 py-4 bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "h-12 w-12 shrink-0 rounded-full border-2 border-interactive/20 overflow-hidden bg-interactive/10 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("img", { src: avatarUrl, alt: display_name, className: "h-full w-full" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: display_name }),
-              /* @__PURE__ */ (0, import_jsx_runtime156.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_runtime156.jsx)("span", { className: "text-[10px] px-2 py-0.5 rounded-full font-medium bg-interactive/10 text-interactive", children: "Multi-Agent" }),
-              /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
-                "span",
-                {
-                  className: cn(
-                    "inline-flex items-center gap-1 text-[10px] px-2 py-0.5 rounded-full font-medium",
-                    enabled ? "bg-emerald-500/10 text-emerald-600" : "bg-red-500/10 text-red-500"
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: cn(
-                      "w-1.5 h-1.5 rounded-full",
-                      enabled ? "bg-emerald-500" : "bg-red-500"
-                    ) }),
-                    enabled ? "Active" : "Disabled"
-                  ]
-                }
-              )
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("p", { className: "text-xs text-[var(--foreground)]/60 leading-relaxed mt-1 whitespace-normal", style: { textWrap: "auto" }, children: description })
-          ] })
-        ] }),
-        stages.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "border-t border-[var(--border-color)] px-5 py-4", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-3", children: [
-            "Stages (",
-            stages.length,
-            ")"
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "flex items-stretch", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("div", { className: "flex flex-col items-center mr-3 w-5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
-                "div",
-                {
-                  className: cn(
-                    "w-5 h-5 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0",
-                    "bg-interactive/10 text-interactive border border-interactive/30"
-                  ),
-                  children: idx + 1
-                }
-              ),
-              idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "w-px flex-1 min-h-[16px] border-l border-dashed border-interactive/30" })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime156.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_runtime156.jsxs)("div", { className: "flex items-center gap-2", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: stage.name }),
-                /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "text-[10px] font-mono text-[var(--foreground)]/30 bg-[var(--foreground)]/[0.04] px-1.5 py-0.5 rounded", children: stage.agent_name })
-              ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime156.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_runtime156.jsxs)("span", { children: [
-                  stage.tools.length,
-                  " tool",
-                  stage.tools.length !== 1 ? "s" : ""
-                ] }),
-                stage.ui_components && stage.ui_components.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("span", { children: [
-                  stage.ui_components.length,
-                  " component",
-                  stage.ui_components.length !== 1 ? "s" : ""
-                ] })
-              ] })
-            ] })
-          ] }, stage.agent_name || idx)) })
-        ] })
-      ]
-    }
-  );
-};
-
-// src/molecules/workstream-builder/MultiAgentPlan/MultiAgentPlan.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
-var FONT_STYLE8 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-var MultiAgentPlan = ({
-  stages = [],
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime157.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
-      ),
-      style: FONT_STYLE8,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-gradient-to-r from-[var(--foreground)]/[0.02] to-transparent", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "w-4 h-4 rounded bg-violet-500/20 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime157.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_runtime157.jsx)("path", { d: "M16 3h5v5M4 20L21 3M21 16v5h-5M15 15l6 6M4 4l5 5" })
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { className: "text-xs font-semibold text-[var(--foreground)]", children: "Proposed Multi-Agent Workflow" }),
-          /* @__PURE__ */ (0, import_jsx_runtime157.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_runtime157.jsx)("div", { className: "px-4 py-3", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "flex flex-col gap-0", children: stages.map((stage, idx) => /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "flex items-stretch min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "flex flex-col items-center mr-3 w-6", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "w-6 h-6 rounded-full flex items-center justify-center text-[10px] font-bold shrink-0 bg-interactive/10 text-interactive border border-interactive/30", children: idx + 1 }),
-            idx < stages.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "w-px flex-1 min-h-[12px] border-l border-dashed border-interactive/30" })
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "flex-1 mb-2 pb-2 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("p", { className: "text-xs font-semibold text-foreground", children: stage.name }),
-            stage.description && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
-              "p",
-              {
-                className: "text-[11px] text-foreground/50 mt-0.5 whitespace-normal",
-                style: { textWrap: "auto" },
-                children: stage.description
-              }
-            ),
-            stage.proposed_tools && stage.proposed_tools.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "flex flex-wrap gap-1 mt-1.5", children: stage.proposed_tools.map((tool) => /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
-              "span",
-              {
-                className: "text-[10px] px-1.5 py-0.5 rounded bg-interactive/10 text-interactive font-mono",
-                children: tool
-              },
-              tool
-            )) })
-          ] })
-        ] }, stage.name || idx)) }) })
-      ]
-    }
-  );
-};
-
-// src/molecules/workstream-builder/MultiAgentUISelector/MultiAgentUISelector.tsx
-var import_react81 = require("react");
-var import_jsx_runtime158 = require("react/jsx-runtime");
-var FONT_STYLE9 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-var MultiAgentUISelector = ({
-  stages = [],
-  components = [],
-  onSelect,
-  onPreview,
-  className,
-  isLatestMessage = true
-}) => {
-  const [activeStageId, setActiveStageId] = (0, import_react81.useState)(stages[0]?.id || "");
-  const [selections, setSelections] = (0, import_react81.useState)(
-    () => {
-      const init = {};
-      const recommendedNames = components.filter((c) => c.recommended).map((c) => c.name);
-      for (const stage of stages) {
-        const stageRecs = stage.recommended_components?.length ? stage.recommended_components : recommendedNames;
-        init[stage.id] = new Set(stageRecs);
-      }
-      return init;
-    }
-  );
-  const [submitted, setSubmitted] = (0, import_react81.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_react81.useCallback)(
-    (stageId, compName) => {
-      if (submitted || !isLatestMessage) 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 selectAll = (0, import_react81.useCallback)(
-    (stageId) => {
-      if (submitted || !isLatestMessage) return;
-      setSelections((prev) => {
-        const updated = { ...prev };
-        updated[stageId] = new Set(components.map((c) => c.name));
-        return updated;
-      });
-    },
-    [submitted, isLatestMessage, components]
-  );
-  const clearAll = (0, import_react81.useCallback)(
-    (stageId) => {
-      if (submitted || !isLatestMessage) return;
-      setSelections((prev) => {
-        const updated = { ...prev };
-        updated[stageId] = /* @__PURE__ */ new Set();
-        return updated;
-      });
-    },
-    [submitted, isLatestMessage]
-  );
-  const handleContinue = (0, import_react81.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_runtime158.jsxs)(
-    "div",
-    {
-      className: cn(
-        "my-3 rounded-xl border border-border bg-card overflow-hidden shadow-sm",
-        className
-      ),
-      style: FONT_STYLE9,
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "px-4 py-3 border-b border-border/60 bg-muted/40", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "flex items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "w-5 h-5 rounded-md bg-interactive/15 flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
-            "svg",
-            {
-              width: "12",
-              height: "12",
-              viewBox: "0 0 24 24",
-              fill: "none",
-              stroke: "currentColor",
-              strokeWidth: "2",
-              className: "text-interactive",
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("rect", { x: "3", y: "3", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("rect", { x: "14", y: "3", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("rect", { x: "3", y: "14", width: "7", height: "7" }),
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("rect", { x: "14", y: "14", width: "7", height: "7" })
-              ]
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "text-xs font-semibold text-foreground", children: "UI Components per Stage" })
-        ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "flex gap-1 border-b border-border/60 px-4 py-2 bg-muted/20", children: stages.map((stage) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-          "button",
-          {
-            onClick: () => setActiveStageId(stage.id),
-            className: cn(
-              "px-3 py-1.5 text-[11px] font-medium rounded-full transition-colors",
-              activeStageId === stage.id ? "bg-interactive text-white" : "text-muted-foreground hover:text-foreground hover:bg-muted"
-            ),
-            children: stage.name
-          },
-          stage.id
-        )) }),
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "px-4 py-3", children: [
-          activeStage && /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "flex items-center justify-between mb-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("p", { className: "text-[10px] text-muted-foreground", children: [
-              "Select components for ",
-              /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("strong", { className: "text-foreground", children: activeStage.name }),
-              " (",
-              activeStage.agent_name,
-              ")"
-            ] }),
-            !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-                "button",
-                {
-                  onClick: () => selectAll(activeStageId),
-                  className: "text-[10px] text-interactive hover:underline font-medium",
-                  children: "Select All"
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "text-muted-foreground/40", children: "|" }),
-              /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-                "button",
-                {
-                  onClick: () => clearAll(activeStageId),
-                  className: "text-[10px] text-muted-foreground hover:text-foreground font-medium",
-                  children: "Clear"
-                }
-              )
-            ] })
-          ] }),
-          Object.entries(grouped).map(([category, comps]) => /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "mb-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("p", { className: "text-[10px] font-semibold text-muted-foreground uppercase tracking-wide mb-1.5", children: category }),
-            /* @__PURE__ */ (0, import_jsx_runtime158.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_runtime158.jsxs)(
-                "div",
-                {
-                  role: "button",
-                  tabIndex: 0,
-                  onClick: () => toggleComponent(activeStageId, comp.name),
-                  onKeyDown: (e) => {
-                    if (e.key === "Enter" || e.key === " ") {
-                      e.preventDefault();
-                      toggleComponent(activeStageId, comp.name);
-                    }
-                  },
-                  className: cn(
-                    "text-left p-2.5 rounded-lg border text-[11px] transition-all overflow-hidden cursor-pointer",
-                    isSelected ? "border-interactive bg-interactive/5" : "border-border hover:border-interactive/50",
-                    (submitted || !isLatestMessage) && "opacity-60 cursor-default"
-                  ),
-                  children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-                        "div",
-                        {
-                          className: cn(
-                            "w-3.5 h-3.5 rounded border flex items-center justify-center shrink-0",
-                            isSelected ? "bg-interactive border-interactive" : "border-muted-foreground/30"
-                          ),
-                          children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-                            "svg",
-                            {
-                              width: "8",
-                              height: "8",
-                              viewBox: "0 0 24 24",
-                              fill: "none",
-                              stroke: "white",
-                              strokeWidth: "3",
-                              children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("polyline", { points: "20 6 9 17 4 12" })
-                            }
-                          )
-                        }
-                      ),
-                      /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "font-medium text-foreground", children: comp.display_name }),
-                      comp.recommended && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "px-1 py-px text-[8px] font-semibold uppercase tracking-wider rounded-full bg-emerald-500/10 text-emerald-600 border border-emerald-500/20 leading-tight", children: "Rec" }),
-                      onPreview && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: (e) => {
-                            e.stopPropagation();
-                            onPreview(comp.name);
-                          },
-                          className: "ml-auto shrink-0 p-0.5 rounded hover:bg-muted transition-colors",
-                          title: `Preview ${comp.display_name}`,
-                          children: /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
-                            "svg",
-                            {
-                              width: "14",
-                              height: "14",
-                              viewBox: "0 0 24 24",
-                              fill: "none",
-                              stroke: "currentColor",
-                              strokeWidth: "2",
-                              strokeLinecap: "round",
-                              strokeLinejoin: "round",
-                              className: "text-muted-foreground hover:text-primary",
-                              children: [
-                                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
-                                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
-                              ]
-                            }
-                          )
-                        }
-                      )
-                    ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("p", { className: "text-[10px] text-muted-foreground mt-0.5 ml-5 whitespace-normal", children: comp.description })
-                  ]
-                },
-                comp.name
-              );
-            }) })
-          ] }, category))
-        ] }),
-        !submitted && isLatestMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "px-4 py-3 border-t border-border/60 bg-muted/30", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
-          "button",
-          {
-            onClick: handleContinue,
-            className: "w-full py-2 rounded-lg bg-interactive text-white text-xs font-medium hover:opacity-90 transition-opacity",
-            children: "Continue"
-          }
-        ) }),
-        submitted && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "px-4 pb-3", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "text-[10px] text-emerald-600 font-medium text-center py-1.5", children: "Selections confirmed" }) })
-      ]
-    }
-  );
-};
-
-// src/molecules/workstream-builder/StageIndicator/StageIndicator.tsx
-var import_jsx_runtime159 = require("react/jsx-runtime");
-var FONT_STYLE10 = {
-  fontFamily: "Inter, system-ui, sans-serif"
-};
-var StageIndicator = ({
-  stage_name,
-  agent_name,
-  className
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
-    "div",
-    {
-      className: cn(
-        "flex items-center gap-3 my-4",
-        className
-      ),
-      style: { ...FONT_STYLE10, animation: "fadeIn 0.3s ease-out" },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" }),
-        /* @__PURE__ */ (0, import_jsx_runtime159.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_runtime159.jsx)("div", { className: "w-1.5 h-1.5 rounded-full bg-violet-500 animate-pulse" }),
-          /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "text-[10px] font-medium text-violet-600", children: stage_name || agent_name })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "flex-1 h-px bg-[var(--border-color)]" })
-      ]
-    }
-  );
-};
-
 // src/components/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
@@ -42521,7 +41354,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_runtime160 = require("react/jsx-runtime");
+var import_jsx_runtime150 = 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",
   {
@@ -42541,7 +41374,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     "div",
     {
       role: "group",
@@ -42558,7 +41391,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? import_react_slot4.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     Comp,
     {
       className: cn(
@@ -42574,7 +41407,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -42590,9 +41423,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_jsx_runtime161 = require("react/jsx-runtime");
+var import_jsx_runtime151 = require("react/jsx-runtime");
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
     "div",
     {
       "data-slot": "empty",
@@ -42605,7 +41438,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
     "div",
     {
       "data-slot": "empty-header",
@@ -42636,7 +41469,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
     "div",
     {
       "data-slot": "empty-icon",
@@ -42647,7 +41480,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
     "div",
     {
       "data-slot": "empty-title",
@@ -42657,7 +41490,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
     "div",
     {
       "data-slot": "empty-description",
@@ -42670,7 +41503,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
     "div",
     {
       "data-slot": "empty-content",
@@ -42684,11 +41517,11 @@ function EmptyContent({ className, ...props }) {
 }
 
 // src/components/ui/field.tsx
-var import_react82 = require("react");
+var import_react77 = require("react");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_jsx_runtime162 = require("react/jsx-runtime");
+var import_jsx_runtime152 = require("react/jsx-runtime");
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -42706,7 +41539,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "legend",
     {
       "data-slot": "field-legend",
@@ -42722,7 +41555,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "div",
     {
       "data-slot": "field-group",
@@ -42762,7 +41595,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "div",
     {
       role: "group",
@@ -42774,7 +41607,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "div",
     {
       "data-slot": "field-content",
@@ -42790,7 +41623,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     Label,
     {
       "data-slot": "field-label",
@@ -42805,7 +41638,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "div",
     {
       "data-slot": "field-label",
@@ -42818,7 +41651,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "p",
     {
       "data-slot": "field-description",
@@ -42837,7 +41670,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
     "div",
     {
       "data-slot": "field-separator",
@@ -42848,8 +41681,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -42867,7 +41700,7 @@ function FieldError({
   errors,
   ...props
 }) {
-  const content = (0, import_react82.useMemo)(() => {
+  const content = (0, import_react77.useMemo)(() => {
     if (children) {
       return children;
     }
@@ -42877,14 +41710,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
-      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("li", { children: error.message }, index)
+    return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
     "div",
     {
       role: "alert",
@@ -42898,9 +41731,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 var import_class_variance_authority11 = require("class-variance-authority");
-var import_jsx_runtime163 = require("react/jsx-runtime");
+var import_jsx_runtime153 = require("react/jsx-runtime");
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
     "div",
     {
       "data-slot": "input-group",
@@ -42944,7 +41777,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
     "div",
     {
       role: "group",
@@ -42984,7 +41817,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
     Button,
     {
       type,
@@ -42996,7 +41829,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
     "span",
     {
       className: cn(
@@ -43011,7 +41844,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
     Input,
     {
       "data-slot": "input-group-control",
@@ -43027,7 +41860,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -43043,9 +41876,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_runtime164 = require("react/jsx-runtime");
+var import_jsx_runtime154 = require("react/jsx-runtime");
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     "div",
     {
       role: "list",
@@ -43059,7 +41892,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -43097,7 +41930,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? import_react_slot5.Slot : "div";
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     Comp,
     {
       "data-slot": "item",
@@ -43128,7 +41961,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     "div",
     {
       "data-slot": "item-media",
@@ -43139,7 +41972,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     "div",
     {
       "data-slot": "item-content",
@@ -43152,7 +41985,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     "div",
     {
       "data-slot": "item-title",
@@ -43165,7 +41998,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     "p",
     {
       "data-slot": "item-description",
@@ -43179,7 +42012,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     "div",
     {
       "data-slot": "item-actions",
@@ -43189,7 +42022,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     "div",
     {
       "data-slot": "item-header",
@@ -43202,7 +42035,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
     "div",
     {
       "data-slot": "item-footer",
@@ -43216,9 +42049,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-var import_jsx_runtime165 = require("react/jsx-runtime");
+var import_jsx_runtime155 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
     "kbd",
     {
       "data-slot": "kbd",
@@ -43233,7 +42066,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -43244,16 +42077,16 @@ function KbdGroup({ className, ...props }) {
 }
 
 // src/components/ui/sidebar.tsx
-var React104 = __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 React103 = __toESM(require("react"), 1);
+var React99 = __toESM(require("react"), 1);
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React103.useState(void 0);
-  React103.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);
@@ -43266,22 +42099,22 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-var import_jsx_runtime166 = require("react/jsx-runtime");
+var import_jsx_runtime156 = 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 = React104.createContext(null);
+var SidebarContext = React100.createContext(null);
 function useSidebar() {
-  const context = React104.useContext(SidebarContext);
+  const context = React100.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React104.forwardRef(
+var SidebarProvider = React100.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -43292,10 +42125,10 @@ var SidebarProvider = React104.forwardRef(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React104.useState(false);
-    const [_open, _setOpen] = React104.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React100.useState(false);
+    const [_open, _setOpen] = React100.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React104.useCallback(
+    const setOpen = React100.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -43307,10 +42140,10 @@ var SidebarProvider = React104.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React104.useCallback(() => {
+    const toggleSidebar = React100.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React104.useEffect(() => {
+    React100.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -43321,7 +42154,7 @@ var SidebarProvider = React104.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React104.useMemo(
+    const contextValue = React100.useMemo(
       () => ({
         state,
         open,
@@ -43333,7 +42166,7 @@ var SidebarProvider = React104.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
       "div",
       {
         style: {
@@ -43353,7 +42186,7 @@ var SidebarProvider = React104.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React104.forwardRef(
+var Sidebar = React100.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -43364,7 +42197,7 @@ var Sidebar = React104.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
         "div",
         {
           className: cn(
@@ -43378,7 +42211,7 @@ var Sidebar = React104.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
+      return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -43389,16 +42222,16 @@ var Sidebar = React104.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
       "div",
       {
         ref,
@@ -43408,7 +42241,7 @@ var Sidebar = React104.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
             "div",
             {
               className: cn(
@@ -43419,7 +42252,7 @@ var Sidebar = React104.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
             "div",
             {
               className: cn(
@@ -43430,7 +42263,7 @@ var Sidebar = React104.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -43446,9 +42279,9 @@ var Sidebar = React104.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React104.forwardRef(({ className, onClick, ...props }, ref) => {
+var SidebarTrigger = React100.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
     Button,
     {
       ref,
@@ -43462,16 +42295,16 @@ var SidebarTrigger = React104.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(PanelLeft, {}),
-        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(PanelLeft, {}),
+        /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React104.forwardRef(({ className, ...props }, ref) => {
+var SidebarRail = React100.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     "button",
     {
       ref,
@@ -43494,8 +42327,8 @@ var SidebarRail = React104.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React104.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarInset = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     "main",
     {
       ref,
@@ -43509,8 +42342,8 @@ var SidebarInset = React104.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React104.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarInput = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     Input,
     {
       ref,
@@ -43524,8 +42357,8 @@ var SidebarInput = React104.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React104.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarHeader = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     "div",
     {
       ref,
@@ -43536,8 +42369,8 @@ var SidebarHeader = React104.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React104.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarFooter = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     "div",
     {
       ref,
@@ -43548,8 +42381,8 @@ var SidebarFooter = React104.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React104.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarSeparator = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     Separator2,
     {
       ref,
@@ -43560,8 +42393,8 @@ var SidebarSeparator = React104.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React104.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarContent = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     "div",
     {
       ref,
@@ -43575,8 +42408,8 @@ var SidebarContent = React104.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React104.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarGroup = React100.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     "div",
     {
       ref,
@@ -43587,9 +42420,9 @@ var SidebarGroup = React104.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React104.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_runtime166.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     Comp,
     {
       ref,
@@ -43604,9 +42437,9 @@ var SidebarGroupLabel = React104.forwardRef(({ className, asChild = false, ...pr
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React104.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_runtime166.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     Comp,
     {
       ref,
@@ -43623,7 +42456,7 @@ var SidebarGroupAction = React104.forwardRef(({ className, asChild = false, ...p
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React104.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarGroupContent = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
   "div",
   {
     ref,
@@ -43633,7 +42466,7 @@ var SidebarGroupContent = React104.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React104.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarMenu = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
   "ul",
   {
     ref,
@@ -43643,7 +42476,7 @@ var SidebarMenu = React104.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React104.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarMenuItem = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
   "li",
   {
     ref,
@@ -43673,7 +42506,7 @@ var sidebarMenuButtonVariants = (0, import_class_variance_authority13.cva)(
     }
   }
 );
-var SidebarMenuButton = React104.forwardRef(
+var SidebarMenuButton = React100.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -43685,7 +42518,7 @@ var SidebarMenuButton = React104.forwardRef(
   }, ref) => {
     const Comp = asChild ? import_react_slot6.Slot : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+    const button = /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
       Comp,
       {
         ref,
@@ -43704,9 +42537,9 @@ var SidebarMenuButton = React104.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(Tooltip, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(Tooltip, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
         TooltipContent,
         {
           side: "right",
@@ -43719,9 +42552,9 @@ var SidebarMenuButton = React104.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React104.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_runtime166.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     Comp,
     {
       ref,
@@ -43742,7 +42575,7 @@ var SidebarMenuAction = React104.forwardRef(({ className, asChild = false, showO
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React104.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarMenuBadge = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
   "div",
   {
     ref,
@@ -43760,11 +42593,11 @@ var SidebarMenuBadge = React104.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React104.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React104.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_runtime166.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
     "div",
     {
       ref,
@@ -43772,14 +42605,14 @@ var SidebarMenuSkeleton = React104.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_runtime166.jsx)(
+        showIcon && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -43794,7 +42627,7 @@ var SidebarMenuSkeleton = React104.forwardRef(({ className, showIcon = false, ..
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React104.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+var SidebarMenuSub = React100.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
   "ul",
   {
     ref,
@@ -43808,11 +42641,11 @@ var SidebarMenuSub = React104.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React104.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)("li", { ref, ...props }));
+var SidebarMenuSubItem = React100.forwardRef(({ ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React104.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_runtime166.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     Comp,
     {
       ref,
@@ -43836,20 +42669,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 var import_next_themes = require("next-themes");
 var import_sonner = require("sonner");
-var import_jsx_runtime167 = require("react/jsx-runtime");
+var import_jsx_runtime157 = require("react/jsx-runtime");
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = (0, import_next_themes.useTheme)();
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
     import_sonner.Toaster,
     {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -43865,26 +42698,26 @@ var Toaster = ({ ...props }) => {
 };
 
 // src/components/ui/toggle-group.tsx
-var React105 = __toESM(require("react"), 1);
+var React101 = __toESM(require("react"), 1);
 var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var ToggleGroupContext = React105.createContext({
+var import_jsx_runtime158 = require("react/jsx-runtime");
+var ToggleGroupContext = React101.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React105.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+var ToggleGroup = React101.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React105.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React105.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+var ToggleGroupItem = React101.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React101.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -43903,7 +42736,7 @@ var ToggleGroupItem = React105.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-var import_jsx_runtime169 = require("react/jsx-runtime");
+var import_jsx_runtime159 = require("react/jsx-runtime");
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -44008,24 +42841,24 @@ var REGISTERED_COMPONENTS = /* @__PURE__ */ new Set([
 ]);
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime159.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_runtime169.jsxs)("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "flex-1", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime169.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_runtime159.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_runtime169.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
-          /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
+        /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -44103,12 +42936,12 @@ var PXEngineRenderer = ({
   const root = schema.root || schema;
   const renderRecursive = (component, index) => {
     if (Array.isArray(component)) {
-      return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(import_react83.default.Fragment, { children: component.map((child, idx) => renderRecursive(child, idx)) }, index !== void 0 ? `array-${index}` : "array-root");
+      return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_react78.default.Fragment, { children: component.map((child, idx) => renderRecursive(child, idx)) }, index !== void 0 ? `array-${index}` : "array-root");
     }
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (import_react83.default.isValidElement(component)) {
+    if (import_react78.default.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -44187,7 +43020,7 @@ var PXEngineRenderer = ({
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -44199,7 +43032,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
         TargetComponent,
         {
           ...finalProps,
@@ -44211,7 +43044,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ (0, import_jsx_runtime159.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 = {
@@ -44221,8 +43054,6 @@ var PXEngineRenderer = ({
   AccordionItem,
   AccordionTrigger,
   ActionButton,
-  AgentCard,
-  AgentDataTable,
   Alert,
   AlertAtom,
   AlertDescription,
@@ -44381,7 +43212,6 @@ var PXEngineRenderer = ({
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
-  InstructionPreview,
   KbdAtom,
   KeywordBundlesDisplay,
   KeywordBundlesEdit,
@@ -44399,9 +43229,6 @@ var PXEngineRenderer = ({
   MenubarSeparator,
   MenubarShortcut,
   MenubarTrigger,
-  MultiAgentCard,
-  MultiAgentPlan,
-  MultiAgentUISelector,
   NavigationMenu,
   NavigationMenuContent,
   NavigationMenuItem,
@@ -44469,7 +43296,6 @@ var PXEngineRenderer = ({
   SocialPostCard,
   Spinner,
   SpinnerAtom,
-  StageIndicator,
   StatsGrid,
   StepWizard,
   Switch,
@@ -44493,16 +43319,13 @@ var PXEngineRenderer = ({
   TextareaAtom,
   TimelineAtom,
   ToggleAtom,
-  ToolListCard,
   Tooltip,
   TooltipAtom,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
   TopPostsGrid,
-  UIComponentSelector,
   VideoAtom,
-  WorkflowVisualizer,
   cn,
   defaultFetchSelections,
   defaultPersistSelection,