pxengine 0.1.6 → 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,18 +11748,42 @@ 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 atomName = normalizedName.endsWith("Atom") ? normalizedName : `${normalizedName}Atom`;
-    let TargetComponent = atoms_exports[atomName] || atoms_exports[normalizedName] || atoms_exports[componentName];
-    if (!TargetComponent) {
-      TargetComponent = molecules_exports[normalizedName] || molecules_exports[componentName];
-    }
-    if (!TargetComponent && !CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
-      TargetComponent = ui_exports[normalizedName] || ui_exports[componentName];
+    const resolveComponent = (identifier) => {
+      const normalized = identifier.charAt(0).toUpperCase() + identifier.slice(1);
+      const atomName2 = normalized.endsWith("Atom") ? normalized : `${normalized}Atom`;
+      let Comp = atoms_exports[atomName2] || atoms_exports[normalized] || atoms_exports[identifier];
+      if (!Comp) {
+        Comp = molecules_exports[normalized] || molecules_exports[identifier];
+      }
+      if (!Comp && !CONTEXT_DEPENDENT_COMPONENTS.has(normalized)) {
+        Comp = ui_exports[normalized] || ui_exports[identifier];
+      }
+      return Comp;
+    };
+    let TargetComponent = resolveComponent(componentName);
+    let resolvedIdentifier = componentName;
+    if (!TargetComponent && type && type !== componentName) {
+      TargetComponent = resolveComponent(type);
+      if (TargetComponent) {
+        resolvedIdentifier = type;
+      }
     }
     if (!TargetComponent) {
       if (CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
@@ -11777,12 +11804,14 @@ var PXEngineRenderer = ({
         return renderNotFoundError(componentName, uniqueKey);
       }
     }
+    const resolvedNormalized = resolvedIdentifier.charAt(0).toUpperCase() + resolvedIdentifier.slice(1);
+    const atomName = resolvedNormalized.endsWith("Atom") ? resolvedNormalized : `${resolvedNormalized}Atom`;
     const isAtomWithRenderProp = atomName in atoms_exports;
     if (isAtomWithRenderProp) {
       return /* @__PURE__ */ (0, import_jsx_runtime90.jsx)(
         TargetComponent,
         {
-          ...props,
+          ...finalProps,
           onAction,
           renderComponent: renderRecursive,
           children
@@ -11790,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,18 +11502,42 @@ 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 atomName = normalizedName.endsWith("Atom") ? normalizedName : `${normalizedName}Atom`;
-    let TargetComponent = atoms_exports[atomName] || atoms_exports[normalizedName] || atoms_exports[componentName];
-    if (!TargetComponent) {
-      TargetComponent = molecules_exports[normalizedName] || molecules_exports[componentName];
-    }
-    if (!TargetComponent && !CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
-      TargetComponent = ui_exports[normalizedName] || ui_exports[componentName];
+    const resolveComponent = (identifier) => {
+      const normalized = identifier.charAt(0).toUpperCase() + identifier.slice(1);
+      const atomName2 = normalized.endsWith("Atom") ? normalized : `${normalized}Atom`;
+      let Comp = atoms_exports[atomName2] || atoms_exports[normalized] || atoms_exports[identifier];
+      if (!Comp) {
+        Comp = molecules_exports[normalized] || molecules_exports[identifier];
+      }
+      if (!Comp && !CONTEXT_DEPENDENT_COMPONENTS.has(normalized)) {
+        Comp = ui_exports[normalized] || ui_exports[identifier];
+      }
+      return Comp;
+    };
+    let TargetComponent = resolveComponent(componentName);
+    let resolvedIdentifier = componentName;
+    if (!TargetComponent && type && type !== componentName) {
+      TargetComponent = resolveComponent(type);
+      if (TargetComponent) {
+        resolvedIdentifier = type;
+      }
     }
     if (!TargetComponent) {
       if (CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
@@ -11531,12 +11558,14 @@ var PXEngineRenderer = ({
         return renderNotFoundError(componentName, uniqueKey);
       }
     }
+    const resolvedNormalized = resolvedIdentifier.charAt(0).toUpperCase() + resolvedIdentifier.slice(1);
+    const atomName = resolvedNormalized.endsWith("Atom") ? resolvedNormalized : `${resolvedNormalized}Atom`;
     const isAtomWithRenderProp = atomName in atoms_exports;
     if (isAtomWithRenderProp) {
       return /* @__PURE__ */ jsx90(
         TargetComponent,
         {
-          ...props,
+          ...finalProps,
           onAction,
           renderComponent: renderRecursive,
           children
@@ -11544,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-29T11:11:35.549Z",
+  "lastUpdated": "2026-01-30T13:41:14.195Z",
   "components": {
     "AccordionAtom": {
       "name": "AccordionAtom",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxengine",
-  "version": "0.1.6",
+  "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,43 +201,81 @@ 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 name to search for
-    const componentName = name || type;
+    // Determine the component logic name to search for
+    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 ||
       `${componentName}-${index || Math.random().toString(36).substr(2, 9)}`;
 
-    // Normalize name to PascalCase
+    // Normalize name to PascalCase for the *primary* identifier
     const normalizedName =
       componentName.charAt(0).toUpperCase() + componentName.slice(1);
-    const atomName = normalizedName.endsWith("Atom")
-      ? normalizedName
-      : `${normalizedName}Atom`;
 
-    // 3. Resolve Component from registries (PRIORITY ORDER - safest first)
+    /**
+     * Helper to resolve a component by a given identifier string.
+     * Checks Atoms -> Molecules -> UI Components.
+     */
+    const resolveComponent = (identifier: string) => {
+      const normalized =
+        identifier.charAt(0).toUpperCase() + identifier.slice(1);
+      const atomName = normalized.endsWith("Atom")
+        ? normalized
+        : `${normalized}Atom`;
 
-    // Priority 1: Atoms (schema-safe, self-contained)
-    let TargetComponent =
-      (Atoms as any)[atomName] ||
-      (Atoms as any)[normalizedName] ||
-      (Atoms as any)[componentName];
+      // Priority 1: Atoms
+      let Comp =
+        (Atoms as any)[atomName] ||
+        (Atoms as any)[normalized] ||
+        (Atoms as any)[identifier];
 
-    // Priority 2: Molecules (schema-safe, composite)
-    if (!TargetComponent) {
-      TargetComponent =
-        (Molecules as any)[normalizedName] || (Molecules as any)[componentName];
-    }
+      // Priority 2: Molecules
+      if (!Comp) {
+        Comp = (Molecules as any)[normalized] || (Molecules as any)[identifier];
+      }
+
+      // Priority 3: UI Components
+      if (!Comp && !CONTEXT_DEPENDENT_COMPONENTS.has(normalized)) {
+        Comp =
+          (UIComponents as any)[normalized] ||
+          (UIComponents as any)[identifier];
+      }
+      return Comp;
+    };
+
+    // 1. Attempt using 'name' (or 'type' if name matches)
+    let TargetComponent = resolveComponent(componentName);
+    let resolvedIdentifier = componentName;
 
-    // Priority 3: UI Components (ONLY if NOT context-dependent)
-    if (!TargetComponent && !CONTEXT_DEPENDENT_COMPONENTS.has(normalizedName)) {
-      TargetComponent =
-        (UIComponents as any)[normalizedName] ||
-        (UIComponents as any)[componentName];
+    // 2. FALLBACK: If 'name' failed but 'type' is different, try 'type'
+    // This allows "name": "Dashboard" (descriptive) with "type": "layout" (functional)
+    if (!TargetComponent && type && type !== componentName) {
+      TargetComponent = resolveComponent(type);
+      if (TargetComponent) {
+        resolvedIdentifier = type;
+      }
     }
 
     // 4. Handle component not found or context-dependent
@@ -264,6 +302,13 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
       }
     }
 
+    // Calculate atom name for the *resolved* component to check for render props
+    const resolvedNormalized =
+      resolvedIdentifier.charAt(0).toUpperCase() + resolvedIdentifier.slice(1);
+    const atomName = resolvedNormalized.endsWith("Atom")
+      ? resolvedNormalized
+      : `${resolvedNormalized}Atom`;
+
     // 4. Determine if component expects 'renderComponent' prop (for Atoms with children management)
     const isAtomWithRenderProp = atomName in Atoms;
 
@@ -273,7 +318,7 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
       return (
         <TargetComponent
           key={uniqueKey}
-          {...props}
+          {...finalProps}
           onAction={onAction}
           renderComponent={renderRecursive}
           children={children}
@@ -282,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}
@@ -291,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>
+  );
 };