pxengine 0.1.32 → 0.1.34

package/dist/index.mjs

@@ -5,7 +5,7 @@ var __export = (target, all) => {
 };
 
 // src/render/PXEngineRenderer.tsx
-import React98 from "react";
+import React101 from "react";
 
 // src/atoms/index.ts
 var atoms_exports = {};
@@ -33298,6 +33298,8 @@ ArrowToggleAtom.displayName = "ArrowToggleAtom";
 var molecules_exports = {};
 __export(molecules_exports, {
   ActionButton: () => ActionButton,
+  AgentCard: () => AgentCard,
+  AgentDataTable: () => AgentDataTable,
   AudienceDemographicsCard: () => AudienceDemographicsCard,
   AudienceMetricCard: () => AudienceMetricCard,
   BrandAffinityGroup: () => BrandAffinityGroup,
@@ -33317,6 +33319,7 @@ __export(molecules_exports, {
   FilterBar: () => FilterBar,
   FormCard: () => FormCard,
   GrowthChartCard: () => GrowthChartCard,
+  InstructionPreview: () => InstructionPreview,
   KeywordBundlesDisplay: () => KeywordBundlesDisplay,
   KeywordBundlesEdit: () => KeywordBundlesEdit,
   LoadingOverlay: () => LoadingOverlay,
@@ -33329,7 +33332,9 @@ __export(molecules_exports, {
   StatsGrid: () => StatsGrid,
   StepWizard: () => StepWizard,
   TagCloud: () => TagCloud,
-  TopPostsGrid: () => TopPostsGrid
+  ToolListCard: () => ToolListCard,
+  TopPostsGrid: () => TopPostsGrid,
+  WorkflowVisualizer: () => WorkflowVisualizer
 });
 
 // src/molecules/generic/EditableField/EditableField.tsx
@@ -35152,22 +35157,30 @@ var KeywordBundlesDisplay = ({ value }) => {
 var DEFAULT_PLATFORMS = ["Instagram", "YouTube", "TikTok"];
 var PlatformSelectEdit = ({
   value,
-  onChange,
-  config = {}
+  onChange
 }) => {
-  const selectedPlatforms = Array.isArray(value) ? value : [];
-  const options = useMemo4(() => {
-    const providedOptions = config.options || DEFAULT_PLATFORMS;
-    const combined = Array.from(/* @__PURE__ */ new Set([...providedOptions, ...selectedPlatforms]));
-    return combined;
-  }, [config.options, selectedPlatforms]);
+  const selectedPlatforms = useMemo4(() => {
+    if (Array.isArray(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") {
+      return value.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+  }, [value]);
+  const isSelected = (p) => selectedPlatforms.some((s) => s.toLowerCase() === p.toLowerCase());
   const togglePlatform = (platform) => {
-    if (selectedPlatforms.includes(platform)) {
-      onChange(selectedPlatforms.filter((p) => p !== platform));
+    if (isSelected(platform)) {
+      onChange(
+        selectedPlatforms.filter(
+          (p) => p.toLowerCase() !== platform.toLowerCase()
+        )
+      );
     } else {
       onChange([...selectedPlatforms, platform]);
     }
   };
+  const options = useMemo4(() => {
+    return DEFAULT_PLATFORMS;
+  }, []);
   return /* @__PURE__ */ jsx106("div", { className: "flex flex-wrap gap-4 py-2", children: options.map((platform) => /* @__PURE__ */ jsxs66(
     "label",
     {
@@ -35178,10 +35191,10 @@ var PlatformSelectEdit = ({
           {
             className: cn(
               "w-5 h-5 rounded flex items-center justify-center border-2 transition-all",
-              selectedPlatforms.includes(platform) ? "bg-purple-600 border-purple-600" : "border-gray-300 group-hover:border-purple-400"
+              isSelected(platform) ? "bg-purple-600 border-purple-600" : "border-gray-300 group-hover:border-purple-400"
             ),
             onClick: () => togglePlatform(platform),
-            children: selectedPlatforms.includes(platform) && /* @__PURE__ */ jsx106(Check, { className: "h-3.5 w-3.5 text-white stroke-[3]" })
+            children: isSelected(platform) && /* @__PURE__ */ jsx106(Check, { className: "h-3.5 w-3.5 text-white stroke-[3]" })
           }
         ),
         /* @__PURE__ */ jsx106("span", { className: "text-sm font-medium text-foreground select-none", children: platform })
@@ -35191,10 +35204,17 @@ var PlatformSelectEdit = ({
   )) });
 };
 var PlatformSelectDisplay = ({ value }) => {
-  if (!value || !Array.isArray(value) || value.length === 0) {
+  const displayValues = useMemo4(() => {
+    if (Array.isArray(value)) return value;
+    if (typeof value === "string" && value.trim() !== "") {
+      return value.split(",").map((s) => s.trim()).filter(Boolean);
+    }
+    return [];
+  }, [value]);
+  if (displayValues.length === 0) {
     return /* @__PURE__ */ jsx106("span", { className: "text-muted-foreground italic text-sm", children: "Not specified" });
   }
-  return /* @__PURE__ */ jsx106("div", { className: "flex flex-wrap gap-2 pt-1", children: value.map((platform) => /* @__PURE__ */ jsx106(
+  return /* @__PURE__ */ jsx106("div", { className: "flex flex-wrap gap-2 pt-1", children: displayValues.map((platform) => /* @__PURE__ */ jsx106(
     "div",
     {
       className: "flex items-center gap-2 px-3 py-1 bg-grayPill border border-foreground rounded-md text-foreground text-sm font-grotesk font-medium",
@@ -35284,10 +35304,7 @@ function buildCampaignSeedFields(data) {
           PlatformSelectEdit,
           {
             value: v,
-            onChange,
-            config: {
-              options: data.platform_options || data.available_platforms || data.platforms_list || []
-            }
+            onChange
           }
         )
       };
@@ -35451,8 +35468,7 @@ function buildSearchSpecFields(data) {
           PlatformSelectEdit,
           {
             value: v,
-            onChange,
-            config: { options: data.platform_options || data.available_platforms || data.platforms_list || [] }
+            onChange
           }
         )
       };
@@ -36462,10 +36478,7 @@ var CampaignConceptCard = React94.memo(
               PlatformSelectEdit,
               {
                 value: v,
-                onChange,
-                config: {
-                  options: data.platform_options || data.available_platforms || data.platforms_list || []
-                }
+                onChange
               }
             )
           };
@@ -36495,7 +36508,7 @@ var CampaignConceptCard = React94.memo(
               }) });
             }
             if (typeof val === "object" && val !== null) {
-              return /* @__PURE__ */ jsx121("div", { className: "text-muted-foreground text-xs font-mono bg-paperBackground p-2 rounded border border-gray400 mt-1 overflow-auto max-h-24", children: Object.entries(val).map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`).join("\n") });
+              return /* @__PURE__ */ jsx121("div", { className: "text-muted-foreground text-xs font-mono bg-paperBackground p-2 rounded mt-1 overflow-auto max-h-24", children: Object.entries(val).map(([k, v]) => `${k.replace(/_/g, " ")}: ${v}`).join("\n") });
             }
             return /* @__PURE__ */ jsx121("span", { className: "text-foreground text-sm", children: val !== void 0 && val !== null ? String(val) : "-" });
           }
@@ -36600,6 +36613,590 @@ var CampaignConceptCard = React94.memo(
 );
 CampaignConceptCard.displayName = "CampaignConceptCard";
 
+// src/molecules/agent-builder/ToolListCard/ToolListCard.tsx
+import { jsx as jsx122, jsxs as jsxs81 } from "react/jsx-runtime";
+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
+};
+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__ */ jsxs81(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs81("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__ */ jsx122("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ jsx122(Wrench, { className: "w-3.5 h-3.5 text-[var(--primary-color)]" }) }),
+          /* @__PURE__ */ jsx122("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Available Tools" }),
+          /* @__PURE__ */ jsx122("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__ */ jsx122("div", { className: "divide-y divide-[var(--border-color)]", children: categories.map((cat) => {
+          const CatIcon = resolveCategoryIcon(cat);
+          return /* @__PURE__ */ jsxs81("div", { className: "px-4 py-3", children: [
+            /* @__PURE__ */ jsxs81("div", { className: "flex items-center gap-2 mb-2.5", children: [
+              /* @__PURE__ */ jsx122(CatIcon, { className: "w-3.5 h-3.5 text-[var(--primary-color)]/70" }),
+              /* @__PURE__ */ jsx122("span", { className: "text-[11px] font-semibold text-[var(--foreground)]/50 uppercase tracking-wider", children: cat }),
+              /* @__PURE__ */ jsx122("span", { className: "text-[10px] text-[var(--foreground)]/30", children: grouped[cat].length })
+            ] }),
+            /* @__PURE__ */ jsx122("div", { className: "space-y-1.5", children: grouped[cat].map((tool) => {
+              const ToolIcon = resolveIcon(tool);
+              return /* @__PURE__ */ jsxs81(
+                "div",
+                {
+                  className: "group flex items-start gap-3 px-3 py-2 rounded-lg hover:bg-[var(--foreground)]/[0.03] transition-colors",
+                  children: [
+                    /* @__PURE__ */ jsx122("div", { className: "shrink-0 mt-0.5 w-5 h-5 rounded flex items-center justify-center bg-[var(--primary-color)]/[0.08]", children: /* @__PURE__ */ jsx122(ToolIcon, { className: "w-3 h-3 text-[var(--primary-color)]/60" }) }),
+                    /* @__PURE__ */ jsxs81("div", { className: "flex-1 min-w-0", children: [
+                      /* @__PURE__ */ jsxs81("div", { className: "flex items-center gap-2 flex-wrap", children: [
+                        tool.display_name && tool.display_name !== tool.name && /* @__PURE__ */ jsx122("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: tool.display_name }),
+                        /* @__PURE__ */ jsx122("span", { className: "text-[11px] font-mono px-1.5 py-0.5 rounded bg-[var(--foreground)]/[0.06] text-[var(--foreground)]/50 border border-[var(--foreground)]/[0.06]", children: tool.name })
+                      ] }),
+                      tool.description && /* @__PURE__ */ jsx122("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed mt-0.5", children: tool.description })
+                    ] })
+                  ]
+                },
+                tool.name
+              );
+            }) })
+          ] }, cat);
+        }) })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/AgentCard/AgentCard.tsx
+import { useState as useState10, useCallback as useCallback4 } from "react";
+import { Fragment as Fragment4, jsx as jsx123, jsxs as jsxs82 } from "react/jsx-runtime";
+var AgentCard = ({
+  agent,
+  editable = true,
+  compact = false,
+  onSave,
+  className
+}) => {
+  const [isEditing, setIsEditing] = useState10(false);
+  const [isSaving, setIsSaving] = useState10(false);
+  const [editState, setEditState] = useState10({
+    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 = useCallback4(() => {
+    setEditState({
+      display_name: agent.display_name,
+      description: agent.description,
+      image: agent.image || ""
+    });
+    setIsEditing(true);
+  }, [agent]);
+  const handleCancel = useCallback4(() => {
+    setIsEditing(false);
+  }, []);
+  const handleSave = useCallback4(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__ */ jsxs82(
+      "div",
+      {
+        className: cn(
+          "flex items-center gap-3 py-1",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsxs82(Avatar, { className: "h-8 w-8 shrink-0", children: [
+            /* @__PURE__ */ jsx123(AvatarImage, { src: avatarUrl, alt: agent.display_name }),
+            /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] text-xs font-bold", children: agent.display_name.charAt(0) })
+          ] }),
+          /* @__PURE__ */ jsxs82("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx123("span", { className: "text-[var(--foreground)] text-sm font-semibold truncate", children: agent.display_name }),
+              /* @__PURE__ */ jsx123(
+                "span",
+                {
+                  className: cn(
+                    "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: agent.enabled ? "Active" : "Disabled"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx123("p", { className: "text-[var(--foreground)]/50 text-xs truncate", children: agent.description })
+          ] })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs82(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs82("div", { className: "flex items-start gap-4 px-5 py-4", children: [
+          /* @__PURE__ */ jsxs82(Avatar, { className: "h-12 w-12 shrink-0 border-2 border-[var(--primary-color)]/20", children: [
+            /* @__PURE__ */ jsx123(AvatarImage, { src: isEditing && editState.image ? editState.image : avatarUrl, alt: agent.display_name }),
+            /* @__PURE__ */ jsx123(AvatarFallback, { className: "bg-[var(--primary-color)]/10 text-[var(--primary-color)] text-lg font-bold", children: agent.display_name.charAt(0) })
+          ] }),
+          /* @__PURE__ */ jsx123("div", { className: "flex-1 min-w-0", children: isEditing ? /* @__PURE__ */ jsxs82("div", { className: "space-y-2", children: [
+            /* @__PURE__ */ jsx123(
+              "input",
+              {
+                type: "text",
+                value: editState.display_name,
+                onChange: (e) => setEditState((s) => ({ ...s, display_name: e.target.value })),
+                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-sm text-[var(--foreground)] font-semibold outline-none focus:border-[var(--primary-color)] transition-colors",
+                placeholder: "Display name"
+              }
+            ),
+            /* @__PURE__ */ jsx123(
+              "textarea",
+              {
+                value: editState.description,
+                onChange: (e) => setEditState((s) => ({ ...s, description: e.target.value })),
+                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-xs text-[var(--foreground)]/70 outline-none focus:border-[var(--primary-color)] transition-colors resize-none",
+                rows: 2,
+                placeholder: "Description"
+              }
+            ),
+            /* @__PURE__ */ jsx123(
+              "input",
+              {
+                type: "text",
+                value: editState.image,
+                onChange: (e) => setEditState((s) => ({ ...s, image: e.target.value })),
+                className: "w-full bg-[var(--card-background)] border border-[var(--border-color)] rounded-lg px-3 py-1.5 text-xs text-[var(--foreground)]/70 font-mono outline-none focus:border-[var(--primary-color)] transition-colors",
+                placeholder: "Avatar image URL"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsxs82(Fragment4, { children: [
+            /* @__PURE__ */ jsxs82("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx123("h4", { className: "text-sm font-semibold text-[var(--foreground)] truncate", children: agent.display_name }),
+              /* @__PURE__ */ jsx123("span", { className: "text-[11px] font-mono text-[var(--foreground)]/40 bg-[var(--foreground)]/[0.05] px-1.5 py-0.5 rounded", children: agent.name }),
+              /* @__PURE__ */ jsx123(
+                "span",
+                {
+                  className: cn(
+                    "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: agent.enabled ? "Active" : "Disabled"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx123("p", { className: "text-xs text-[var(--foreground)]/60 mt-1 leading-relaxed", children: agent.description })
+          ] }) }),
+          editable && onSave && /* @__PURE__ */ jsx123("div", { className: "flex items-center gap-1.5 shrink-0", children: isEditing ? /* @__PURE__ */ jsxs82(Fragment4, { children: [
+            /* @__PURE__ */ jsx123(
+              "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__ */ jsx123(
+              "button",
+              {
+                onClick: handleSave,
+                disabled: isSaving,
+                className: "text-[11px] px-2.5 py-1 rounded-md bg-[var(--primary-color)] text-white hover:opacity-90 transition-opacity disabled:opacity-50",
+                children: isSaving ? "Saving..." : "Save"
+              }
+            )
+          ] }) : /* @__PURE__ */ jsx123(
+            "button",
+            {
+              onClick: handleEdit,
+              className: "text-[11px] px-2.5 py-1 rounded-md border border-[var(--border-color)] text-[var(--foreground)]/50 hover:text-[var(--foreground)] hover:border-[var(--primary-color)]/50 transition-colors",
+              children: "Edit"
+            }
+          ) })
+        ] }),
+        /* @__PURE__ */ jsx123("div", { className: "flex flex-wrap items-center gap-3 px-5 pb-3 text-xs", children: /* @__PURE__ */ jsxs82("span", { className: "text-[var(--foreground)]/40", children: [
+          "Model:",
+          " ",
+          /* @__PURE__ */ jsx123("span", { className: "font-mono text-[var(--foreground)]/70", children: agent.model })
+        ] }) }),
+        agent.tools && agent.tools.length > 0 && /* @__PURE__ */ jsxs82("div", { className: "border-t border-[var(--border-color)] px-5 py-3", children: [
+          /* @__PURE__ */ jsxs82("p", { className: "text-[11px] font-semibold text-[var(--foreground)]/40 uppercase tracking-wide mb-2", children: [
+            "Tools (",
+            agent.tools.length,
+            ")"
+          ] }),
+          /* @__PURE__ */ jsx123("div", { className: "flex flex-wrap gap-1.5", children: agent.tools.map((tool) => /* @__PURE__ */ jsx123(
+            "span",
+            {
+              className: "text-[11px] px-2 py-0.5 rounded-md bg-[var(--primary-color)]/10 text-[var(--primary-color)] font-mono border border-[var(--primary-color)]/20",
+              children: tool
+            },
+            tool
+          )) })
+        ] })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/AgentDataTable/AgentDataTable.tsx
+import { jsx as jsx124, jsxs as jsxs83 } from "react/jsx-runtime";
+var AgentDataTable = ({
+  headers,
+  rows,
+  className
+}) => {
+  const renderCell = (value) => {
+    if (typeof value === "boolean") {
+      return /* @__PURE__ */ jsxs83(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-1 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: [
+            /* @__PURE__ */ jsx124(
+              "span",
+              {
+                className: cn(
+                  "w-1.5 h-1.5 rounded-full",
+                  value ? "bg-emerald-500" : "bg-red-500"
+                )
+              }
+            ),
+            value ? "Yes" : "No"
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx124("span", { className: "text-[var(--foreground)]", children: String(value) });
+  };
+  return /* @__PURE__ */ jsx124(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden",
+        className
+      ),
+      children: /* @__PURE__ */ jsx124("div", { className: "overflow-x-auto", children: /* @__PURE__ */ jsxs83("table", { className: "w-full text-xs", children: [
+        /* @__PURE__ */ jsx124("thead", { children: /* @__PURE__ */ jsx124("tr", { className: "border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: headers.map((header) => /* @__PURE__ */ jsx124(
+          "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__ */ jsx124("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ jsx124(
+          "tr",
+          {
+            className: "border-b border-[var(--border-color)] last:border-b-0 hover:bg-[var(--foreground)]/[0.02] transition-colors",
+            children: row.map((cell, cellIdx) => /* @__PURE__ */ jsx124(
+              "td",
+              {
+                className: "px-4 py-2.5 text-xs whitespace-nowrap",
+                children: renderCell(cell)
+              },
+              cellIdx
+            ))
+          },
+          rowIdx
+        )) })
+      ] }) })
+    }
+  );
+};
+
+// src/molecules/agent-builder/WorkflowVisualizer/WorkflowVisualizer.tsx
+import { useState as useState11 } from "react";
+import { jsx as jsx125, jsxs as jsxs84 } from "react/jsx-runtime";
+var WorkflowVisualizer = ({
+  steps,
+  className
+}) => {
+  const [expandedStep, setExpandedStep] = useState11(null);
+  return /* @__PURE__ */ jsxs84(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs84("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__ */ jsx125("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ jsx125(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "var(--primary-color)",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: /* @__PURE__ */ jsx125("polyline", { points: "22 12 18 12 15 21 9 3 6 12 2 12" })
+            }
+          ) }),
+          /* @__PURE__ */ jsx125("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: "Workflow" }),
+          /* @__PURE__ */ jsxs84("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__ */ jsx125("div", { className: "px-4 py-3", children: steps.map((step, idx) => {
+          const isLast = idx === steps.length - 1;
+          const isExpanded = expandedStep === step.id;
+          return /* @__PURE__ */ jsxs84("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsxs84("div", { className: "flex flex-col items-center shrink-0", children: [
+              /* @__PURE__ */ jsx125("div", { className: "w-7 h-7 rounded-full bg-[var(--primary-color)]/10 border-2 border-[var(--primary-color)]/30 flex items-center justify-center", children: /* @__PURE__ */ jsx125("span", { className: "text-[10px] font-bold text-[var(--primary-color)]", children: idx + 1 }) }),
+              !isLast && /* @__PURE__ */ jsx125("div", { className: "w-0.5 flex-1 min-h-[16px] bg-[var(--primary-color)]/15" })
+            ] }),
+            /* @__PURE__ */ jsxs84(
+              "div",
+              {
+                className: cn(
+                  "flex-1 mb-3 rounded-lg border border-[var(--border-color)] transition-colors",
+                  isExpanded ? "bg-[var(--foreground)]/[0.02]" : "hover:bg-[var(--foreground)]/[0.02]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsxs84(
+                    "button",
+                    {
+                      onClick: () => setExpandedStep(isExpanded ? null : step.id),
+                      className: "w-full text-left px-3 py-2.5 flex items-center gap-2",
+                      children: [
+                        /* @__PURE__ */ jsxs84("div", { className: "flex-1 min-w-0", children: [
+                          /* @__PURE__ */ jsx125("span", { className: "text-[13px] font-medium text-[var(--foreground)]", children: step.name }),
+                          step.description && !isExpanded && /* @__PURE__ */ jsxs84("span", { className: "text-xs text-[var(--foreground)]/40 ml-2", children: [
+                            "\u2014 ",
+                            step.description
+                          ] })
+                        ] }),
+                        /* @__PURE__ */ jsx125(
+                          "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__ */ jsx125("polyline", { points: "6 9 12 15 18 9" })
+                          }
+                        )
+                      ]
+                    }
+                  ),
+                  isExpanded && /* @__PURE__ */ jsxs84("div", { className: "px-3 pb-3 space-y-2.5", children: [
+                    step.description && /* @__PURE__ */ jsx125("p", { className: "text-xs text-[var(--foreground)]/50 leading-relaxed", children: step.description }),
+                    step.sub_steps && step.sub_steps.length > 0 && /* @__PURE__ */ jsx125("div", { className: "space-y-1", children: step.sub_steps.map((sub) => /* @__PURE__ */ jsxs84(
+                      "div",
+                      {
+                        className: "flex items-start gap-2 text-xs",
+                        children: [
+                          /* @__PURE__ */ jsx125("span", { className: "shrink-0 mt-0.5 w-1.5 h-1.5 rounded-full bg-[var(--primary-color)]/40" }),
+                          /* @__PURE__ */ jsx125("span", { className: "text-[var(--foreground)]/60", children: sub.action })
+                        ]
+                      },
+                      sub.id
+                    )) }),
+                    step.tools && step.tools.length > 0 && /* @__PURE__ */ jsxs84("div", { className: "flex items-center gap-1.5 flex-wrap", children: [
+                      /* @__PURE__ */ jsx125("span", { className: "text-[10px] text-[var(--foreground)]/30 uppercase font-semibold tracking-wider", children: "Tools:" }),
+                      step.tools.map((tool) => /* @__PURE__ */ jsx125(
+                        "span",
+                        {
+                          className: "text-[10px] font-mono px-1.5 py-0.5 rounded bg-[var(--primary-color)]/[0.08] text-[var(--primary-color)]/70 border border-[var(--primary-color)]/10",
+                          children: tool
+                        },
+                        tool
+                      ))
+                    ] }),
+                    step.on_failure && /* @__PURE__ */ jsxs84("div", { className: "flex items-start gap-2 text-xs bg-[#ef4444]/[0.06] border border-[#ef4444]/10 rounded-md px-2.5 py-2", children: [
+                      /* @__PURE__ */ jsx125("span", { className: "shrink-0 text-[10px] font-semibold text-[#ef4444]/70 uppercase tracking-wider mt-px", children: "On failure:" }),
+                      /* @__PURE__ */ jsx125("span", { className: "text-[var(--foreground)]/50", children: step.on_failure })
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          ] }, step.id);
+        }) })
+      ]
+    }
+  );
+};
+
+// src/molecules/agent-builder/InstructionPreview/InstructionPreview.tsx
+import { useState as useState12 } from "react";
+import { jsx as jsx126, jsxs as jsxs85 } from "react/jsx-runtime";
+var InstructionPreview = ({
+  agent_name,
+  description,
+  instruction,
+  workflow_summary,
+  tools,
+  className
+}) => {
+  const [isExpanded, setIsExpanded] = useState12(false);
+  const previewLength = 300;
+  const isLong = instruction.length > previewLength;
+  const displayText = isExpanded || !isLong ? instruction : instruction.slice(0, previewLength) + "...";
+  return /* @__PURE__ */ jsxs85(
+    "div",
+    {
+      className: cn(
+        "my-3 rounded-xl border border-[var(--border-color)] bg-[var(--card-background)] overflow-hidden shadow-sm",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx126("div", { className: "px-4 py-3 border-b border-[var(--border-color)] bg-[var(--foreground)]/[0.03]", children: /* @__PURE__ */ jsxs85("div", { className: "flex items-center gap-2.5", children: [
+          /* @__PURE__ */ jsx126("div", { className: "w-6 h-6 rounded-md bg-[var(--primary-color)]/10 flex items-center justify-center", children: /* @__PURE__ */ jsxs85(
+            "svg",
+            {
+              width: "14",
+              height: "14",
+              viewBox: "0 0 24 24",
+              fill: "none",
+              stroke: "var(--primary-color)",
+              strokeWidth: "2",
+              strokeLinecap: "round",
+              strokeLinejoin: "round",
+              children: [
+                /* @__PURE__ */ jsx126("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+                /* @__PURE__ */ jsx126("polyline", { points: "14 2 14 8 20 8" }),
+                /* @__PURE__ */ jsx126("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
+                /* @__PURE__ */ jsx126("line", { x1: "16", y1: "17", x2: "8", y2: "17" }),
+                /* @__PURE__ */ jsx126("polyline", { points: "10 9 9 9 8 9" })
+              ]
+            }
+          ) }),
+          /* @__PURE__ */ jsxs85("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ jsx126("h4", { className: "text-sm font-semibold text-[var(--foreground)]", children: agent_name }),
+            description && /* @__PURE__ */ jsx126("p", { className: "text-[11px] text-[var(--foreground)]/40 mt-0.5", children: description })
+          ] })
+        ] }) }),
+        /* @__PURE__ */ jsxs85("div", { className: "px-4 py-3 space-y-3", children: [
+          /* @__PURE__ */ jsxs85("div", { children: [
+            /* @__PURE__ */ jsx126("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Instruction" }),
+            /* @__PURE__ */ jsx126("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__ */ jsx126(
+              "button",
+              {
+                onClick: () => setIsExpanded(!isExpanded),
+                className: "text-[11px] text-[var(--primary-color)] hover:underline mt-1",
+                children: isExpanded ? "Show less" : "Show full instruction"
+              }
+            )
+          ] }),
+          workflow_summary && workflow_summary.length > 0 && /* @__PURE__ */ jsxs85("div", { children: [
+            /* @__PURE__ */ jsx126("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Workflow" }),
+            /* @__PURE__ */ jsx126("div", { className: "space-y-1", children: workflow_summary.map((step, idx) => /* @__PURE__ */ jsxs85("div", { className: "flex items-start gap-2 text-xs", children: [
+              /* @__PURE__ */ jsx126("span", { className: "shrink-0 w-5 h-5 rounded-full bg-[var(--primary-color)]/10 flex items-center justify-center text-[10px] font-bold text-[var(--primary-color)]", children: idx + 1 }),
+              /* @__PURE__ */ jsx126("span", { className: "text-[var(--foreground)]/50 mt-0.5", children: step })
+            ] }, idx)) })
+          ] }),
+          tools && tools.length > 0 && /* @__PURE__ */ jsxs85("div", { children: [
+            /* @__PURE__ */ jsx126("p", { className: "text-[10px] font-semibold text-[var(--foreground)]/30 uppercase tracking-wider mb-1.5", children: "Tools" }),
+            /* @__PURE__ */ jsx126("div", { className: "flex flex-wrap gap-1.5", children: tools.map((tool) => /* @__PURE__ */ jsx126(
+              "span",
+              {
+                className: "text-[10px] font-mono px-2 py-0.5 rounded bg-[var(--primary-color)]/[0.08] text-[var(--primary-color)]/70 border border-[var(--primary-color)]/10",
+                children: tool
+              },
+              tool
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+
 // src/components/ui/index.ts
 var ui_exports = {};
 __export(ui_exports, {
@@ -36892,7 +37489,7 @@ __export(ui_exports, {
 // src/components/ui/button-group.tsx
 import { Slot as Slot4 } from "@radix-ui/react-slot";
 import { cva as cva8 } from "class-variance-authority";
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx127 } from "react/jsx-runtime";
 var buttonGroupVariants = cva8(
   "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
   {
@@ -36912,7 +37509,7 @@ function ButtonGroup({
   orientation,
   ...props
 }) {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx127(
     "div",
     {
       role: "group",
@@ -36929,7 +37526,7 @@ function ButtonGroupText({
   ...props
 }) {
   const Comp = asChild ? Slot4 : "div";
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx127(
     Comp,
     {
       className: cn(
@@ -36945,7 +37542,7 @@ function ButtonGroupSeparator({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx122(
+  return /* @__PURE__ */ jsx127(
     Separator2,
     {
       "data-slot": "button-group-separator",
@@ -36961,9 +37558,9 @@ function ButtonGroupSeparator({
 
 // src/components/ui/empty.tsx
 import { cva as cva9 } from "class-variance-authority";
-import { jsx as jsx123 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
 function Empty({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx128(
     "div",
     {
       "data-slot": "empty",
@@ -36976,7 +37573,7 @@ function Empty({ className, ...props }) {
   );
 }
 function EmptyHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx128(
     "div",
     {
       "data-slot": "empty-header",
@@ -37007,7 +37604,7 @@ function EmptyMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx128(
     "div",
     {
       "data-slot": "empty-icon",
@@ -37018,7 +37615,7 @@ function EmptyMedia({
   );
 }
 function EmptyTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx128(
     "div",
     {
       "data-slot": "empty-title",
@@ -37028,7 +37625,7 @@ function EmptyTitle({ className, ...props }) {
   );
 }
 function EmptyDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx128(
     "div",
     {
       "data-slot": "empty-description",
@@ -37041,7 +37638,7 @@ function EmptyDescription({ className, ...props }) {
   );
 }
 function EmptyContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx123(
+  return /* @__PURE__ */ jsx128(
     "div",
     {
       "data-slot": "empty-content",
@@ -37057,9 +37654,9 @@ function EmptyContent({ className, ...props }) {
 // src/components/ui/field.tsx
 import { useMemo as useMemo9 } from "react";
 import { cva as cva10 } from "class-variance-authority";
-import { jsx as jsx124, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs86 } from "react/jsx-runtime";
 function FieldSet({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "fieldset",
     {
       "data-slot": "field-set",
@@ -37077,7 +37674,7 @@ function FieldLegend({
   variant = "legend",
   ...props
 }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "legend",
     {
       "data-slot": "field-legend",
@@ -37093,7 +37690,7 @@ function FieldLegend({
   );
 }
 function FieldGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "div",
     {
       "data-slot": "field-group",
@@ -37133,7 +37730,7 @@ function Field({
   orientation = "vertical",
   ...props
 }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "div",
     {
       role: "group",
@@ -37145,7 +37742,7 @@ function Field({
   );
 }
 function FieldContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "div",
     {
       "data-slot": "field-content",
@@ -37161,7 +37758,7 @@ function FieldLabel({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     Label,
     {
       "data-slot": "field-label",
@@ -37176,7 +37773,7 @@ function FieldLabel({
   );
 }
 function FieldTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "div",
     {
       "data-slot": "field-label",
@@ -37189,7 +37786,7 @@ function FieldTitle({ className, ...props }) {
   );
 }
 function FieldDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "p",
     {
       "data-slot": "field-description",
@@ -37208,7 +37805,7 @@ function FieldSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxs81(
+  return /* @__PURE__ */ jsxs86(
     "div",
     {
       "data-slot": "field-separator",
@@ -37219,8 +37816,8 @@ function FieldSeparator({
       ),
       ...props,
       children: [
-        /* @__PURE__ */ jsx124(Separator2, { className: "absolute inset-0 top-1/2" }),
-        children && /* @__PURE__ */ jsx124(
+        /* @__PURE__ */ jsx129(Separator2, { className: "absolute inset-0 top-1/2" }),
+        children && /* @__PURE__ */ jsx129(
           "span",
           {
             className: "bg-background text-muted-foreground relative mx-auto block w-fit px-2",
@@ -37248,14 +37845,14 @@ function FieldError({
     if (errors?.length === 1 && errors[0]?.message) {
       return errors[0].message;
     }
-    return /* @__PURE__ */ jsx124("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
-      (error, index) => error?.message && /* @__PURE__ */ jsx124("li", { children: error.message }, index)
+    return /* @__PURE__ */ jsx129("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: errors.map(
+      (error, index) => error?.message && /* @__PURE__ */ jsx129("li", { children: error.message }, index)
     ) });
   }, [children, errors]);
   if (!content) {
     return null;
   }
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx129(
     "div",
     {
       role: "alert",
@@ -37269,9 +37866,9 @@ function FieldError({
 
 // src/components/ui/input-group.tsx
 import { cva as cva11 } from "class-variance-authority";
-import { jsx as jsx125 } from "react/jsx-runtime";
+import { jsx as jsx130 } from "react/jsx-runtime";
 function InputGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx130(
     "div",
     {
       "data-slot": "input-group",
@@ -37315,7 +37912,7 @@ function InputGroupAddon({
   align = "inline-start",
   ...props
 }) {
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx130(
     "div",
     {
       role: "group",
@@ -37355,7 +37952,7 @@ function InputGroupButton({
   size = "xs",
   ...props
 }) {
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx130(
     Button,
     {
       type,
@@ -37367,7 +37964,7 @@ function InputGroupButton({
   );
 }
 function InputGroupText({ className, ...props }) {
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx130(
     "span",
     {
       className: cn(
@@ -37382,7 +37979,7 @@ function InputGroupInput({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx130(
     Input,
     {
       "data-slot": "input-group-control",
@@ -37398,7 +37995,7 @@ function InputGroupTextarea({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx125(
+  return /* @__PURE__ */ jsx130(
     Textarea,
     {
       "data-slot": "input-group-control",
@@ -37414,9 +38011,9 @@ function InputGroupTextarea({
 // src/components/ui/item.tsx
 import { Slot as Slot5 } from "@radix-ui/react-slot";
 import { cva as cva12 } from "class-variance-authority";
-import { jsx as jsx126 } from "react/jsx-runtime";
+import { jsx as jsx131 } from "react/jsx-runtime";
 function ItemGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "div",
     {
       role: "list",
@@ -37430,7 +38027,7 @@ function ItemSeparator({
   className,
   ...props
 }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     Separator2,
     {
       "data-slot": "item-separator",
@@ -37468,7 +38065,7 @@ function Item8({
   ...props
 }) {
   const Comp = asChild ? Slot5 : "div";
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     Comp,
     {
       "data-slot": "item",
@@ -37499,7 +38096,7 @@ function ItemMedia({
   variant = "default",
   ...props
 }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "div",
     {
       "data-slot": "item-media",
@@ -37510,7 +38107,7 @@ function ItemMedia({
   );
 }
 function ItemContent({ className, ...props }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "div",
     {
       "data-slot": "item-content",
@@ -37523,7 +38120,7 @@ function ItemContent({ className, ...props }) {
   );
 }
 function ItemTitle({ className, ...props }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "div",
     {
       "data-slot": "item-title",
@@ -37536,7 +38133,7 @@ function ItemTitle({ className, ...props }) {
   );
 }
 function ItemDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "p",
     {
       "data-slot": "item-description",
@@ -37550,7 +38147,7 @@ function ItemDescription({ className, ...props }) {
   );
 }
 function ItemActions({ className, ...props }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "div",
     {
       "data-slot": "item-actions",
@@ -37560,7 +38157,7 @@ function ItemActions({ className, ...props }) {
   );
 }
 function ItemHeader({ className, ...props }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "div",
     {
       "data-slot": "item-header",
@@ -37573,7 +38170,7 @@ function ItemHeader({ className, ...props }) {
   );
 }
 function ItemFooter({ className, ...props }) {
-  return /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx131(
     "div",
     {
       "data-slot": "item-footer",
@@ -37587,9 +38184,9 @@ function ItemFooter({ className, ...props }) {
 }
 
 // src/components/ui/kbd.tsx
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx132 } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx132(
     "kbd",
     {
       "data-slot": "kbd",
@@ -37604,7 +38201,7 @@ function Kbd({ className, ...props }) {
   );
 }
 function KbdGroup({ className, ...props }) {
-  return /* @__PURE__ */ jsx127(
+  return /* @__PURE__ */ jsx132(
     "kbd",
     {
       "data-slot": "kbd-group",
@@ -37615,16 +38212,16 @@ function KbdGroup({ className, ...props }) {
 }
 
 // src/components/ui/sidebar.tsx
-import * as React96 from "react";
+import * as React99 from "react";
 import { Slot as Slot6 } from "@radix-ui/react-slot";
 import { cva as cva13 } from "class-variance-authority";
 
 // src/hooks/use-mobile.tsx
-import * as React95 from "react";
+import * as React98 from "react";
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile() {
-  const [isMobile, setIsMobile] = React95.useState(void 0);
-  React95.useEffect(() => {
+  const [isMobile, setIsMobile] = React98.useState(void 0);
+  React98.useEffect(() => {
     const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
     const onChange = () => {
       setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
@@ -37637,22 +38234,22 @@ function useIsMobile() {
 }
 
 // src/components/ui/sidebar.tsx
-import { jsx as jsx128, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx133, jsxs as jsxs87 } from "react/jsx-runtime";
 var SIDEBAR_COOKIE_NAME = "sidebar_state";
 var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React96.createContext(null);
+var SidebarContext = React99.createContext(null);
 function useSidebar() {
-  const context = React96.useContext(SidebarContext);
+  const context = React99.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
   return context;
 }
-var SidebarProvider = React96.forwardRef(
+var SidebarProvider = React99.forwardRef(
   ({
     defaultOpen = true,
     open: openProp,
@@ -37663,10 +38260,10 @@ var SidebarProvider = React96.forwardRef(
     ...props
   }, ref) => {
     const isMobile = useIsMobile();
-    const [openMobile, setOpenMobile] = React96.useState(false);
-    const [_open, _setOpen] = React96.useState(defaultOpen);
+    const [openMobile, setOpenMobile] = React99.useState(false);
+    const [_open, _setOpen] = React99.useState(defaultOpen);
     const open = openProp ?? _open;
-    const setOpen = React96.useCallback(
+    const setOpen = React99.useCallback(
       (value) => {
         const openState = typeof value === "function" ? value(open) : value;
         if (setOpenProp) {
@@ -37678,10 +38275,10 @@ var SidebarProvider = React96.forwardRef(
       },
       [setOpenProp, open]
     );
-    const toggleSidebar = React96.useCallback(() => {
+    const toggleSidebar = React99.useCallback(() => {
       return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
     }, [isMobile, setOpen, setOpenMobile]);
-    React96.useEffect(() => {
+    React99.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
           event.preventDefault();
@@ -37692,7 +38289,7 @@ var SidebarProvider = React96.forwardRef(
       return () => window.removeEventListener("keydown", handleKeyDown);
     }, [toggleSidebar]);
     const state = open ? "expanded" : "collapsed";
-    const contextValue = React96.useMemo(
+    const contextValue = React99.useMemo(
       () => ({
         state,
         open,
@@ -37704,7 +38301,7 @@ var SidebarProvider = React96.forwardRef(
       }),
       [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
     );
-    return /* @__PURE__ */ jsx128(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx128(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx128(
+    return /* @__PURE__ */ jsx133(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx133(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx133(
       "div",
       {
         style: {
@@ -37724,7 +38321,7 @@ var SidebarProvider = React96.forwardRef(
   }
 );
 SidebarProvider.displayName = "SidebarProvider";
-var Sidebar = React96.forwardRef(
+var Sidebar = React99.forwardRef(
   ({
     side = "left",
     variant = "sidebar",
@@ -37735,7 +38332,7 @@ var Sidebar = React96.forwardRef(
   }, ref) => {
     const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
-      return /* @__PURE__ */ jsx128(
+      return /* @__PURE__ */ jsx133(
         "div",
         {
           className: cn(
@@ -37749,7 +38346,7 @@ var Sidebar = React96.forwardRef(
       );
     }
     if (isMobile) {
-      return /* @__PURE__ */ jsx128(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs82(
+      return /* @__PURE__ */ jsx133(Sheet2, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs87(
         SheetContent,
         {
           "data-sidebar": "sidebar",
@@ -37760,16 +38357,16 @@ var Sidebar = React96.forwardRef(
           },
           side,
           children: [
-            /* @__PURE__ */ jsxs82(SheetHeader, { className: "sr-only", children: [
-              /* @__PURE__ */ jsx128(SheetTitle, { children: "Sidebar" }),
-              /* @__PURE__ */ jsx128(SheetDescription, { children: "Displays the mobile sidebar." })
+            /* @__PURE__ */ jsxs87(SheetHeader, { className: "sr-only", children: [
+              /* @__PURE__ */ jsx133(SheetTitle, { children: "Sidebar" }),
+              /* @__PURE__ */ jsx133(SheetDescription, { children: "Displays the mobile sidebar." })
             ] }),
-            /* @__PURE__ */ jsx128("div", { className: "flex h-full w-full flex-col", children })
+            /* @__PURE__ */ jsx133("div", { className: "flex h-full w-full flex-col", children })
           ]
         }
       ) });
     }
-    return /* @__PURE__ */ jsxs82(
+    return /* @__PURE__ */ jsxs87(
       "div",
       {
         ref,
@@ -37779,7 +38376,7 @@ var Sidebar = React96.forwardRef(
         "data-variant": variant,
         "data-side": side,
         children: [
-          /* @__PURE__ */ jsx128(
+          /* @__PURE__ */ jsx133(
             "div",
             {
               className: cn(
@@ -37790,7 +38387,7 @@ var Sidebar = React96.forwardRef(
               )
             }
           ),
-          /* @__PURE__ */ jsx128(
+          /* @__PURE__ */ jsx133(
             "div",
             {
               className: cn(
@@ -37801,7 +38398,7 @@ var Sidebar = React96.forwardRef(
                 className
               ),
               ...props,
-              children: /* @__PURE__ */ jsx128(
+              children: /* @__PURE__ */ jsx133(
                 "div",
                 {
                   "data-sidebar": "sidebar",
@@ -37817,9 +38414,9 @@ var Sidebar = React96.forwardRef(
   }
 );
 Sidebar.displayName = "Sidebar";
-var SidebarTrigger = React96.forwardRef(({ className, onClick, ...props }, ref) => {
+var SidebarTrigger = React99.forwardRef(({ className, onClick, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs87(
     Button,
     {
       ref,
@@ -37833,16 +38430,16 @@ var SidebarTrigger = React96.forwardRef(({ className, onClick, ...props }, ref)
       },
       ...props,
       children: [
-        /* @__PURE__ */ jsx128(PanelLeft, {}),
-        /* @__PURE__ */ jsx128("span", { className: "sr-only", children: "Toggle Sidebar" })
+        /* @__PURE__ */ jsx133(PanelLeft, {}),
+        /* @__PURE__ */ jsx133("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
   );
 });
 SidebarTrigger.displayName = "SidebarTrigger";
-var SidebarRail = React96.forwardRef(({ className, ...props }, ref) => {
+var SidebarRail = React99.forwardRef(({ className, ...props }, ref) => {
   const { toggleSidebar } = useSidebar();
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     "button",
     {
       ref,
@@ -37865,8 +38462,8 @@ var SidebarRail = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarRail.displayName = "SidebarRail";
-var SidebarInset = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx128(
+var SidebarInset = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx133(
     "main",
     {
       ref,
@@ -37880,8 +38477,8 @@ var SidebarInset = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInset.displayName = "SidebarInset";
-var SidebarInput = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx128(
+var SidebarInput = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx133(
     Input,
     {
       ref,
@@ -37895,8 +38492,8 @@ var SidebarInput = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarInput.displayName = "SidebarInput";
-var SidebarHeader = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx128(
+var SidebarHeader = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       ref,
@@ -37907,8 +38504,8 @@ var SidebarHeader = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarHeader.displayName = "SidebarHeader";
-var SidebarFooter = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx128(
+var SidebarFooter = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       ref,
@@ -37919,8 +38516,8 @@ var SidebarFooter = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarFooter.displayName = "SidebarFooter";
-var SidebarSeparator = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx128(
+var SidebarSeparator = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx133(
     Separator2,
     {
       ref,
@@ -37931,8 +38528,8 @@ var SidebarSeparator = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarSeparator.displayName = "SidebarSeparator";
-var SidebarContent = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx128(
+var SidebarContent = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       ref,
@@ -37946,8 +38543,8 @@ var SidebarContent = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarContent.displayName = "SidebarContent";
-var SidebarGroup = React96.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx128(
+var SidebarGroup = React99.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ jsx133(
     "div",
     {
       ref,
@@ -37958,9 +38555,9 @@ var SidebarGroup = React96.forwardRef(({ className, ...props }, ref) => {
   );
 });
 SidebarGroup.displayName = "SidebarGroup";
-var SidebarGroupLabel = React96.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupLabel = React99.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot6 : "div";
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     Comp,
     {
       ref,
@@ -37975,9 +38572,9 @@ var SidebarGroupLabel = React96.forwardRef(({ className, asChild = false, ...pro
   );
 });
 SidebarGroupLabel.displayName = "SidebarGroupLabel";
-var SidebarGroupAction = React96.forwardRef(({ className, asChild = false, ...props }, ref) => {
+var SidebarGroupAction = React99.forwardRef(({ className, asChild = false, ...props }, ref) => {
   const Comp = asChild ? Slot6 : "button";
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     Comp,
     {
       ref,
@@ -37994,7 +38591,7 @@ var SidebarGroupAction = React96.forwardRef(({ className, asChild = false, ...pr
   );
 });
 SidebarGroupAction.displayName = "SidebarGroupAction";
-var SidebarGroupContent = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx128(
+var SidebarGroupContent = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
   "div",
   {
     ref,
@@ -38004,7 +38601,7 @@ var SidebarGroupContent = React96.forwardRef(({ className, ...props }, ref) => /
   }
 ));
 SidebarGroupContent.displayName = "SidebarGroupContent";
-var SidebarMenu = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx128(
+var SidebarMenu = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
   "ul",
   {
     ref,
@@ -38014,7 +38611,7 @@ var SidebarMenu = React96.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SidebarMenu.displayName = "SidebarMenu";
-var SidebarMenuItem = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx128(
+var SidebarMenuItem = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
   "li",
   {
     ref,
@@ -38044,7 +38641,7 @@ var sidebarMenuButtonVariants = cva13(
     }
   }
 );
-var SidebarMenuButton = React96.forwardRef(
+var SidebarMenuButton = React99.forwardRef(
   ({
     asChild = false,
     isActive = false,
@@ -38056,7 +38653,7 @@ var SidebarMenuButton = React96.forwardRef(
   }, ref) => {
     const Comp = asChild ? Slot6 : "button";
     const { isMobile, state } = useSidebar();
-    const button = /* @__PURE__ */ jsx128(
+    const button = /* @__PURE__ */ jsx133(
       Comp,
       {
         ref,
@@ -38075,9 +38672,9 @@ var SidebarMenuButton = React96.forwardRef(
         children: tooltip
       };
     }
-    return /* @__PURE__ */ jsxs82(Tooltip, { children: [
-      /* @__PURE__ */ jsx128(TooltipTrigger, { asChild: true, children: button }),
-      /* @__PURE__ */ jsx128(
+    return /* @__PURE__ */ jsxs87(Tooltip, { children: [
+      /* @__PURE__ */ jsx133(TooltipTrigger, { asChild: true, children: button }),
+      /* @__PURE__ */ jsx133(
         TooltipContent,
         {
           side: "right",
@@ -38090,9 +38687,9 @@ var SidebarMenuButton = React96.forwardRef(
   }
 );
 SidebarMenuButton.displayName = "SidebarMenuButton";
-var SidebarMenuAction = React96.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
+var SidebarMenuAction = React99.forwardRef(({ className, asChild = false, showOnHover = false, ...props }, ref) => {
   const Comp = asChild ? Slot6 : "button";
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     Comp,
     {
       ref,
@@ -38113,7 +38710,7 @@ var SidebarMenuAction = React96.forwardRef(({ className, asChild = false, showOn
   );
 });
 SidebarMenuAction.displayName = "SidebarMenuAction";
-var SidebarMenuBadge = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx128(
+var SidebarMenuBadge = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
   "div",
   {
     ref,
@@ -38131,11 +38728,11 @@ var SidebarMenuBadge = React96.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SidebarMenuBadge.displayName = "SidebarMenuBadge";
-var SidebarMenuSkeleton = React96.forwardRef(({ className, showIcon = false, ...props }, ref) => {
-  const width = React96.useMemo(() => {
+var SidebarMenuSkeleton = React99.forwardRef(({ className, showIcon = false, ...props }, ref) => {
+  const width = React99.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
-  return /* @__PURE__ */ jsxs82(
+  return /* @__PURE__ */ jsxs87(
     "div",
     {
       ref,
@@ -38143,14 +38740,14 @@ var SidebarMenuSkeleton = React96.forwardRef(({ className, showIcon = false, ...
       className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
       ...props,
       children: [
-        showIcon && /* @__PURE__ */ jsx128(
+        showIcon && /* @__PURE__ */ jsx133(
           Skeleton,
           {
             className: "size-4 rounded-md",
             "data-sidebar": "menu-skeleton-icon"
           }
         ),
-        /* @__PURE__ */ jsx128(
+        /* @__PURE__ */ jsx133(
           Skeleton,
           {
             className: "h-4 max-w-[--skeleton-width] flex-1",
@@ -38165,7 +38762,7 @@ var SidebarMenuSkeleton = React96.forwardRef(({ className, showIcon = false, ...
   );
 });
 SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
-var SidebarMenuSub = React96.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx128(
+var SidebarMenuSub = React99.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx133(
   "ul",
   {
     ref,
@@ -38179,11 +38776,11 @@ var SidebarMenuSub = React96.forwardRef(({ className, ...props }, ref) => /* @__
   }
 ));
 SidebarMenuSub.displayName = "SidebarMenuSub";
-var SidebarMenuSubItem = React96.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx128("li", { ref, ...props }));
+var SidebarMenuSubItem = React99.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx133("li", { ref, ...props }));
 SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
-var SidebarMenuSubButton = React96.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
+var SidebarMenuSubButton = React99.forwardRef(({ asChild = false, size = "md", isActive, className, ...props }, ref) => {
   const Comp = asChild ? Slot6 : "a";
-  return /* @__PURE__ */ jsx128(
+  return /* @__PURE__ */ jsx133(
     Comp,
     {
       ref,
@@ -38207,20 +38804,20 @@ SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
 // src/components/ui/sonner.tsx
 import { useTheme } from "next-themes";
 import { Toaster as Sonner } from "sonner";
-import { jsx as jsx129 } from "react/jsx-runtime";
+import { jsx as jsx134 } from "react/jsx-runtime";
 var Toaster = ({ ...props }) => {
   const { theme = "system" } = useTheme();
-  return /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsx134(
     Sonner,
     {
       theme,
       className: "toaster group",
       icons: {
-        success: /* @__PURE__ */ jsx129(CircleCheck, { className: "h-4 w-4" }),
-        info: /* @__PURE__ */ jsx129(Info, { className: "h-4 w-4" }),
-        warning: /* @__PURE__ */ jsx129(TriangleAlert, { className: "h-4 w-4" }),
-        error: /* @__PURE__ */ jsx129(OctagonX, { className: "h-4 w-4" }),
-        loading: /* @__PURE__ */ jsx129(LoaderCircle, { className: "h-4 w-4 animate-spin" })
+        success: /* @__PURE__ */ jsx134(CircleCheck, { className: "h-4 w-4" }),
+        info: /* @__PURE__ */ jsx134(Info, { className: "h-4 w-4" }),
+        warning: /* @__PURE__ */ jsx134(TriangleAlert, { className: "h-4 w-4" }),
+        error: /* @__PURE__ */ jsx134(OctagonX, { className: "h-4 w-4" }),
+        loading: /* @__PURE__ */ jsx134(LoaderCircle, { className: "h-4 w-4 animate-spin" })
       },
       toastOptions: {
         classNames: {
@@ -38236,26 +38833,26 @@ var Toaster = ({ ...props }) => {
 };
 
 // src/components/ui/toggle-group.tsx
-import * as React97 from "react";
+import * as React100 from "react";
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
-import { jsx as jsx130 } from "react/jsx-runtime";
-var ToggleGroupContext = React97.createContext({
+import { jsx as jsx135 } from "react/jsx-runtime";
+var ToggleGroupContext = React100.createContext({
   size: "default",
   variant: "default"
 });
-var ToggleGroup = React97.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx130(
+var ToggleGroup = React100.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx135(
   ToggleGroupPrimitive.Root,
   {
     ref,
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ jsx130(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ jsx135(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React97.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React97.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ jsx130(
+var ToggleGroupItem = React100.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React100.useContext(ToggleGroupContext);
+  return /* @__PURE__ */ jsx135(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -38274,7 +38871,7 @@ var ToggleGroupItem = React97.forwardRef(({ className, children, variant, size,
 ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 
 // src/render/PXEngineRenderer.tsx
-import { jsx as jsx131, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx136, jsxs as jsxs88 } from "react/jsx-runtime";
 var CONTEXT_DEPENDENT_COMPONENTS = /* @__PURE__ */ new Set([
   // Form components - require FormField + FormItem context
   "FormLabel",
@@ -38366,24 +38963,24 @@ var COMPONENT_SUGGESTIONS = {
 };
 var renderContextDependentError = (componentName, normalizedName, key) => {
   const suggestion = COMPONENT_SUGGESTIONS[normalizedName] || `${componentName}Atom (if available)`;
-  return /* @__PURE__ */ jsxs83(
+  return /* @__PURE__ */ jsxs88(
     "div",
     {
       className: "p-4 border-2 border-amber-500/50 rounded-lg bg-amber-50/80 space-y-2 my-2",
       children: [
-        /* @__PURE__ */ jsxs83("div", { className: "flex items-start gap-2", children: [
-          /* @__PURE__ */ jsx131("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
-          /* @__PURE__ */ jsxs83("div", { className: "flex-1", children: [
-            /* @__PURE__ */ jsxs83("p", { className: "text-sm font-semibold text-amber-900", children: [
+        /* @__PURE__ */ jsxs88("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsx136("span", { className: "text-amber-600 font-bold text-lg", children: "\u26A0\uFE0F" }),
+          /* @__PURE__ */ jsxs88("div", { className: "flex-1", children: [
+            /* @__PURE__ */ jsxs88("p", { className: "text-sm font-semibold text-amber-900", children: [
               "Invalid Component: ",
               componentName
             ] }),
-            /* @__PURE__ */ jsx131("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
+            /* @__PURE__ */ jsx136("p", { className: "text-xs text-amber-700 mt-1", children: "This component requires React Context and cannot be rendered directly in schemas." })
           ] })
         ] }),
-        /* @__PURE__ */ jsxs83("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
-          /* @__PURE__ */ jsx131("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
-          /* @__PURE__ */ jsx131("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
+        /* @__PURE__ */ jsxs88("div", { className: "bg-white/60 p-3 rounded border border-amber-200", children: [
+          /* @__PURE__ */ jsx136("p", { className: "text-xs font-semibold text-gray-700 mb-1.5", children: "\u2713 Use instead:" }),
+          /* @__PURE__ */ jsx136("code", { className: "text-xs text-blue-700 bg-blue-50 px-2 py-1 rounded", children: suggestion })
         ] })
       ]
     },
@@ -38463,7 +39060,7 @@ var PXEngineRenderer = ({
     if (typeof component === "string" || typeof component === "number") {
       return component;
     }
-    if (React98.isValidElement(component)) {
+    if (React101.isValidElement(component)) {
       return component;
     }
     if (!component || typeof component !== "object") return null;
@@ -38541,7 +39138,7 @@ var PXEngineRenderer = ({
     const isAtomWithRenderProp = ATOMS_WITH_RENDER.has(atomName);
     const finalStyle = { ...dynamicStyle, ...finalProps.style || {} };
     if (isAtomWithRenderProp) {
-      return /* @__PURE__ */ jsx131(
+      return /* @__PURE__ */ jsx136(
         TargetComponent,
         {
           ...finalProps,
@@ -38553,7 +39150,7 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ jsx131(
+      return /* @__PURE__ */ jsx136(
         TargetComponent,
         {
           ...finalProps,
@@ -38565,7 +39162,7 @@ var PXEngineRenderer = ({
       );
     }
   };
-  return /* @__PURE__ */ jsx131("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
+  return /* @__PURE__ */ jsx136("div", { className: "px-engine-root relative w-full h-full", children: renderRecursive(root) });
 };
 export {
   Accordion,
@@ -38574,6 +39171,8 @@ export {
   AccordionItem,
   AccordionTrigger,
   ActionButton,
+  AgentCard,
+  AgentDataTable,
   Alert,
   AlertAtom,
   AlertDescription,
@@ -38718,6 +39317,7 @@ export {
   InputOTPGroup,
   InputOTPSeparator,
   InputOTPSlot,
+  InstructionPreview,
   KbdAtom,
   KeywordBundlesDisplay,
   KeywordBundlesEdit,
@@ -38822,6 +39422,7 @@ export {
   TextareaAtom,
   TimelineAtom,
   ToggleAtom,
+  ToolListCard,
   Tooltip,
   TooltipAtom,
   TooltipContent,
@@ -38829,6 +39430,7 @@ export {
   TooltipTrigger,
   TopPostsGrid,
   VideoAtom,
+  WorkflowVisualizer,
   cn
 };
 /*! Bundled license information: