@mastra/playground-ui 4.0.0-alpha.5 → 4.0.0-alpha.7

package/dist/index.es.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { MessagePrimitive, ActionBarPrimitive, BranchPickerPrimitive, ThreadPrimitive, ComposerPrimitive, useExternalStoreRuntime, AssistantRuntimeProvider } from '@assistant-ui/react';
-import { CheckIcon, CopyIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Check, LoaderCircle, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, Plus, CalendarIcon, Loader2 } from 'lucide-react';
+import { CheckIcon, CopyIcon, ChevronUpIcon, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ArrowUp, Copy, Search, RefreshCcwIcon, ChevronRight, SortAsc, SortDesc, Braces, Clock1, ChevronDown, XIcon, Check, LoaderCircle, ExternalLinkIcon, X, Footprints, CircleCheck, CircleX, Workflow, AlertCircleIcon, AlertCircle, CalendarIcon, PlusIcon, TrashIcon, Plus, Loader2 } from 'lucide-react';
 import * as React from 'react';
 import React__default, { forwardRef, memo, useState, useRef, useEffect, createContext, useContext, useMemo, useCallback, Suspense, Fragment as Fragment$1 } from 'react';
 import { Slot } from '@radix-ui/react-slot';
@@ -32,18 +32,16 @@ import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import jsonSchemaToZod from 'json-schema-to-zod';
 import { parse } from 'superjson';
-import * as z from 'zod';
-import { z as z$1, ZodNumber, ZodBoolean, ZodDate, ZodLiteral, ZodEnum, ZodArray, ZodUnion } from 'zod';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { useFieldArray, Controller, useWatch, useForm } from 'react-hook-form';
-import * as SwitchPrimitives from '@radix-ui/react-switch';
-import { Command as Command$1 } from 'cmdk';
-import * as PopoverPrimitive from '@radix-ui/react-popover';
+import z$1, { z } from 'zod';
+import { AutoForm as AutoForm$1, buildZodFieldConfig } from '@autoform/react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import { useDebouncedCallback } from 'use-debounce';
 import { DayPicker } from 'react-day-picker';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
 import * as SelectPrimitive from '@radix-ui/react-select';
-import * as LabelPrimitive from '@radix-ui/react-label';
 import { v4 } from '@lukeed/uuid';
+import { ZodProvider, getFieldConfigInZodStack, getDefaultValueInZodStack } from '@autoform/zod';
 import { CodeBlock as CodeBlock$1 } from 'react-code-block';
 
 import './index.css';function r(e){var t,f,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=" "),n+=f);}else for(f in e)e[f]&&(n&&(n+=" "),n+=f);return n}function clsx(){for(var e,t,f=0,n="",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=" "),n+=t);return n}
@@ -2811,7 +2809,7 @@ const buttonVariants = cva(
       variant: {
         default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline"
@@ -5854,18 +5852,6 @@ const useExecuteWorkflow = (baseUrl) => {
   const client = new MastraClient({
     baseUrl: baseUrl || ""
   });
-  const executeWorkflow = async ({ workflowId, input }) => {
-    try {
-      setIsExecutingWorkflow(true);
-      const response = await client.getWorkflow(workflowId).execute(input || {});
-      return response;
-    } catch (error) {
-      console.error("Error executing workflow:", error);
-      throw error;
-    } finally {
-      setIsExecutingWorkflow(false);
-    }
-  };
   const createWorkflowRun = async ({ workflowId, prevRunId }) => {
     try {
       const workflow = client.getWorkflow(workflowId);
@@ -5885,7 +5871,7 @@ const useExecuteWorkflow = (baseUrl) => {
       throw error;
     }
   };
-  return { executeWorkflow, startWorkflowRun, createWorkflowRun, isExecutingWorkflow };
+  return { startWorkflowRun, createWorkflowRun, isExecutingWorkflow };
 };
 const useWatchWorkflow = (baseUrl) => {
   const [isWatchingWorkflow, setIsWatchingWorkflow] = useState(false);
@@ -5897,7 +5883,7 @@ const useWatchWorkflow = (baseUrl) => {
         baseUrl
       });
       const workflow = client.getWorkflow(workflowId);
-      workflow.watch({ runId }, (record) => {
+      await workflow.watch({ runId }, (record) => {
         setWatchResult(record);
       });
     } catch (error) {
@@ -6703,9 +6689,6 @@ const lodashTitleCase = (str) => {
   const camelCased = str.replace(/[-_\s]+(.)?/g, (_, char) => char ? char.toUpperCase() : "").replace(/^(.)/, (char) => char.toLowerCase());
   return camelCased.replace(/([A-Z])/g, " $1").replace(/^./, (str2) => str2.toUpperCase()).trim();
 };
-const toTitleCase = (str, splitChar = " ") => {
-  return str.split(splitChar).map((word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join(" ");
-};
 
 function WorkflowGraph({ workflowId, baseUrl }) {
   const { workflow, isLoading } = useWorkflow(workflowId, baseUrl);
@@ -6770,249 +6753,130 @@ const WorkflowsTable = ({
   );
 };
 
-const transformToNestObject = (error) => {
-  const fieldErrors = {};
-  error.errors.forEach((err) => {
-    if (err.path.length > 0) {
-      const path = err.path.join(".");
-      fieldErrors[path] = {
-        type: "validation",
-        message: err.message
-      };
-    }
-  });
-  return fieldErrors;
-};
-function resolveSerializedZodOutput(obj) {
-  return Function("z", `"use strict";return (${obj});`)(z$1);
-}
+const Form = React__default.forwardRef(({ children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("form", { ref, className: "space-y-4", ...props, children });
+});
 
-const customZodUnionResolver = (schemaUnion, discriminator) => {
-  return async (values) => {
-    const schema = schemaUnion?._def?.options?.find(
-      (option) => option?.shape?.[discriminator]?._def?.value === values[discriminator]
-    ) || z$1.object({ [discriminator]: z$1.string() });
-    const filteredValues = Object.fromEntries(Object.entries(values).filter(([key]) => schema?.shape?.[key]));
-    const result = schema.safeParse(filteredValues);
-    if (result.success) {
-      return { values: result.data, errors: {} };
-    } else {
-      const errors = transformToNestObject(result.error);
-      return { values: {}, errors };
-    }
-  };
-};
+const labelVariants = cva("text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
+const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
+Label.displayName = LabelPrimitive.Root.displayName;
 
-function ArrayField({ name, control, renderField, isStringField }) {
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name
-  });
-  return /* @__PURE__ */ jsxs("div", { className: "space-y-2 w-full", children: [
-    fields.map((field, index) => /* @__PURE__ */ jsxs("div", { className: "relative w-full flex items-center gap-2", children: [
-      renderField({ fieldName: `${name}.${index}`, index }),
-      /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          className: "absolute -right-2 -top-2",
-          onClick: () => remove(index),
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
-        }
-      )
-    ] }, field.id)),
-    /* @__PURE__ */ jsxs(
-      Button,
-      {
-        type: "button",
-        variant: "outline",
-        size: "sm",
-        className: "w-full",
-        onClick: () => append(isStringField ? { root: "" } : {}),
-        children: [
-          /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
-          "Add Item"
-        ]
-      }
-    )
+const DISABLED_LABELS = ["boolean", "object", "array"];
+const FieldWrapper = ({ label, children, id, field, error }) => {
+  const isDisabled = DISABLED_LABELS.includes(field.type);
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+    !isDisabled && /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
+      label,
+      field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+    ] }),
+    children,
+    field.fieldConfig?.description && /* @__PURE__ */ jsx("p", { className: "text-sm text-muted-foreground", children: field.fieldConfig.description }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-sm text-destructive", children: error })
   ] });
-}
+};
 
-const Switch = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  SwitchPrimitives.Root,
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
-    className: cn(
-      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-mastra-bg-7 data-[state=unchecked]:bg-input",
-      className
-    ),
-    ...props,
-    ref,
-    children: /* @__PURE__ */ jsx(
-      SwitchPrimitives.Thumb,
-      {
-        className: cn(
-          "pointer-events-none block h-4 w-4 rounded-full bg-white shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
-        )
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive: "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive"
       }
-    )
+    },
+    defaultVariants: {
+      variant: "default"
+    }
   }
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
+);
+const Alert = React.forwardRef(({ className, variant, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, role: "alert", className: cn(alertVariants({ variant }), className), ...props }));
+Alert.displayName = "Alert";
+const AlertTitle = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("h5", { ref, className: cn("mb-1 font-medium leading-none tracking-tight", className), ...props })
+);
+AlertTitle.displayName = "AlertTitle";
+const AlertDescription = React.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("text-sm [&_p]:leading-relaxed", className), ...props })
+);
+AlertDescription.displayName = "AlertDescription";
 
-function BooleanField({ name, control, handleFieldChange }) {
+const ErrorMessage = ({ error }) => /* @__PURE__ */ jsxs(Alert, { variant: "destructive", children: [
+  /* @__PURE__ */ jsx(AlertCircle, { className: "h-4 w-4" }),
+  /* @__PURE__ */ jsx(AlertTitle, { children: error })
+] });
+
+const SubmitButton = ({ children }) => /* @__PURE__ */ jsx(Button, { type: "submit", children });
+
+const StringField = ({ inputProps, error, id }) => {
+  const { key, ...props } = inputProps;
+  return /* @__PURE__ */ jsx(Input, { id, className: error ? "border-destructive" : "", ...props });
+};
+
+const NumberField = ({ inputProps, error, id }) => {
+  const { key, ...props } = inputProps;
   return /* @__PURE__ */ jsx(
-    Controller,
+    Input,
     {
-      name,
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsx(
-        Switch,
-        {
-          checked: field.value,
-          onCheckedChange: (checked) => {
-            field.onChange(checked);
-            handleFieldChange?.({ key: name, value: checked });
-          }
+      id,
+      type: "number",
+      className: error ? "border-destructive" : "",
+      ...props,
+      onChange: (e) => {
+        const value = e.target.value;
+        if (value !== "" && !isNaN(Number(value))) {
+          props.onChange({
+            target: { value, name: inputProps.name }
+          });
         }
-      )
+      },
+      onBlur: (e) => {
+        const value = e.target.value;
+        if (value !== "" && !isNaN(Number(value))) {
+          props.onChange({
+            target: { value: Number(value), name: inputProps.name }
+          });
+        }
+      }
     }
   );
-}
+};
 
-const Command = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1,
-  {
-    ref,
-    className: cn(
-      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
-      className
-    ),
-    ...props
-  }
-));
-Command.displayName = Command$1.displayName;
-const CommandInput = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
-  /* @__PURE__ */ jsx(Search, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
-  /* @__PURE__ */ jsx(
-    Command$1.Input,
-    {
-      ref,
-      className: cn(
-        "flex h-11 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ...props
-    }
-  )
-] }));
-CommandInput.displayName = Command$1.Input.displayName;
-const CommandList = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1.List,
-  {
-    ref,
-    className: cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className),
-    ...props
-  }
-));
-CommandList.displayName = Command$1.List.displayName;
-const CommandEmpty = React.forwardRef((props, ref) => /* @__PURE__ */ jsx(Command$1.Empty, { ref, className: "py-6 text-center text-sm", ...props }));
-CommandEmpty.displayName = Command$1.Empty.displayName;
-const CommandGroup = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1.Group,
+const Checkbox = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  CheckboxPrimitive.Root,
   {
     ref,
     className: cn(
-      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
       className
     ),
-    ...props
-  }
-));
-CommandGroup.displayName = Command$1.Group.displayName;
-const CommandSeparator = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Command$1.Separator, { ref, className: cn("-mx-1 h-px bg-border", className), ...props }));
-CommandSeparator.displayName = Command$1.Separator.displayName;
-const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Command$1.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none aria-selected:bg-accent aria-selected:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
-    ),
-    ...props
+    ...props,
+    children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsx(Check, { className: "h-4 w-4" }) })
   }
 ));
-CommandItem.displayName = Command$1.Item.displayName;
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-const Popover = PopoverPrimitive.Root;
-const PopoverTrigger = PopoverPrimitive.Trigger;
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  PopoverPrimitive.Content,
-  {
-    ref,
-    align,
-    sideOffset,
-    className: cn(
-      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
-    ),
-    ...props
-  }
-) }));
-PopoverContent.displayName = PopoverPrimitive.Content.displayName;
-
-function CreatableField({ name, control, options = [], handleFieldChange, placeholder }) {
-  const [openPopover, setOpenPopover] = React.useState(false);
-  const [inputValue, setInputValue] = React.useState("");
-  return /* @__PURE__ */ jsx(
-    Controller,
+const BooleanField = ({ field, label, id, inputProps }) => /* @__PURE__ */ jsxs("div", { className: "flex items-center space-x-2", children: [
+  /* @__PURE__ */ jsx(
+    Checkbox,
     {
-      name,
-      control,
-      render: ({ field }) => {
-        const selectedValues = field.value || [];
-        const removeValue = (valueToRemove) => {
-          const newValues = selectedValues.filter((v) => v !== valueToRemove);
-          field.onChange(newValues);
-          handleFieldChange?.({ key: name, value: newValues });
-        };
-        const addValue = (value) => {
-          if (!value) return;
-          const newValues = [...selectedValues, value];
-          field.onChange(newValues);
-          handleFieldChange?.({ key: name, value: newValues });
-          setInputValue("");
-          setOpenPopover(false);
+      id,
+      onCheckedChange: (checked) => {
+        const event = {
+          target: {
+            name: field.key,
+            value: checked
+          }
         };
-        return /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
-          /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: selectedValues.map((value) => /* @__PURE__ */ jsxs(Badge, { className: "flex items-center gap-1", children: [
-            value,
-            /* @__PURE__ */ jsx(Button, { variant: "ghost", size: "icon", className: "h-4 w-4 p-0", onClick: () => removeValue(value), children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
-          ] }, value)) }),
-          /* @__PURE__ */ jsxs(Popover, { open: openPopover, onOpenChange: setOpenPopover, children: [
-            /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(Button, { variant: "outline", size: "sm", className: "w-full justify-start", children: [
-              /* @__PURE__ */ jsx(Plus, { className: "mr-2 h-4 w-4" }),
-              placeholder || "Add item"
-            ] }) }),
-            /* @__PURE__ */ jsx(PopoverContent, { className: "p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
-              /* @__PURE__ */ jsx(CommandInput, { placeholder: "Enter value...", value: inputValue, onValueChange: setInputValue }),
-              /* @__PURE__ */ jsx(CommandList, { children: /* @__PURE__ */ jsxs(CommandGroup, { children: [
-                options.filter((opt) => !selectedValues.includes(opt.value)).map((option) => /* @__PURE__ */ jsx(CommandItem, { onSelect: () => addValue(option.value), children: option.label }, option.value)),
-                inputValue && /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => addValue(inputValue), children: [
-                  'Create "',
-                  inputValue,
-                  '"'
-                ] })
-              ] }) })
-            ] }) })
-          ] })
-        ] });
-      }
+        inputProps.onChange(event);
+      },
+      checked: inputProps.value
     }
-  );
-}
+  ),
+  /* @__PURE__ */ jsxs(Label, { htmlFor: id, children: [
+    label,
+    field.required && /* @__PURE__ */ jsx("span", { className: "text-destructive", children: " *" })
+  ] })
+] });
 
 function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
   return /* @__PURE__ */ jsx(
@@ -7023,50 +6887,47 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
       classNames: {
         months: "flex flex-col space-y-4 sm:space-y-0",
         month: "space-y-4",
-        month_caption: "flex justify-center pt-1 relative items-center",
+        // month_caption: 'flex justify-center pt-1 relative items-center',
         caption_label: "text-sm text-text font-medium",
         nav: "space-x-1 flex items-center",
-        button_previous: cn(
+        nav_button_previous: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
           "absolute left-4 top-[56px] z-10"
         ),
-        button_next: cn(
+        nav_button_next: cn(
           buttonVariants({ variant: "outline" }),
           "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100",
           "absolute right-4 top-[56px] z-10"
         ),
-        month_grid: "w-full border-collapse space-y-1",
-        weekdays: "flex",
-        weekday: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]",
-        week: "flex w-full mt-2",
+        dropdown_month: "w-full border-collapse space-y-1",
+        weeknumber: "flex",
         day: cn(
           buttonVariants({ variant: "ghost" }),
           "relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md",
           props.mode === "range" ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md" : "[&:has([aria-selected])]:rounded-md",
           "h-8 w-8 p-0 hover:bg-lightGray-7/50 font-normal aria-selected:opacity-100"
         ),
-        range_start: "day-range-start",
-        range_end: "day-range-end",
-        selected: "!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
-        today: "bg-lightGray-7/50 text-accent-foreground",
-        outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
-        disabled: "text-muted-foreground opacity-50",
-        range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
-        hidden: "invisible",
+        day_range_start: "day-range-start",
+        day_range_end: "day-range-end",
+        day_selected: "!bg-primary !text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground",
+        day_today: "bg-lightGray-7/50 text-accent-foreground",
+        day_outside: "day-outside text-muted-foreground opacity-50  aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30",
+        day_disabled: "text-muted-foreground opacity-50",
+        day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground",
+        day_hidden: "invisible",
         ...classNames
       },
       components: {
-        Chevron: ({ orientation }) => /* @__PURE__ */ jsx(
-          CalendarIcon,
-          {
-            className: cn("h-4 w-4", {
-              "rotate-180": orientation === "up",
-              "rotate-90": orientation === "left",
-              "-rotate-90": orientation === "right"
-            })
-          }
-        )
+        // IconDropdown: ({  }) => (
+        //   <CalendarIcon
+        //     className={cn('h-4 w-4', {
+        //       'rotate-180': orientation === 'up',
+        //       'rotate-90': orientation === 'left',
+        //       '-rotate-90': orientation === 'right',
+        //     })}
+        //   />
+        // ),
       },
       ...props
     }
@@ -7074,6 +6935,23 @@ function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
 }
 Calendar.displayName = "Calendar";
 
+const Popover = PopoverPrimitive.Root;
+const PopoverTrigger = PopoverPrimitive.Trigger;
+const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      className
+    ),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
 const DatePicker = ({
   value,
   setValue,
@@ -7228,26 +7106,28 @@ const DefaultButton = React.forwardRef(
 );
 DefaultButton.displayName = "DefaultButton";
 
-function DateField({ name, control, handleFieldChange }) {
+const DateField = ({ inputProps, error, id }) => {
+  const { key, ...props } = inputProps;
+  const [value, setValue] = useState(null);
   return /* @__PURE__ */ jsx(
-    Controller,
+    DatePicker,
     {
-      name,
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsx(
-        DatePicker,
-        {
-          value: field.value,
-          setValue: (date) => {
-            const newDate = date ? new Date(date).toISOString() : date;
-            field.onChange(newDate);
-            handleFieldChange?.({ key: name, value: newDate });
-          }
+      id,
+      className: error ? "border-destructive" : "",
+      value,
+      setValue: (date) => {
+        const newDate = date ? new Date(date).toISOString() : date;
+        if (newDate) {
+          props.onChange({
+            target: { value: newDate?.toString(), name: inputProps.name }
+          });
+          setValue(new Date(newDate));
         }
-      )
+      },
+      clearable: true
     }
   );
-}
+};
 
 const Select = SelectPrimitive.Root;
 const SelectValue = SelectPrimitive.Value;
@@ -7308,346 +7188,69 @@ const SelectItem = React.forwardRef(({ className, children, ...props }, ref) =>
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
 
-function EnumField({ name, control, options, handleFieldChange }) {
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsxs(
-        Select,
-        {
-          value: field.value,
-          onValueChange: (value) => {
-            field.onChange(value);
-            handleFieldChange?.({ key: name, value });
-          },
-          children: [
-            /* @__PURE__ */ jsx(SelectTrigger, { children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select an option" }) }),
-            /* @__PURE__ */ jsx(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx(SelectItem, { value: option.value, className: "text-white", children: option.label }, option.value)) })
-          ]
-        }
-      )
-    }
-  );
-}
-
-const Textarea = React.forwardRef(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx(
-    "textarea",
-    {
-      className: cn(
-        "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        className
-      ),
-      ref,
-      ...props
-    }
-  );
-});
-Textarea.displayName = "Textarea";
-
-function StringField({ name, control, handleFieldChange, isMultiline, placeholder }) {
-  const Component = isMultiline ? Textarea : Input;
-  return /* @__PURE__ */ jsx(
-    Controller,
+const SelectField = ({ field, inputProps, error, id }) => {
+  const { key, ...props } = inputProps;
+  return /* @__PURE__ */ jsxs(
+    Select,
     {
-      name,
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsx(
-        Component,
-        {
-          ...field,
-          className: "w-full",
-          placeholder,
-          onChange: (e) => {
-            field.onChange(e);
-            handleFieldChange?.({ key: name, value: e.target.value });
+      ...props,
+      onValueChange: (value) => {
+        const syntheticEvent = {
+          target: {
+            value,
+            name: field.key
           }
-        }
-      )
+        };
+        props.onChange(syntheticEvent);
+      },
+      defaultValue: field.default,
+      children: [
+        /* @__PURE__ */ jsx(SelectTrigger, { id, className: error ? "border-destructive" : "", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: "Select an option" }) }),
+        /* @__PURE__ */ jsx(SelectContent, { children: (field.options || []).map(([key2, label]) => /* @__PURE__ */ jsx(SelectItem, { value: key2, children: label }, key2)) })
+      ]
     }
   );
-}
-
-const labelVariants = cva("text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70");
-const Label = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(LabelPrimitive.Root, { ref, className: cn(labelVariants(), className), ...props }));
-Label.displayName = LabelPrimitive.Root.displayName;
+};
 
-const getPath = (object, path) => {
-  if (typeof path === "string") {
-    path = path?.split(".");
-  }
-  return path?.reduce((obj, key) => obj && obj[key] !== void 0 ? obj[key] : void 0, object);
+const ObjectWrapper = ({ label, children }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4 border p-2 rounded-md", children: [
+    label === "​" ? /* @__PURE__ */ jsx(Fragment, {}) : /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: label }),
+    children
+  ] });
 };
-const flattenObject = (object, endKeys = [], flattenArrayValue) => {
-  let newObj = {};
-  function recurseDip(obj, path) {
-    for (const [key, value] of Object.entries(obj)) {
-      let newPath = [...path, key];
-      if (value && value.constructor === Object) {
-        const hasOnlyEndKeys = endKeys?.length ? endKeys.every((v) => Object.keys(value).includes(v)) : false;
-        if (hasOnlyEndKeys) {
-          newObj = { ...newObj, [newPath.join(".")]: value };
-        } else {
-          recurseDip(value, newPath);
-        }
-      } else if (Array.isArray(value)) {
-        const contructValue = value.reduce((a, b) => ({ ...a, [value.indexOf(b)]: b }), {});
-        recurseDip(contructValue, newPath);
-      } else {
-        newObj = { ...newObj, [newPath.join(".")]: value };
+
+const ArrayWrapper = ({ label, children, onAddItem }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx("h3", { className: "text-sm font-medium", children: label }),
+    children,
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        className: "w-full flex items-center justify-center",
+        onClick: onAddItem,
+        variant: "outline",
+        size: "sm",
+        type: "button",
+        children: /* @__PURE__ */ jsx(PlusIcon, { className: "h-4 w-4" })
       }
-    }
-  }
-  recurseDip(object, []);
-  return newObj;
+    )
+  ] });
 };
 
-var FormConfigType = /* @__PURE__ */ ((FormConfigType2) => {
-  FormConfigType2["STRING"] = "STRING";
-  FormConfigType2["NUMBER"] = "NUMBER";
-  FormConfigType2["DATE"] = "DATE";
-  FormConfigType2["ENUM"] = "ENUM";
-  FormConfigType2["ARRAY"] = "ARRAY";
-  FormConfigType2["BOOLEAN"] = "BOOLEAN";
-  FormConfigType2["RECORD"] = "RECORD";
-  FormConfigType2["OBJECT"] = "OBJECT";
-  FormConfigType2["UNION"] = "UNION";
-  FormConfigType2["CREATABLE"] = "CREATABLE";
-  FormConfigType2["SELECT"] = "SELECT";
-  FormConfigType2["MULTI_SELECT"] = "MULTI_SELECT";
-  return FormConfigType2;
-})(FormConfigType || {});
-function getFormConfigTypesFromSchemaDef({
-  schema,
-  isOptional = false
-}) {
-  if (schema instanceof z$1.ZodObject) {
-    return { type: "OBJECT" /* OBJECT */, isOptional };
-  }
-  if (schema instanceof z$1.ZodString) {
-    if (schema instanceof z$1.ZodString && schema._def.checks.some((check) => check.kind === "datetime")) {
-      return { type: "DATE" /* DATE */, isOptional };
-    }
-    return { type: "STRING" /* STRING */, isOptional };
-  } else if (schema instanceof ZodNumber) {
-    return { type: "NUMBER" /* NUMBER */, isOptional };
-  } else if (schema instanceof ZodBoolean) {
-    return { type: "BOOLEAN" /* BOOLEAN */, isOptional };
-  } else if (schema instanceof ZodDate) {
-    return { type: "DATE" /* DATE */, isOptional };
-  } else if (schema instanceof ZodLiteral) {
-    return {
-      type: "ENUM" /* ENUM */,
-      isOptional,
-      options: [{ label: schema.value, value: schema.value }]
-    };
-  } else if (schema instanceof ZodEnum) {
-    return {
-      type: "ENUM" /* ENUM */,
-      isOptional,
-      options: schema.options.map((v) => ({ label: v, value: v }))
-    };
-  } else if (schema instanceof ZodArray) {
-    return {
-      type: "ARRAY" /* ARRAY */,
-      isOptional,
-      options: schema.element instanceof ZodEnum ? schema.element.options.map((v) => ({ label: v, value: v })) : []
-    };
-  } else if (schema instanceof z$1.ZodOptional || schema instanceof z$1.ZodDefault) {
-    return getFormConfigTypesFromSchemaDef({ schema: schema._def.innerType, isOptional: true });
-  } else if (schema instanceof z$1.ZodEffects) {
-    return getFormConfigTypesFromSchemaDef({ schema: schema._def.schema, isOptional });
-  } else if (schema instanceof z$1.ZodRecord) {
-    return {
-      type: "RECORD" /* RECORD */,
-      isOptional,
-      innerSchema: schema._def.valueType
-    };
-  } else {
-    return { type: "STRING" /* STRING */, isOptional };
-  }
-}
-function schemaToFormFieldRenderer({
-  schema,
-  errors,
-  renderFieldMap,
-  schemaField,
-  renderLabel,
-  control,
-  variables,
-  onFieldChange,
-  schemaOptions,
-  values,
-  isOptional = false,
-  isNullable = false
-}) {
-  const fieldConfig = getFormConfigTypesFromSchemaDef({ schema, isOptional });
-  const parentFieldValue = schemaOptions?.parentField ? getPath(values, schemaOptions?.parentField) : "";
-  if (schemaOptions?.parentField && !parentFieldValue) {
-    return null;
-  }
-  if (!renderFieldMap) return;
-  const flattenedErrors = flattenObject(errors, ["message", "type"]);
-  const fieldOptions = schemaOptions?.parentField ? schemaOptions?.options?.[parentFieldValue] : schemaOptions?.options || fieldConfig.options;
-  return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1 mt-3 w-full", children: [
-    renderLabel ? renderLabel({ isOptional: Boolean(fieldConfig.isOptional), schemaField }) : /* @__PURE__ */ jsxs(Label, { className: "flex gap-0.5 capitalize", htmlFor: schemaField, "aria-required": !fieldConfig.isOptional, children: [
-      !fieldConfig?.isOptional && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: toTitleCase(schemaField.split(".").pop() || "") })
-    ] }),
-    renderFieldMap[fieldConfig.type]({
-      name: schemaField,
-      options: fieldOptions,
-      control,
-      variables,
-      innerSchema: fieldConfig.innerSchema,
-      handleFieldChange: onFieldChange,
-      isNullable
-    }),
-    flattenedErrors?.[schemaField] ? /* @__PURE__ */ jsx(Text, { size: "xs", className: "text-red-500", children: flattenedErrors[schemaField]?.message }) : null
-  ] }, schemaField);
-}
-
-function UnionField({
-  renderDynamicForm,
-  schema,
-  handleFieldChange,
-  control,
-  formValues,
-  errors,
-  parentField,
-  action,
-  isOptional = false,
-  isNullable = false,
-  depth
-}) {
-  const fieldConfig = getFormConfigTypesFromSchemaDef({ schema, isOptional });
-  if (schema instanceof ZodUnion) {
-    const schemaOptions = schema.options;
-    return /* @__PURE__ */ jsxs("div", { children: [
-      /* @__PURE__ */ jsxs(Label, { className: "flex gap-0.5 capitalize mb-2", htmlFor: parentField, "aria-required": !fieldConfig.isOptional, children: [
-        !fieldConfig?.isOptional && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
-        /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: toTitleCase(parentField) })
-      ] }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: schemaOptions.map((schemaOption, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
-        index >= 1 && /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3 text-center", size: "xs", children: "or" }),
-        /* @__PURE__ */ jsx("div", { className: "ring-1 ring-white/10 p-2 rounded-md relative", children: renderDynamicForm({
-          schema: schemaOption,
-          handleFieldChange,
-          control,
-          formValues,
-          errors,
-          parentField,
-          action,
-          isOptional,
-          isNullable,
-          depth
-        }) })
-      ] }, index)) })
-    ] });
-  }
-  return null;
-}
-
-function ObjectField({
-  renderDynamicForm,
-  schema,
-  handleFieldChange,
-  control,
-  formValues,
-  errors,
-  parentField,
-  action,
-  isArray = false,
-  isOptional = false,
-  depth
-}) {
-  const fieldConfig = getFormConfigTypesFromSchemaDef({ schema, isOptional });
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: parentField
-  });
-  function handleAddForm() {
-    append({});
-  }
-  return /* @__PURE__ */ jsxs("div", { children: [
-    /* @__PURE__ */ jsxs(Label, { className: "flex gap-0.5 capitalize mb-2", htmlFor: parentField, "aria-required": !fieldConfig.isOptional, children: [
-      !fieldConfig?.isOptional && /* @__PURE__ */ jsx("span", { className: "text-red-500", children: "*" }),
-      /* @__PURE__ */ jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: toTitleCase(parentField) })
-    ] }),
-    isArray ? /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: fields.map((field, index) => /* @__PURE__ */ jsxs("div", { className: "ring-1 ring-white/10 p-2 rounded-md relative", children: [
-        /* @__PURE__ */ jsx(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "icon",
-            onClick: () => remove(index),
-            className: "absolute top-0 right-0",
-            children: /* @__PURE__ */ jsx(XIcon, { className: "text-icon h-3.5 w-3.5" })
-          }
-        ),
-        renderDynamicForm({
-          schema: schema instanceof ZodArray ? schema.element : schema,
-          handleFieldChange,
-          control,
-          formValues,
-          errors,
-          parentField: `${parentField}.${index}`,
-          action,
-          isOptional,
-          depth
-        })
-      ] }, field.id)) }),
-      /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4", children: /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", className: "w-full text-xs h-9", onClick: handleAddForm, children: [
-        "Add ",
-        toTitleCase(parentField.split(".").pop() || "")
-      ] }) })
-    ] }) : /* @__PURE__ */ jsx("div", { className: "ring-1 ring-white/10 p-2 rounded-md relative", children: renderDynamicForm({
-      schema,
-      handleFieldChange,
-      control,
-      formValues,
-      errors,
-      parentField,
-      action,
-      isOptional,
-      depth
-    }) })
+const ArrayElementWrapper = ({ children, onRemove }) => {
+  return /* @__PURE__ */ jsxs("div", { className: "relative border p-4 rounded-md mt-2", children: [
+    /* @__PURE__ */ jsx(Button, { onClick: onRemove, variant: "ghost", className: "absolute top-2 right-2", type: "button", children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" }) }),
+    children
   ] });
-}
-
-function NumberField({ name, control, handleFieldChange }) {
-  return /* @__PURE__ */ jsx(
-    Controller,
-    {
-      name,
-      control,
-      render: ({ field }) => /* @__PURE__ */ jsx(
-        Input,
-        {
-          ...field,
-          type: "number",
-          onChange: (e) => {
-            const value = e.target.value === "" ? void 0 : Number(e.target.value);
-            field.onChange(value);
-            handleFieldChange?.({ key: name, value });
-          }
-        }
-      )
-    }
-  );
-}
+};
 
-function RecordField({ name, control, handleFieldChange }) {
-  const formValue = useWatch({ control, name }) || {};
+const RecordField = ({ inputProps, error, id }) => {
+  const { key, value = {}, onChange, ...props } = inputProps;
   const [pairs, setPairs] = React.useState(
-    () => Object.entries(formValue).map(([key, value]) => ({
-      id: key || v4(),
-      key,
-      value
+    () => Object.entries(value).map(([key2, val]) => ({
+      id: key2 || v4(),
+      key: key2,
+      value: val
     }))
   );
   React.useEffect(() => {
@@ -7657,8 +7260,7 @@ function RecordField({ name, control, handleFieldChange }) {
   }, [pairs]);
   const updateForm = React.useCallback(
     (newPairs) => {
-      if (!handleFieldChange) return;
-      const value = newPairs.reduce(
+      const newValue = newPairs.reduce(
         (acc, pair) => {
           if (pair.key) {
             acc[pair.key] = pair.value;
@@ -7667,12 +7269,14 @@ function RecordField({ name, control, handleFieldChange }) {
         },
         {}
       );
-      handleFieldChange({ key: name, value });
+      onChange?.({
+        target: { value: newValue, name: inputProps.name }
+      });
     },
-    [handleFieldChange, name]
+    [onChange, inputProps.name]
   );
-  const handleChange = (id, field, newValue) => {
-    setPairs((prev) => prev.map((pair) => pair.id === id ? { ...pair, [field]: newValue } : pair));
+  const handleChange = (id2, field, newValue) => {
+    setPairs((prev) => prev.map((pair) => pair.id === id2 ? { ...pair, [field]: newValue } : pair));
   };
   const handleBlur = () => {
     updateForm(pairs);
@@ -7682,8 +7286,8 @@ function RecordField({ name, control, handleFieldChange }) {
     setPairs(newPairs);
     updateForm(newPairs);
   };
-  const removePair = (id) => {
-    const newPairs = pairs.filter((p) => p.id !== id);
+  const removePair = (id2) => {
+    const newPairs = pairs.filter((p) => p.id !== id2);
     if (newPairs.length === 0) {
       newPairs.push({ id: v4(), key: "", value: "" });
     }
@@ -7700,10 +7304,10 @@ function RecordField({ name, control, handleFieldChange }) {
           size: "icon",
           className: "absolute right-2 top-2",
           onClick: () => removePair(pair.id),
-          children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx(TrashIcon, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsxs("div", { className: "space-y-2", children: [
+      /* @__PURE__ */ jsxs("div", { className: "space-y-2 pt-6", children: [
         /* @__PURE__ */ jsx(
           Input,
           {
@@ -7729,244 +7333,110 @@ function RecordField({ name, control, handleFieldChange }) {
       "Add Key-Value Pair"
     ] })
   ] });
-}
+};
 
-function getDefaultFieldMap() {
-  return {
-    [FormConfigType.STRING]: (props) => {
-      const { options, ...rest } = props;
-      if (options?.length) {
-        return /* @__PURE__ */ jsx(EnumField, { ...rest, options });
-      }
-      return /* @__PURE__ */ jsx(StringField, { ...rest });
-    },
-    [FormConfigType.NUMBER]: (props) => {
-      return /* @__PURE__ */ jsx(NumberField, { ...props });
-    },
-    [FormConfigType.BOOLEAN]: (props) => {
-      return /* @__PURE__ */ jsx(BooleanField, { ...props });
-    },
-    [FormConfigType.DATE]: (props) => {
-      return /* @__PURE__ */ jsx(DateField, { ...props });
-    },
-    [FormConfigType.ENUM]: (props) => {
-      const { options = [] } = props;
-      return /* @__PURE__ */ jsx(EnumField, { ...props, options });
-    },
-    [FormConfigType.ARRAY]: (props) => {
-      const renderField = ({ fieldName, index: _index }) => {
-        return getDefaultFieldMap()[FormConfigType.STRING]({
-          ...props,
-          name: fieldName
-        });
-      };
-      return /* @__PURE__ */ jsx(ArrayField, { ...props, renderField });
-    },
-    [FormConfigType.RECORD]: (props) => {
-      return /* @__PURE__ */ jsx(RecordField, { ...props });
-    },
-    [FormConfigType.OBJECT]: (props) => {
-      const { innerSchema, name, control, handleFieldChange } = props;
-      if (!innerSchema) return null;
-      return /* @__PURE__ */ jsx(
-        ObjectField,
-        {
-          schema: innerSchema,
-          control,
-          parentField: name,
-          handleFieldChange: (field, value) => handleFieldChange({ key: field, value }),
-          formValues: {},
-          errors: {},
-          renderDynamicForm: (props2) => resolveSchema({ ...props2, handleFieldChange })
-        }
-      );
-    },
-    [FormConfigType.UNION]: (props) => {
-      const { innerSchema, name, control, handleFieldChange } = props;
-      if (!innerSchema || !(innerSchema instanceof z.ZodUnion)) return null;
-      return /* @__PURE__ */ jsx(
-        UnionField,
-        {
-          schema: innerSchema,
-          control,
-          parentField: name,
-          handleFieldChange: (field, value) => handleFieldChange({ key: field, value }),
-          renderDynamicForm: (fieldProps) => {
-            const fieldType = getFormConfigTypesFromSchemaDef({ schema: fieldProps.schema });
-            return getDefaultFieldMap()[fieldType.type]({
-              ...props,
-              ...fieldProps,
-              control,
-              handleFieldChange
-            });
-          },
-          formValues: {},
-          errors: {}
-        }
-      );
-    },
-    [FormConfigType.CREATABLE]: (props) => {
-      return /* @__PURE__ */ jsx(CreatableField, { ...props });
-    },
-    [FormConfigType.SELECT]: (props) => {
-      const { options = [] } = props;
-      return /* @__PURE__ */ jsx(EnumField, { ...props, options });
-    },
-    [FormConfigType.MULTI_SELECT]: (props) => {
-      return /* @__PURE__ */ jsx(CreatableField, { ...props });
+const ShadcnUIComponents = {
+  Form,
+  FieldWrapper,
+  ErrorMessage,
+  SubmitButton,
+  ObjectWrapper,
+  ArrayWrapper,
+  ArrayElementWrapper
+};
+const ShadcnAutoFormFieldComponents = {
+  string: StringField,
+  number: NumberField,
+  boolean: BooleanField,
+  date: DateField,
+  select: SelectField,
+  record: RecordField
+};
+function AutoForm({ uiComponents, formComponents, ...props }) {
+  return /* @__PURE__ */ jsx(
+    AutoForm$1,
+    {
+      ...props,
+      uiComponents: { ...ShadcnUIComponents, ...uiComponents },
+      formComponents: { ...ShadcnAutoFormFieldComponents, ...formComponents }
     }
-  };
+  );
 }
 
-function adaptHandleFieldChange(handler) {
-  return (field, value) => handler({ key: field, value });
+buildZodFieldConfig();
+
+function inferFieldType(schema, fieldConfig) {
+  if (fieldConfig?.fieldType) {
+    return fieldConfig.fieldType;
+  }
+  if (schema instanceof z.ZodObject) return "object";
+  if (schema instanceof z.ZodNumber) return "number";
+  if (schema instanceof z.ZodBoolean) return "boolean";
+  if (schema instanceof z.ZodDate || schema?.isDatetime || schema?.isDate) return "date";
+  if (schema instanceof z.ZodString) return "string";
+  if (schema instanceof z.ZodEnum) return "select";
+  if (schema instanceof z.ZodNativeEnum) return "select";
+  if (schema instanceof z.ZodArray) return "array";
+  if (schema instanceof z.ZodRecord) return "record";
+  return "string";
 }
-function resolveSchema({
-  schema,
-  parentField,
-  control,
-  formValues,
-  errors,
-  handleFieldChange,
-  isOptional = false,
-  isNullable = false,
-  depth = 0
-}) {
-  if (depth > 10) {
-    console.warn("Maximum schema resolution depth reached. Possible circular reference.");
-    return null;
+
+function parseField(key, schema) {
+  const baseSchema = getBaseSchema(schema);
+  const fieldConfig = getFieldConfigInZodStack(schema);
+  const type = inferFieldType(baseSchema, fieldConfig);
+  const defaultValue = getDefaultValueInZodStack(schema);
+  const options = baseSchema._def?.values;
+  let optionValues = [];
+  if (options) {
+    if (!Array.isArray(options)) {
+      optionValues = Object.entries(options);
+    } else {
+      optionValues = options.map((value) => [value, value]);
+    }
   }
-  if (schema instanceof z$1.ZodObject) {
-    return Object.entries(schema.shape).map(([field, fieldSchema]) => {
-      const currentField = parentField ? `${parentField}.${field}` : field;
-      return resolveSchemaComponent({
-        schema: fieldSchema,
-        parentField: currentField,
-        control,
-        formValues,
-        errors,
-        handleFieldChange,
-        isOptional,
-        isNullable
-      });
-    });
+  let subSchema = [];
+  if (baseSchema instanceof z.ZodObject) {
+    subSchema = Object.entries(baseSchema.shape).map(([key2, field]) => parseField(key2, field));
   }
-  return resolveSchemaComponent({
-    schema,
-    parentField,
-    control,
-    formValues,
-    errors,
-    handleFieldChange,
-    isOptional,
-    isNullable
-  });
+  if (baseSchema instanceof z.ZodArray) {
+    subSchema = [parseField("0", baseSchema._def.type)];
+  }
+  return {
+    key,
+    type,
+    required: !schema.isOptional(),
+    default: defaultValue,
+    description: baseSchema.description,
+    fieldConfig,
+    options: optionValues,
+    schema: subSchema
+  };
 }
-function resolveSchemaComponent({
-  schema,
-  parentField,
-  control,
-  formValues,
-  errors,
-  handleFieldChange,
-  isOptional = false,
-  isNullable = false
-}) {
-  if (schema instanceof z$1.ZodDefault) return null;
-  if (schema instanceof z$1.ZodOptional) {
-    return resolveSchemaComponent({
-      schema: schema._def.innerType,
-      parentField,
-      control,
-      formValues,
-      errors,
-      handleFieldChange,
-      isOptional: true,
-      isNullable
-    });
+function getBaseSchema(schema) {
+  if ("innerType" in schema._def) {
+    return getBaseSchema(schema._def.innerType);
   }
-  if (schema instanceof z$1.ZodObject) {
-    return /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-8 py-8 w-full", children: /* @__PURE__ */ jsx(
-      ObjectField,
-      {
-        schema,
-        control,
-        parentField,
-        handleFieldChange: (field, value) => handleFieldChange({ key: field, value }),
-        formValues,
-        errors,
-        isOptional,
-        renderDynamicForm: (props) => resolveSchema({ ...props, handleFieldChange })
-      }
-    ) }, parentField);
+  if ("schema" in schema._def) {
+    return getBaseSchema(schema._def.schema);
   }
-  if (schema instanceof z$1.ZodUnion) {
-    if (schema.options.some((s) => s instanceof z$1.ZodNull)) {
-      const nonNullSchema = schema.options.find((s) => !(s instanceof z$1.ZodNull));
-      return resolveSchemaComponent({
-        schema: z$1.optional(nonNullSchema),
-        parentField,
-        control,
-        formValues,
-        errors,
-        handleFieldChange,
-        isNullable: true,
-        isOptional
-      });
-    }
-    return /* @__PURE__ */ jsx(
-      UnionField,
-      {
-        schema,
-        control,
-        parentField,
-        handleFieldChange: adaptHandleFieldChange(handleFieldChange),
-        formValues,
-        errors,
-        isOptional,
-        isNullable,
-        renderDynamicForm: (props) => resolveSchema({
-          ...props,
-          handleFieldChange: (props2) => handleFieldChange(props2)
-        })
-      }
-    );
+  return schema;
+}
+function parseSchema(schema) {
+  const objectSchema = schema instanceof z.ZodEffects ? schema.innerType() : schema;
+  const shape = objectSchema.shape;
+  const fields = Object.entries(shape).map(([key, field]) => parseField(key, field));
+  return { fields };
+}
+class CustomZodProvider extends ZodProvider {
+  _schema;
+  constructor(schema) {
+    super(schema);
+    this._schema = schema;
   }
-  if (schema instanceof z$1.ZodArray) {
-    return /* @__PURE__ */ jsx("div", { className: "flex w-full flex-col gap-8 py-8", children: /* @__PURE__ */ jsx(
-      ArrayField,
-      {
-        control,
-        name: parentField,
-        isStringField: schema.element instanceof z$1.ZodString,
-        renderField: (props) => {
-          const fieldSchema = schema.element;
-          let currentField = props.fieldName;
-          if (fieldSchema instanceof z$1.ZodString) {
-            currentField = `${currentField}.root`;
-          }
-          return resolveSchemaComponent({
-            schema: fieldSchema,
-            parentField: currentField,
-            control,
-            formValues,
-            errors,
-            handleFieldChange
-          });
-        }
-      }
-    ) }, parentField);
+  parseSchema() {
+    return parseSchema(this._schema);
   }
-  return /* @__PURE__ */ jsx("div", { className: "w-full", children: schemaToFormFieldRenderer({
-    schema,
-    schemaField: parentField,
-    control,
-    values: formValues,
-    errors,
-    renderFieldMap: getDefaultFieldMap(),
-    onFieldChange: handleFieldChange,
-    isOptional
-  }) }, parentField);
 }
 
 function DynamicForm({
@@ -7976,44 +7446,38 @@ function DynamicForm({
   isSubmitLoading,
   submitButtonLabel = "Submit"
 }) {
-  const schemaTypeName = schema?._def?.typeName;
-  const discriminatedUnionSchemaOptions = schema?._def?.options;
-  const discriminatedUnionSchemaDiscriminator = schema?._def?.discriminator;
-  const wrappedSchema = schemaTypeName !== "ZodObject" ? z$1.object({ items: schema }) : schema;
-  const form = useForm({
-    resolver: schemaTypeName === "ZodDiscriminatedUnion" ? customZodUnionResolver(wrappedSchema, discriminatedUnionSchemaDiscriminator) : zodResolver(wrappedSchema),
-    defaultValues
-  });
-  const { control, handleSubmit, watch } = form;
-  const formValues = form.watch();
-  const discriminatorValue = discriminatedUnionSchemaDiscriminator ? watch(discriminatedUnionSchemaDiscriminator) : void 0;
-  const resolvedSchema = schemaTypeName === "ZodDiscriminatedUnion" ? discriminatedUnionSchemaOptions?.find(
-    (option) => option?.shape?.[discriminatedUnionSchemaDiscriminator]?._def?.value === discriminatorValue
-  ) || z$1.object({ [discriminatedUnionSchemaDiscriminator]: z$1.string() }) : wrappedSchema;
-  function handleFieldChange({ key, value }) {
-    if (key === discriminatedUnionSchemaDiscriminator) {
-      form.setValue(key, value);
-    } else {
-      form.setValue(key, value);
-    }
+  if (!schema) {
+    console.error("no form schema found");
+    return null;
   }
-  const wrappedOnSubmit = (values) => {
-    if (schemaTypeName !== "ZodObject") {
-      return onSubmit(values.items);
-    }
-    return onSubmit(values);
+  const normalizedSchema = (schema2) => {
+    return z$1.object({
+      "​": schema2
+    });
   };
-  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit(wrappedOnSubmit), className: "flex flex-col gap-4 p-4 w-full", children: [
-    resolveSchema({
-      schema: resolvedSchema,
-      parentField: "",
-      control,
-      formValues,
-      errors: form.formState.errors,
-      handleFieldChange
-    }),
-    /* @__PURE__ */ jsx(Button, { disabled: isSubmitLoading, type: "submit", children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : submitButtonLabel })
-  ] }) });
+  const schemaProvider = new CustomZodProvider(normalizedSchema(schema));
+  const formProps = {
+    schema: schemaProvider,
+    onSubmit: async (values) => {
+      await onSubmit(values["​"]);
+    },
+    defaultValues,
+    formProps: {
+      className: "space-y-4 p-4"
+    },
+    uiComponents: {
+      SubmitButton: ({ children }) => /* @__PURE__ */ jsx(Button, { className: "w-full", type: "submit", disabled: isSubmitLoading, children: isSubmitLoading ? /* @__PURE__ */ jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : children || submitButtonLabel })
+    },
+    formComponents: {
+      Label: ({ value }) => /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal", children: value })
+    },
+    withSubmit: true
+  };
+  return /* @__PURE__ */ jsx(ScrollArea, { className: "h-full w-full", children: /* @__PURE__ */ jsx(AutoForm, { ...formProps }) });
+}
+
+function resolveSerializedZodOutput(obj) {
+  return Function("z", `"use strict";return (${obj});`)(z);
 }
 
 function CodeBlockDemo({
@@ -8140,7 +7604,7 @@ function WorkflowTrigger({
         /* @__PURE__ */ jsx(
           CodeBlockDemo,
           {
-            className: "w-[368px] overflow-x-auto",
+            className: "w-full overflow-x-auto",
             code: JSON.stringify(result ?? {}, null, 2),
             language: "json"
           }
@@ -8193,7 +7657,7 @@ function WorkflowTrigger({
       step.suspendPayload && /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx(
         CodeBlockDemo,
         {
-          className: "w-[300px] overflow-x-auto p-2",
+          className: "w-full overflow-x-auto p-2",
           code: JSON.stringify(step.suspendPayload, null, 2),
           language: "json"
         }
@@ -8201,7 +7665,7 @@ function WorkflowTrigger({
       /* @__PURE__ */ jsx(
         DynamicForm,
         {
-          schema: z$1.record(z$1.string(), z$1.any()),
+          schema: z.record(z.string(), z.any()),
           isSubmitLoading: isResumingWorkflow,
           submitButtonLabel: "Resume",
           onSubmit: (data) => {
@@ -8224,17 +7688,10 @@ function WorkflowTrigger({
           content: JSON.stringify(result, null, 2)
         }
       ) }),
-      /* @__PURE__ */ jsx(
-        CodeBlockDemo,
-        {
-          className: "w-[368px] overflow-x-auto",
-          code: JSON.stringify(result, null, 2),
-          language: "json"
-        }
-      )
+      /* @__PURE__ */ jsx(CodeBlockDemo, { className: "w-full overflow-x-auto", code: JSON.stringify(result, null, 2), language: "json" })
     ] })
   ] }) });
 }
 
-export { AgentChat, AgentEvals, AgentTraces, AgentsTable, MastraResizablePanel, NetworkChat, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
+export { AgentChat, AgentEvals, AgentTraces, AgentsTable, DynamicForm, MastraResizablePanel, NetworkChat, WorkflowGraph, WorkflowRunContext, WorkflowRunProvider, WorkflowTraces, WorkflowTrigger, WorkflowsTable };
 //# sourceMappingURL=index.es.js.map