pxengine 0.1.5 → 0.1.7

package/dist/index.cjs

@@ -7638,14 +7638,14 @@ var TextAtom = ({
   className
 }) => {
   const baseStyles = {
-    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900",
-    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray-900",
-    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray-900",
-    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray-900",
-    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray-700",
-    small: "text-sm font-medium leading-none text-gray-600",
+    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray900",
+    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray900",
+    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray900",
+    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray900",
+    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray700",
+    small: "text-sm font-medium leading-none text-gray600",
     muted: "text-sm text-muted-foreground",
-    label: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1"
+    label: "text-[10px] font-bold text-gray400 uppercase tracking-widest pl-1"
   };
   const Component = variant === "small" || variant === "muted" || variant === "label" ? "p" : variant;
   return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Component, { className: cn(baseStyles[variant], className), children: content });
@@ -7739,11 +7739,11 @@ var CardAtom = ({
       ),
       children: [
         (title || description) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(CardHeader, { children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CardTitle, { className: "text-xl font-bold text-gray-900", children: title }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CardTitle, { className: "text-xl font-bold text-gray900", children: title }),
           description && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CardDescription, { children: description })
         ] }),
         /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CardContent, { className: "space-y-4", children: children.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react36.default.Fragment, { children: renderComponent(child, index) }, child.id || `card-content-${index}`)) }),
-        footer && footer.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CardFooter, { className: "bg-gray-50/50 border-t border-gray-100 flex flex-wrap gap-2 pt-6", children: footer.map((footerChild, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react36.default.Fragment, { children: renderComponent(footerChild, index) }, footerChild.id || `card-footer-${index}`)) })
+        footer && footer.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(CardFooter, { className: "bg-gray50/50 border-t border-gray200 flex flex-wrap gap-2 pt-6", children: footer.map((footerChild, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_react36.default.Fragment, { children: renderComponent(footerChild, index) }, footerChild.id || `card-footer-${index}`)) })
       ]
     }
   );
@@ -8782,7 +8782,7 @@ var ActionButton = import_react51.default.memo(
           variant: "ghost",
           size: "icon",
           onClick: onPause,
-          className: "h-10 w-10 rounded-full hover:bg-gray-100 text-gray-500",
+          className: "h-10 w-10 rounded-full hover:bg-gray200 text-gray600",
           title: isPaused ? "Resume auto-proceed" : "Pause auto-proceed",
           children: isPaused ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Play, { className: "h-4 w-4 fill-current" }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Pause, { className: "h-4 w-4 fill-current" })
         }
@@ -11750,13 +11750,25 @@ var PXEngineRenderer = ({
     if (!componentName || typeof componentName !== "string") return null;
     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,6 +11789,8 @@ 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)(

package/dist/index.js

@@ -7392,14 +7392,14 @@ var TextAtom = ({
   className
 }) => {
   const baseStyles = {
-    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900",
-    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray-900",
-    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray-900",
-    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray-900",
-    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray-700",
-    small: "text-sm font-medium leading-none text-gray-600",
+    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray900",
+    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray900",
+    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray900",
+    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray900",
+    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray700",
+    small: "text-sm font-medium leading-none text-gray600",
     muted: "text-sm text-muted-foreground",
-    label: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1"
+    label: "text-[10px] font-bold text-gray400 uppercase tracking-widest pl-1"
   };
   const Component = variant === "small" || variant === "muted" || variant === "label" ? "p" : variant;
   return /* @__PURE__ */ jsx41(Component, { className: cn(baseStyles[variant], className), children: content });
@@ -7493,11 +7493,11 @@ var CardAtom = ({
       ),
       children: [
         (title || description) && /* @__PURE__ */ jsxs19(CardHeader, { children: [
-          title && /* @__PURE__ */ jsx44(CardTitle, { className: "text-xl font-bold text-gray-900", children: title }),
+          title && /* @__PURE__ */ jsx44(CardTitle, { className: "text-xl font-bold text-gray900", children: title }),
           description && /* @__PURE__ */ jsx44(CardDescription, { children: description })
         ] }),
         /* @__PURE__ */ jsx44(CardContent, { className: "space-y-4", children: children.map((child, index) => /* @__PURE__ */ jsx44(React65.Fragment, { children: renderComponent(child, index) }, child.id || `card-content-${index}`)) }),
-        footer && footer.length > 0 && /* @__PURE__ */ jsx44(CardFooter, { className: "bg-gray-50/50 border-t border-gray-100 flex flex-wrap gap-2 pt-6", children: footer.map((footerChild, index) => /* @__PURE__ */ jsx44(React65.Fragment, { children: renderComponent(footerChild, index) }, footerChild.id || `card-footer-${index}`)) })
+        footer && footer.length > 0 && /* @__PURE__ */ jsx44(CardFooter, { className: "bg-gray50/50 border-t border-gray200 flex flex-wrap gap-2 pt-6", children: footer.map((footerChild, index) => /* @__PURE__ */ jsx44(React65.Fragment, { children: renderComponent(footerChild, index) }, footerChild.id || `card-footer-${index}`)) })
       ]
     }
   );
@@ -8536,7 +8536,7 @@ var ActionButton = React80.memo(
           variant: "ghost",
           size: "icon",
           onClick: onPause,
-          className: "h-10 w-10 rounded-full hover:bg-gray-100 text-gray-500",
+          className: "h-10 w-10 rounded-full hover:bg-gray200 text-gray600",
           title: isPaused ? "Resume auto-proceed" : "Pause auto-proceed",
           children: isPaused ? /* @__PURE__ */ jsx73(Play, { className: "h-4 w-4 fill-current" }) : /* @__PURE__ */ jsx73(Pause, { className: "h-4 w-4 fill-current" })
         }
@@ -11504,13 +11504,25 @@ var PXEngineRenderer = ({
     if (!componentName || typeof componentName !== "string") return null;
     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,6 +11543,8 @@ 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(

package/dist/registry.json

@@ -1,7 +1,7 @@
 {
   "name": "@pxengine/ui",
   "version": "1.0.0",
-  "lastUpdated": "2026-01-28T11:56:34.416Z",
+  "lastUpdated": "2026-01-30T05:20:50.325Z",
   "components": {
     "AccordionAtom": {
       "name": "AccordionAtom",

package/package.json

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

package/src/atoms/CardAtom.tsx

@@ -36,7 +36,7 @@ export const CardAtom: React.FC<Props> = ({
       {(title || description) && (
         <CardHeader>
           {title && (
-            <CardTitle className="text-xl font-bold text-gray-900">
+            <CardTitle className="text-xl font-bold text-gray900">
               {title}
             </CardTitle>
           )}
@@ -51,7 +51,7 @@ export const CardAtom: React.FC<Props> = ({
         ))}
       </CardContent>
       {footer && footer.length > 0 && (
-        <CardFooter className="bg-gray-50/50 border-t border-gray-100 flex flex-wrap gap-2 pt-6">
+        <CardFooter className="bg-gray50/50 border-t border-gray200 flex flex-wrap gap-2 pt-6">
           {footer.map((footerChild, index) => (
             <React.Fragment key={footerChild.id || `card-footer-${index}`}>
               {renderComponent(footerChild, index)}

package/src/atoms/TextAtom.tsx

@@ -12,14 +12,14 @@ export const TextAtom: React.FC<TextAtomType> = ({
   className,
 }) => {
   const baseStyles: Record<string, string> = {
-    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray-900",
-    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray-900",
-    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray-900",
-    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray-900",
-    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray-700",
-    small: "text-sm font-medium leading-none text-gray-600",
+    h1: "scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl text-gray900",
+    h2: "scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-gray900",
+    h3: "scroll-m-20 text-2xl font-semibold tracking-tight text-gray900",
+    h4: "scroll-m-20 text-xl font-semibold tracking-tight text-gray900",
+    p: "leading-7 [&:not(:first-child)]:mt-6 text-gray700",
+    small: "text-sm font-medium leading-none text-gray600",
     muted: "text-sm text-muted-foreground",
-    label: "text-[10px] font-bold text-gray-400 uppercase tracking-widest pl-1",
+    label: "text-[10px] font-bold text-gray400 uppercase tracking-widest pl-1",
   };
 
   const Component =

package/src/molecules/generic/ActionButton/ActionButton.tsx

@@ -113,7 +113,7 @@ export const ActionButton = React.memo<ActionButtonProps>(
             variant="ghost"
             size="icon"
             onClick={onPause}
-            className="h-10 w-10 rounded-full hover:bg-gray-100 text-gray-500"
+            className="h-10 w-10 rounded-full hover:bg-gray200 text-gray600"
             title={isPaused ? "Resume auto-proceed" : "Pause auto-proceed"}
           >
             {isPaused ? (

package/src/render/PXEngineRenderer.tsx

@@ -203,7 +203,7 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
 
     const { type, name, props = {}, children = [], id } = component;
 
-    // Determine the component name to search for
+    // Determine the component logic name to search for
     const componentName = name || type;
     if (!componentName || typeof componentName !== "string") return null;
 
@@ -212,32 +212,52 @@ export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
       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 +284,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;