pxengine 0.1.7 → 0.1.9

package/dist/index.cjs

@@ -8384,16 +8384,17 @@ var FormInputAtom = ({
   className,
   id
 }) => {
+  const fieldName = name || id || `input-${Math.random().toString(36).substring(2, 9)}`;
   const form = (0, import_react_hook_form2.useForm)({
     defaultValues: {
-      [name]: defaultValue
+      [fieldName]: defaultValue
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Form, { ...form, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
     FormField,
     {
       control: form.control,
-      name,
+      name: fieldName,
       rules: {
         required: required ? `${label || name} is required` : void 0
       },
@@ -8429,23 +8430,24 @@ var FormSelectAtom = ({
   className,
   id
 }) => {
+  const fieldName = name || id || `select-${Math.random().toString(36).substring(2, 9)}`;
   const form = (0, import_react_hook_form3.useForm)({
     defaultValues: {
-      [name]: defaultValue
+      [fieldName]: defaultValue
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Form, { ...form, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(
     FormField,
     {
       control: form.control,
-      name,
+      name: fieldName,
       rules: {
         required: required ? `${label || name} is required` : void 0
       },
       render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(FormItem, { className: cn("w-full", className), children: [
         label && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FormLabel, { children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(Select, { onValueChange: field.onChange, defaultValue: field.value, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectTrigger, { id: id || `form-select-${name}`, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectValue, { placeholder }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FormControl, { children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectTrigger, { id: id || `form-select-${fieldName}`, children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectValue, { placeholder }) }) }),
           /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectContent, { children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(SelectItem, { value: option.value, children: option.label }, option.value)) })
         ] }),
         description && /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(FormDescription, { children: description }),
@@ -8469,16 +8471,17 @@ var FormTextareaAtom = ({
   className,
   id
 }) => {
+  const fieldName = name || id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
   const form = (0, import_react_hook_form4.useForm)({
     defaultValues: {
-      [name]: defaultValue
+      [fieldName]: defaultValue
     }
   });
   return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Form, { ...form, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     FormField,
     {
       control: form.control,
-      name,
+      name: fieldName,
       rules: {
         required: required ? `${label || name} is required` : void 0
       },
@@ -8489,7 +8492,7 @@ var FormTextareaAtom = ({
           {
             placeholder,
             rows,
-            id: id || `form-textarea-${name}`,
+            id: id || `form-textarea-${fieldName}`,
             ...field
           }
         ) }),
@@ -11745,9 +11748,21 @@ var PXEngineRenderer = ({
       return component;
     }
     if (!component || typeof component !== "object") return null;
-    const { type, name, props = {}, children = [], id } = component;
-    const componentName = name || type;
+    const {
+      type,
+      name,
+      component: componentType,
+      props = {},
+      children = [],
+      id,
+      ...remainingProps
+    } = component;
+    const componentName = name || type || componentType;
     if (!componentName || typeof componentName !== "string") return null;
+    const finalProps = { ...remainingProps, ...props };
+    if (id && !finalProps.id) {
+      finalProps.id = id;
+    }
     const uniqueKey = id || `${componentName}-${index || Math.random().toString(36).substr(2, 9)}`;
     const normalizedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
     const resolveComponent = (identifier) => {
@@ -11796,7 +11811,7 @@ var PXEngineRenderer = ({
       return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         TargetComponent,
         {
-          ...props,
+          ...finalProps,
           onAction,
           renderComponent: renderRecursive,
           children
@@ -11804,10 +11819,10 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TargetComponent, { ...props, children: Array.isArray(children) ? children.map((child, idx) => renderRecursive(child, idx)) : children }, uniqueKey);
+      return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(TargetComponent, { ...finalProps, children: Array.isArray(children) ? children.map((child, idx) => renderRecursive(child, idx)) : children }, uniqueKey);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "px-engine-root", children: renderRecursive(root) });
+  return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)("div", { className: "px-engine-root relative w-full h-full min-h-[300px]", children: renderRecursive(root) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.js

@@ -8138,16 +8138,17 @@ var FormInputAtom = ({
   className,
   id
 }) => {
+  const fieldName = name || id || `input-${Math.random().toString(36).substring(2, 9)}`;
   const form = useForm({
     defaultValues: {
-      [name]: defaultValue
+      [fieldName]: defaultValue
     }
   });
   return /* @__PURE__ */ jsx69(Form, { ...form, children: /* @__PURE__ */ jsx69(
     FormField,
     {
       control: form.control,
-      name,
+      name: fieldName,
       rules: {
         required: required ? `${label || name} is required` : void 0
       },
@@ -8183,23 +8184,24 @@ var FormSelectAtom = ({
   className,
   id
 }) => {
+  const fieldName = name || id || `select-${Math.random().toString(36).substring(2, 9)}`;
   const form = useForm2({
     defaultValues: {
-      [name]: defaultValue
+      [fieldName]: defaultValue
     }
   });
   return /* @__PURE__ */ jsx70(Form, { ...form, children: /* @__PURE__ */ jsx70(
     FormField,
     {
       control: form.control,
-      name,
+      name: fieldName,
       rules: {
         required: required ? `${label || name} is required` : void 0
       },
       render: ({ field }) => /* @__PURE__ */ jsxs38(FormItem, { className: cn("w-full", className), children: [
         label && /* @__PURE__ */ jsx70(FormLabel, { children: label }),
         /* @__PURE__ */ jsxs38(Select, { onValueChange: field.onChange, defaultValue: field.value, children: [
-          /* @__PURE__ */ jsx70(FormControl, { children: /* @__PURE__ */ jsx70(SelectTrigger, { id: id || `form-select-${name}`, children: /* @__PURE__ */ jsx70(SelectValue, { placeholder }) }) }),
+          /* @__PURE__ */ jsx70(FormControl, { children: /* @__PURE__ */ jsx70(SelectTrigger, { id: id || `form-select-${fieldName}`, children: /* @__PURE__ */ jsx70(SelectValue, { placeholder }) }) }),
           /* @__PURE__ */ jsx70(SelectContent, { children: options.map((option) => /* @__PURE__ */ jsx70(SelectItem, { value: option.value, children: option.label }, option.value)) })
         ] }),
         description && /* @__PURE__ */ jsx70(FormDescription, { children: description }),
@@ -8223,16 +8225,17 @@ var FormTextareaAtom = ({
   className,
   id
 }) => {
+  const fieldName = name || id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
   const form = useForm3({
     defaultValues: {
-      [name]: defaultValue
+      [fieldName]: defaultValue
     }
   });
   return /* @__PURE__ */ jsx71(Form, { ...form, children: /* @__PURE__ */ jsx71(
     FormField,
     {
       control: form.control,
-      name,
+      name: fieldName,
       rules: {
         required: required ? `${label || name} is required` : void 0
       },
@@ -8243,7 +8246,7 @@ var FormTextareaAtom = ({
           {
             placeholder,
             rows,
-            id: id || `form-textarea-${name}`,
+            id: id || `form-textarea-${fieldName}`,
             ...field
           }
         ) }),
@@ -11499,9 +11502,21 @@ var PXEngineRenderer = ({
       return component;
     }
     if (!component || typeof component !== "object") return null;
-    const { type, name, props = {}, children = [], id } = component;
-    const componentName = name || type;
+    const {
+      type,
+      name,
+      component: componentType,
+      props = {},
+      children = [],
+      id,
+      ...remainingProps
+    } = component;
+    const componentName = name || type || componentType;
     if (!componentName || typeof componentName !== "string") return null;
+    const finalProps = { ...remainingProps, ...props };
+    if (id && !finalProps.id) {
+      finalProps.id = id;
+    }
     const uniqueKey = id || `${componentName}-${index || Math.random().toString(36).substr(2, 9)}`;
     const normalizedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
     const resolveComponent = (identifier) => {
@@ -11550,7 +11565,7 @@ var PXEngineRenderer = ({
       return /* @__PURE__ */ jsx90(
         TargetComponent,
         {
-          ...props,
+          ...finalProps,
           onAction,
           renderComponent: renderRecursive,
           children
@@ -11558,10 +11573,10 @@ var PXEngineRenderer = ({
         uniqueKey
       );
     } else {
-      return /* @__PURE__ */ jsx90(TargetComponent, { ...props, children: Array.isArray(children) ? children.map((child, idx) => renderRecursive(child, idx)) : children }, uniqueKey);
+      return /* @__PURE__ */ jsx90(TargetComponent, { ...finalProps, children: Array.isArray(children) ? children.map((child, idx) => renderRecursive(child, idx)) : children }, uniqueKey);
     }
   };
-  return /* @__PURE__ */ jsx90("div", { className: "px-engine-root", children: renderRecursive(root) });
+  return /* @__PURE__ */ jsx90("div", { className: "px-engine-root relative w-full h-full min-h-[300px]", children: renderRecursive(root) });
 };
 export {
   Accordion,

package/dist/registry.json

@@ -1,7 +1,7 @@
 {
   "name": "@pxengine/ui",
   "version": "1.0.0",
-  "lastUpdated": "2026-01-30T05:20:50.325Z",
+  "lastUpdated": "2026-01-30T13:41:14.195Z",
   "components": {
     "AccordionAtom": {
       "name": "AccordionAtom",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxengine",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "type": "module",
   "description": "Shadcn-based UI component library for agent-driven interfaces",
   "main": "./dist/index.cjs",

package/src/atoms/FormInputAtom.tsx

@@ -61,10 +61,14 @@ export const FormInputAtom: React.FC<FormInputAtomProps> = ({
   className,
   id,
 }) => {
+  // Safe fallback for name to prevent RHF crash
+  const fieldName =
+    name || id || `input-${Math.random().toString(36).substring(2, 9)}`;
+
   // Create a local form context for this field
   const form = useForm({
     defaultValues: {
-      [name]: defaultValue,
+      [fieldName]: defaultValue,
     },
   });
 
@@ -72,7 +76,7 @@ export const FormInputAtom: React.FC<FormInputAtomProps> = ({
     <Form {...form}>
       <FormField
         control={form.control}
-        name={name}
+        name={fieldName}
         rules={{
           required: required ? `${label || name} is required` : undefined,
         }}

package/src/atoms/FormSelectAtom.tsx

@@ -64,10 +64,14 @@ export const FormSelectAtom: React.FC<FormSelectAtomProps> = ({
   className,
   id,
 }) => {
+  // Safe fallback for name to prevent RHF crash
+  const fieldName =
+    name || id || `select-${Math.random().toString(36).substring(2, 9)}`;
+
   // Create a local form context for this field
   const form = useForm({
     defaultValues: {
-      [name]: defaultValue,
+      [fieldName]: defaultValue,
     },
   });
 
@@ -75,7 +79,7 @@ export const FormSelectAtom: React.FC<FormSelectAtomProps> = ({
     <Form {...form}>
       <FormField
         control={form.control}
-        name={name}
+        name={fieldName}
         rules={{
           required: required ? `${label || name} is required` : undefined,
         }}
@@ -84,7 +88,7 @@ export const FormSelectAtom: React.FC<FormSelectAtomProps> = ({
             {label && <FormLabel>{label}</FormLabel>}
             <Select onValueChange={field.onChange} defaultValue={field.value}>
               <FormControl>
-                <SelectTrigger id={id || `form-select-${name}`}>
+                <SelectTrigger id={id || `form-select-${fieldName}`}>
                   <SelectValue placeholder={placeholder} />
                 </SelectTrigger>
               </FormControl>

package/src/atoms/FormTextareaAtom.tsx

@@ -53,10 +53,14 @@ export const FormTextareaAtom: React.FC<FormTextareaAtomProps> = ({
   className,
   id,
 }) => {
+  // Safe fallback for name to prevent RHF crash
+  const fieldName =
+    name || id || `textarea-${Math.random().toString(36).substring(2, 9)}`;
+
   // Create a local form context for this field
   const form = useForm({
     defaultValues: {
-      [name]: defaultValue,
+      [fieldName]: defaultValue,
     },
   });
 
@@ -64,7 +68,7 @@ export const FormTextareaAtom: React.FC<FormTextareaAtomProps> = ({
     <Form {...form}>
       <FormField
         control={form.control}
-        name={name}
+        name={fieldName}
         rules={{
           required: required ? `${label || name} is required` : undefined,
         }}
@@ -75,7 +79,7 @@ export const FormTextareaAtom: React.FC<FormTextareaAtomProps> = ({
               <Textarea
                 placeholder={placeholder}
                 rows={rows}
-                id={id || `form-textarea-${name}`}
+                id={id || `form-textarea-${fieldName}`}
                 {...field}
               />
             </FormControl>

package/src/render/PXEngineRenderer.tsx

@@ -201,12 +201,30 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
 
     if (!component || typeof component !== "object") return null;
 
-    const { type, name, props = {}, children = [], id } = component;
+    // Support 'component' alias for name/type
+    const {
+      type,
+      name,
+      component: componentType,
+      props = {},
+      children = [],
+      id,
+      ...remainingProps
+    } = component;
 
     // Determine the component logic name to search for
-    const componentName = name || type;
+    const componentName = name || type || componentType;
     if (!componentName || typeof componentName !== "string") return null;
 
+    // Merge explicit props with flattened props (remainingProps)
+    // Priority: explicit props > flattened props
+    const finalProps = { ...remainingProps, ...props };
+
+    // Also pass ID if not already in props
+    if (id && !finalProps.id) {
+      finalProps.id = id;
+    }
+
     // Generate a unique key from id, index, or random
     const uniqueKey =
       id ||
@@ -300,7 +318,7 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
       return (
         <TargetComponent
           key={uniqueKey}
-          {...props}
+          {...finalProps}
           onAction={onAction}
           renderComponent={renderRecursive}
           children={children}
@@ -309,7 +327,7 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
     } else {
       // Standard shadcn components - pass children as React children
       return (
-        <TargetComponent key={uniqueKey} {...props}>
+        <TargetComponent key={uniqueKey} {...finalProps}>
           {Array.isArray(children)
             ? children.map((child, idx) => renderRecursive(child, idx))
             : children}
@@ -318,5 +336,9 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
     }
   };
 
-  return <div className="px-engine-root">{renderRecursive(root)}</div>;
+  return (
+    <div className="px-engine-root relative w-full h-full min-h-[300px]">
+      {renderRecursive(root)}
+    </div>
+  );
 };