mastra 0.1.57-unstable.38 → 0.1.57-unstable.56

package/dist/shared/components/dynamic-form/fields/object-field.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { XIcon } from 'lucide-react';
+import { useFieldArray } from 'react-hook-form';
+import { ZodArray } from 'zod';
+import { toTitleCase } from '../../../lib/string';
+import { Button } from '../../ui/button';
+import { Label } from '../../ui/label';
+import { Text } from '../../ui/text';
+import { getFormConfigTypesFromSchemaDef } from '../schema';
+export 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 (_jsxs("div", { children: [_jsxs(Label, { className: "flex gap-0.5 capitalize mb-2", htmlFor: parentField, "aria-required": !fieldConfig.isOptional, children: [!fieldConfig?.isOptional && _jsx("span", { className: "text-red-500", children: "*" }), _jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: toTitleCase(parentField) })] }), isArray ? (_jsxs(_Fragment, { children: [_jsx("div", { className: "flex flex-col gap-4", children: fields.map((field, index) => (_jsxs("div", { className: "ring-1 ring-white/10 p-2 rounded-md relative", children: [_jsx(Button, { type: "button", variant: 'ghost', size: 'icon', onClick: () => remove(index), className: "absolute top-0 right-0", children: _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))) }), _jsx("div", { className: "flex flex-col gap-4", children: _jsxs(Button, { type: "button", variant: 'outline', className: "w-full text-xs h-9", onClick: handleAddForm, children: ["Add ", toTitleCase(parentField.split('.').pop() || '')] }) })] })) : (_jsx("div", { className: "ring-1 ring-white/10 p-2 rounded-md relative", children: renderDynamicForm({
+                    schema,
+                    handleFieldChange,
+                    control,
+                    formValues,
+                    errors,
+                    parentField,
+                    action,
+                    isOptional,
+                    depth,
+                }) }))] }));
+}

package/dist/shared/components/dynamic-form/fields/record-field.d.ts

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Control } from 'react-hook-form';
+import { ZodSchema } from 'zod';
+interface RecordFieldProps {
+    name: string;
+    control: Control<any>;
+    innerSchema?: ZodSchema;
+    renderField: (props: {
+        fieldName: string;
+        index: number;
+    }) => React.ReactNode;
+    handleFieldChange?: (props: {
+        key: string;
+        value: Record<string, any>;
+    }) => void;
+}
+export declare function RecordField({ name, control, renderField }: RecordFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/components/dynamic-form/fields/record-field.js

@@ -0,0 +1,13 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Plus, X } from 'lucide-react';
+import { useFieldArray } from 'react-hook-form';
+import { Button } from '../../ui/button';
+import { Input } from '../../ui/input';
+export function RecordField({ name, control, renderField }) {
+    const { fields, append, remove } = useFieldArray({
+        control,
+        name,
+    });
+    return (_jsxs("div", { className: "space-y-3", children: [fields.map((field, index) => (_jsxs("div", { className: "relative space-y-2 rounded-lg border p-4", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon", className: "absolute right-2 top-2", onClick: () => remove(index), children: _jsx(X, { className: "h-4 w-4" }) }), _jsxs("div", { className: "space-y-2", children: [_jsx(Input, { placeholder: "Key", ...control.register(`${name}.${index}.key`) }), renderField({ fieldName: `${name}.${index}.value`, index })] })] }, field.id))), _jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "w-full", onClick: () => append({ key: '', value: '' }), children: [_jsx(Plus, { className: "mr-2 h-4 w-4" }), "Add Key-Value Pair"] })] }));
+}

package/dist/shared/components/dynamic-form/fields/string-field.d.ts

@@ -0,0 +1,13 @@
+import { Control } from 'react-hook-form';
+interface StringFieldProps {
+    name: string;
+    control: Control<any>;
+    handleFieldChange?: (props: {
+        key: string;
+        value: any;
+    }) => void;
+    isMultiline?: boolean;
+    placeholder?: string;
+}
+export declare function StringField({ name, control, handleFieldChange, isMultiline, placeholder }: StringFieldProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/components/dynamic-form/fields/string-field.js

@@ -0,0 +1,12 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Controller } from 'react-hook-form';
+import { Input } from '../../ui/input';
+import { Textarea } from '../../ui/textarea';
+export function StringField({ name, control, handleFieldChange, isMultiline, placeholder }) {
+    const Component = isMultiline ? Textarea : Input;
+    return (_jsx(Controller, { name: name, control: control, render: ({ field }) => (_jsx(Component, { ...field, placeholder: placeholder, onChange: e => {
+                field.onChange(e);
+                handleFieldChange?.({ key: name, value: e.target.value });
+            } })) }));
+}

package/dist/shared/components/dynamic-form/fields/union-field.d.ts

@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { ZodUnion } from 'zod';
+interface UnionComponentProps {
+    renderDynamicForm: (props: {
+        schema: ZodUnion<any>;
+        handleFieldChange: (field: string, value: any) => void;
+        control: any;
+        formValues: Record<string, any>;
+        errors: Record<string, any>;
+        parentField: string;
+        action?: any;
+        isOptional?: boolean;
+        isNullable?: boolean;
+        depth?: number;
+    }) => React.ReactNode;
+    schema: ZodUnion<any>;
+    handleFieldChange: (field: string, value: any) => void;
+    control: any;
+    formValues: Record<string, any>;
+    errors: Record<string, any>;
+    parentField: string;
+    action?: any;
+    isOptional?: boolean;
+    isNullable?: boolean;
+    depth?: number;
+}
+export declare function UnionField({ renderDynamicForm, schema, handleFieldChange, control, formValues, errors, parentField, action, isOptional, isNullable, depth, }: UnionComponentProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/components/dynamic-form/fields/union-field.js

@@ -0,0 +1,27 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { ZodUnion } from 'zod';
+import { toTitleCase } from '../../../lib/string';
+import { Label } from '../../ui/label';
+import { Text } from '../../ui/text';
+import { getFormConfigTypesFromSchemaDef } from '../schema';
+export 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 (_jsxs("div", { children: [_jsxs(Label, { className: "flex gap-0.5 capitalize mb-2", htmlFor: parentField, "aria-required": !fieldConfig.isOptional, children: [!fieldConfig?.isOptional && _jsx("span", { className: "text-red-500", children: "*" }), _jsx(Text, { variant: "secondary", className: "text-mastra-el-3", size: "xs", children: toTitleCase(parentField) })] }), _jsx("div", { className: "flex flex-col gap-4", children: schemaOptions.map((schemaOption, index) => (_jsxs(React.Fragment, { children: [index >= 1 && (_jsx(Text, { variant: "secondary", className: "text-mastra-el-3 text-center", size: "xs", children: "or" })), _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;
+}

package/dist/shared/components/dynamic-form/index.d.ts

@@ -0,0 +1,9 @@
+import { z } from 'zod';
+interface DynamicFormProps<T extends z.ZodSchema> {
+    schema: T;
+    onSubmit: (values: z.infer<T>) => void | Promise<void>;
+    onChange?: (values: Partial<z.infer<T>>) => void;
+    isSubmitLoading?: boolean;
+}
+export declare function DynamicForm<T extends z.ZodSchema>({ schema, onSubmit, onChange, isSubmitLoading, }: DynamicFormProps<T>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/shared/components/dynamic-form/index.js

@@ -0,0 +1,50 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Loader2 } from 'lucide-react';
+import * as React from 'react';
+import { useForm } from 'react-hook-form';
+import { z } from 'zod';
+import { Button } from '../ui/button';
+import { ScrollArea } from '../ui/scroll-area';
+import { customZodUnionResolver } from './resolvers';
+import { resolveSchema } from './schema-resolver';
+export function DynamicForm({ schema, onSubmit, onChange, isSubmitLoading, }) {
+    const schemaTypeName = schema?._def?.typeName;
+    const discriminatedUnionSchemaOptions = schema?._def?.options;
+    const discriminatedUnionSchemaDiscriminator = schema?._def?.discriminator;
+    const form = useForm({
+        resolver: schemaTypeName === 'ZodDiscriminatedUnion'
+            ? customZodUnionResolver(schema, discriminatedUnionSchemaDiscriminator)
+            : zodResolver(schema),
+    });
+    const { control, handleSubmit, watch } = form;
+    const formValues = form.watch();
+    const discriminatorValue = discriminatedUnionSchemaDiscriminator
+        ? watch(discriminatedUnionSchemaDiscriminator)
+        : undefined;
+    const resolvedSchema = schemaTypeName === 'ZodDiscriminatedUnion'
+        ? discriminatedUnionSchemaOptions?.find((option) => option?.shape?.[discriminatedUnionSchemaDiscriminator]?._def?.value === discriminatorValue) || z.object({ [discriminatedUnionSchemaDiscriminator]: z.string() })
+        : schema;
+    React.useEffect(() => {
+        onChange?.(formValues);
+    }, [formValues, onChange]);
+    function handleFieldChange({ key, value }) {
+        if (key === discriminatedUnionSchemaDiscriminator) {
+            form.setValue(key, value);
+            onChange?.({ ...formValues, [key]: value });
+        }
+        else {
+            form.setValue(key, value);
+            onChange?.({ ...formValues, [key]: value });
+        }
+    }
+    return (_jsx(ScrollArea, { className: "h-full w-full", children: _jsxs("form", { onSubmit: handleSubmit(onSubmit), className: "flex flex-col gap-4 p-4", children: [resolveSchema({
+                    schema: resolvedSchema,
+                    parentField: '',
+                    control,
+                    formValues,
+                    errors: form.formState.errors,
+                    handleFieldChange,
+                }), _jsx(Button, { disabled: isSubmitLoading, type: "submit", children: isSubmitLoading ? _jsx(Loader2, { className: "h-4 w-4 animate-spin" }) : 'Submit' })] }) }));
+}

package/dist/shared/components/dynamic-form/resolvers/index.d.ts

@@ -0,0 +1,3 @@
+import { Resolver } from 'react-hook-form';
+import { z } from 'zod';
+export declare const customZodUnionResolver: (schemaUnion: z.ZodTypeAny, discriminator: string) => Resolver<any>;

package/dist/shared/components/dynamic-form/resolvers/index.js

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+import { transformToNestObject } from '../utils';
+export const customZodUnionResolver = (schemaUnion, discriminator) => {
+    return async (values) => {
+        //get schema based on discriminator
+        const schema = schemaUnion?._def?.options?.find((option) => option?.shape?.[discriminator]?._def?.value === values[discriminator]) || z.object({ [discriminator]: z.string() });
+        // Filter out keys that are not in the schema
+        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 };
+        }
+    };
+};

package/dist/shared/components/dynamic-form/schema-resolver.d.ts

@@ -0,0 +1,20 @@
+import { Control, FieldErrors } from 'react-hook-form';
+import { z } from 'zod';
+interface ResolveSchemaProps {
+    schema: z.ZodSchema;
+    parentField: string;
+    control: Control<any>;
+    formValues: any;
+    errors: FieldErrors;
+    handleFieldChange: (props: {
+        key: string | number | symbol;
+        value: any;
+    }) => void;
+    isArray?: boolean;
+    isOptional?: boolean;
+    isNullable?: boolean;
+}
+export declare function resolveSchema({ schema, parentField, control, formValues, errors, handleFieldChange, isOptional, isNullable, depth, }: ResolveSchemaProps & {
+    depth?: number;
+}): import("react/jsx-runtime").JSX.Element | import("react/jsx-runtime").JSX.Element[];
+export {};

package/dist/shared/components/dynamic-form/schema-resolver.js

@@ -0,0 +1,97 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { z } from 'zod';
+import { getDefaultFieldMap } from './default-field-map';
+import { ObjectField, UnionField } from './fields';
+import { schemaToFormFieldRenderer } from './schema';
+function adaptHandleFieldChange(handler) {
+    return (field, value) => handler({ key: field, value });
+}
+export 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;
+    }
+    if (schema instanceof z.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,
+            });
+        });
+    }
+    return resolveSchemaComponent({
+        schema,
+        parentField,
+        control,
+        formValues,
+        errors,
+        handleFieldChange,
+        isOptional,
+        isNullable,
+    });
+}
+function resolveSchemaComponent({ schema, parentField, control, formValues, errors, handleFieldChange, isOptional = false, isNullable = false, }) {
+    if (schema instanceof z.ZodDefault)
+        return null;
+    if (schema instanceof z.ZodOptional) {
+        return resolveSchemaComponent({
+            schema: schema._def.innerType,
+            parentField,
+            control,
+            formValues,
+            errors,
+            handleFieldChange,
+            isOptional: true,
+            isNullable,
+        });
+    }
+    if (schema instanceof z.ZodObject) {
+        return (_jsx("div", { className: "flex flex-col gap-8 py-8", children: _jsx(ObjectField, { schema: schema, control: control, parentField: parentField, handleFieldChange: (field, value) => handleFieldChange({ key: field, value }), formValues: formValues, errors: errors, isOptional: isOptional, renderDynamicForm: props => resolveSchema({ ...props, handleFieldChange }) }) }, parentField));
+    }
+    if (schema instanceof z.ZodUnion) {
+        if (schema.options.some((s) => s instanceof z.ZodNull)) {
+            const nonNullSchema = schema.options.find((s) => !(s instanceof z.ZodNull));
+            return resolveSchemaComponent({
+                schema: z.optional(nonNullSchema),
+                parentField,
+                control,
+                formValues,
+                errors,
+                handleFieldChange,
+                isNullable: true,
+            });
+        }
+        return (_jsx(UnionField, { schema: schema, control: control, parentField: parentField, handleFieldChange: adaptHandleFieldChange(handleFieldChange), formValues: formValues, errors: errors, isOptional: isOptional, isNullable: isNullable, renderDynamicForm: props => resolveSchema({
+                ...props,
+                handleFieldChange: props => handleFieldChange(props),
+            }) }));
+    }
+    if (schema instanceof z.ZodArray) {
+        return resolveSchemaComponent({
+            schema: schema.element,
+            parentField,
+            control,
+            formValues,
+            errors,
+            handleFieldChange,
+            isOptional,
+            isNullable,
+        });
+    }
+    return (_jsx("div", { children: schemaToFormFieldRenderer({
+            schema,
+            schemaField: parentField,
+            control,
+            values: formValues,
+            errors,
+            renderFieldMap: getDefaultFieldMap(),
+            onFieldChange: handleFieldChange,
+        }) }, parentField));
+}

package/dist/shared/components/dynamic-form/schema.d.ts

@@ -0,0 +1,70 @@
+import * as React from 'react';
+import { Control } from 'react-hook-form';
+import { z, ZodSchema } from 'zod';
+type ActionVariables = Record<string, any>;
+export declare enum FormConfigType {
+    STRING = "STRING",
+    NUMBER = "NUMBER",
+    DATE = "DATE",
+    ENUM = "ENUM",
+    ARRAY = "ARRAY",
+    BOOLEAN = "BOOLEAN",
+    RECORD = "RECORD",
+    OBJECT = "OBJECT",
+    UNION = "UNION",
+    CREATABLE = "CREATABLE",
+    SELECT = "SELECT",
+    MULTI_SELECT = "MULTI_SELECT"
+}
+type FormConfig = {
+    type: FormConfigType;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    isOptional?: boolean;
+    hasEffects?: boolean;
+    innerSchema?: ZodSchema;
+};
+export declare function getFormConfigTypesFromSchemaDef({ schema, isOptional, }: {
+    schema: ZodSchema<any>;
+    isOptional?: boolean;
+}): FormConfig;
+export type FieldProps = {
+    name: string;
+    options?: {
+        label: string;
+        value: string;
+    }[];
+    control: Control<any>;
+    innerSchema?: ZodSchema;
+    variables?: Record<string, ActionVariables | undefined>;
+    isNullable?: boolean;
+    handleFieldChange: ({ key, value, variables, }: {
+        key: keyof z.infer<any>;
+        value: any;
+        variables?: ActionVariables;
+    }) => void;
+};
+export declare function schemaToFormFieldRenderer<T extends ZodSchema>({ schema, errors, renderFieldMap, schemaField, renderLabel, control, variables, onFieldChange, schemaOptions, values, isOptional, isNullable, }: {
+    schema: ZodSchema<any>;
+    errors: any;
+    renderFieldMap?: Record<FormConfigType, (props: FieldProps) => React.ReactNode>;
+    schemaField: string;
+    control: any;
+    onFieldChange: (props: {
+        key: keyof z.infer<T>;
+        value: any;
+        variables?: ActionVariables;
+    }) => void;
+    variables?: Record<string, ActionVariables | undefined>;
+    schemaOptions?: Record<string, any>;
+    renderLabel?: ({ isOptional, schemaField }: {
+        isOptional: boolean;
+        schemaField: string;
+    }) => React.ReactNode;
+    values: Record<keyof z.infer<T>, unknown>;
+    isOptional?: boolean;
+    isNullable?: boolean;
+}): any;
+export {};

package/dist/shared/components/dynamic-form/schema.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { z, ZodArray, ZodBoolean, ZodDate, ZodEnum, ZodLiteral, ZodNumber } from 'zod';
+import { flattenObject, getPath } from '../../lib/object';
+import { toTitleCase } from '../../lib/string';
+import { Label } from '../ui/label';
+import { Text } from '../ui/text';
+export var FormConfigType;
+(function (FormConfigType) {
+    FormConfigType["STRING"] = "STRING";
+    FormConfigType["NUMBER"] = "NUMBER";
+    FormConfigType["DATE"] = "DATE";
+    FormConfigType["ENUM"] = "ENUM";
+    FormConfigType["ARRAY"] = "ARRAY";
+    FormConfigType["BOOLEAN"] = "BOOLEAN";
+    FormConfigType["RECORD"] = "RECORD";
+    FormConfigType["OBJECT"] = "OBJECT";
+    FormConfigType["UNION"] = "UNION";
+    FormConfigType["CREATABLE"] = "CREATABLE";
+    FormConfigType["SELECT"] = "SELECT";
+    FormConfigType["MULTI_SELECT"] = "MULTI_SELECT";
+})(FormConfigType || (FormConfigType = {}));
+export function getFormConfigTypesFromSchemaDef({ schema, isOptional = false, }) {
+    if (schema instanceof z.ZodObject) {
+        return { type: FormConfigType.OBJECT, isOptional };
+    }
+    if (schema instanceof z.ZodString) {
+        // if it's a datetime -- accounts for date weirdness during zod schema serialization to JSON
+        if (schema instanceof z.ZodString && schema._def.checks.some((check) => check.kind === 'datetime')) {
+            return { type: FormConfigType.DATE, isOptional };
+        }
+        return { type: FormConfigType.STRING, isOptional };
+    }
+    else if (schema instanceof ZodNumber) {
+        return { type: FormConfigType.NUMBER, isOptional };
+    }
+    else if (schema instanceof ZodBoolean) {
+        return { type: FormConfigType.BOOLEAN, isOptional };
+    }
+    else if (schema instanceof ZodDate) {
+        return { type: FormConfigType.DATE, isOptional };
+    }
+    else if (schema instanceof ZodLiteral) {
+        return {
+            type: FormConfigType.ENUM,
+            isOptional,
+            options: [{ label: schema.value, value: schema.value }],
+        };
+    }
+    else if (schema instanceof ZodEnum) {
+        return {
+            type: FormConfigType.ENUM,
+            isOptional,
+            options: schema.options.map((v) => ({ label: v, value: v })),
+        };
+    }
+    else if (schema instanceof ZodArray) {
+        return {
+            type: FormConfigType.ARRAY,
+            isOptional,
+            options: schema.element instanceof ZodEnum ? schema.element.options.map((v) => ({ label: v, value: v })) : [],
+        };
+    }
+    else if (schema instanceof z.ZodOptional || schema instanceof z.ZodDefault) {
+        return getFormConfigTypesFromSchemaDef({ schema: schema._def.innerType, isOptional: true });
+    }
+    else if (schema instanceof z.ZodEffects) {
+        return getFormConfigTypesFromSchemaDef({ schema: schema._def.schema, isOptional });
+    }
+    else if (schema instanceof z.ZodRecord) {
+        return {
+            type: FormConfigType.RECORD,
+            isOptional,
+            innerSchema: schema._def.valueType,
+        };
+    }
+    else {
+        return { type: FormConfigType.STRING, isOptional }; // Handle other types as needed
+    }
+}
+export 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 (_jsxs("div", { className: "flex flex-col gap-1 mt-3", children: [renderLabel ? (renderLabel({ isOptional: Boolean(fieldConfig.isOptional), schemaField })) : (_jsxs(Label, { className: "flex gap-0.5 capitalize", htmlFor: schemaField, "aria-required": !fieldConfig.isOptional, children: [!fieldConfig?.isOptional && _jsx("span", { className: "text-red-500", children: "*" }), _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] ? (_jsx(Text, { size: "xs", className: "text-red-500", children: flattenedErrors[schemaField]?.message })) : null] }, schemaField));
+}

package/dist/shared/components/dynamic-form/utils.d.ts

@@ -0,0 +1,11 @@
+import { FieldErrors } from 'react-hook-form';
+import { z } from 'zod';
+export declare const transformToNestObject: (error: z.ZodError) => FieldErrors;
+/**
+ * Resolve serialized zod output - This function takes the string output ot the `jsonSchemaToZod` function
+ * and instantiates the zod object correctly.
+ *
+ * @param obj - serialized zod object
+ * @returns resolved zod object
+ */
+export declare function resolveSerializedZodOutput(obj: any): any;

package/dist/shared/components/dynamic-form/utils.js

@@ -0,0 +1,24 @@
+import { z } from 'zod';
+export 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;
+};
+/**
+ * Resolve serialized zod output - This function takes the string output ot the `jsonSchemaToZod` function
+ * and instantiates the zod object correctly.
+ *
+ * @param obj - serialized zod object
+ * @returns resolved zod object
+ */
+export function resolveSerializedZodOutput(obj) {
+    return Function('z', `"use strict";return (${obj});`)(z);
+}

package/dist/shared/components/layout.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare const Layout: ({ children }: {
+    children: React.ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/shared/components/layout.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Sidebar } from './ui/sidebar';
+import { Toaster } from './ui/sonner';
+import { ThemeProvider } from './ui/theme-provider';
+export const Layout = ({ children }) => {
+    return (_jsxs(ThemeProvider, { defaultTheme: "dark", attribute: "class", children: [_jsx(Toaster, { position: "bottom-right" }), _jsxs("main", { className: "bg-mastra-bg-1 grid h-full w-full grid-cols-[15rem_minmax(0,_1fr)] overflow-clip", children: [_jsx("div", { className: "z-20 h-full", children: _jsx("div", { className: "h-full", children: _jsx(Sidebar, {}) }) }), _jsx("div", { className: "bg-mastra-bg-2 grid h-[calc(100vh-1rem)] relative border-mastra-border-1 rounded-xs border-thin m-2 overflow-hidden border-solid", children: children })] })] }));
+};

package/dist/shared/components/ui/badge.d.ts

@@ -0,0 +1,9 @@
+import { type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+declare const badgeVariants: (props?: {
+    variant?: "default" | "destructive" | "outline" | "secondary";
+} & import("class-variance-authority/types").ClassProp) => string;
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): import("react/jsx-runtime").JSX.Element;
+export { Badge, badgeVariants };

package/dist/shared/components/ui/badge.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cva } from 'class-variance-authority';
+import { cn } from '../../lib/utils';
+const badgeVariants = cva('inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2', {
+    variants: {
+        variant: {
+            default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+            secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+            destructive: 'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+            outline: 'text-foreground',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+    },
+});
+function Badge({ className, variant, ...props }) {
+    return _jsx("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+export { Badge, badgeVariants };

package/dist/shared/components/ui/button.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: {
-    variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost";
+    variant?: "link" | "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost";
     size?: "default" | "sm" | "lg" | "icon";
 } & import("class-variance-authority/types").ClassProp) => string;
 export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/shared/components/ui/button.js

@@ -6,9 +6,10 @@ import { cn } from '../../lib/utils';
 const buttonVariants = cva('inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0', {
     variants: {
         variant: {
-            default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+            default: 'bg-mastra-bg-7 border-[0.5px] border-mastra-border-4 text-white hover:bg-mastra-bg-7/70',
+            primary: 'border-[0.5px] border-mastra-border-1 bg-mastra-bg-4 hover:bg-mastra-bg-2/80 text-kp-el-6',
             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',