pxengine 0.1.2 → 0.1.4

package/dist/registry.json

@@ -1,7 +1,7 @@
 {
   "name": "@pxengine/ui",
   "version": "1.0.0",
-  "lastUpdated": "2026-01-28T06:18:24.958Z",
+  "lastUpdated": "2026-01-28T09:16:14.091Z",
   "components": {
     "Accordion": {
       "name": "Accordion",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "pxengine",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "type": "module",
   "description": "Shadcn-based UI component library for agent-driven interfaces",
   "main": "./dist/index.cjs",
@@ -12,7 +12,7 @@
     "src"
   ],
   "scripts": {
-    "build": "tsup src/index.ts --format cjs,esm --dts --clean && npm run generate-metadata",
+    "build": "tsup && npm run generate-metadata",
     "generate-metadata": "tsx scripts/generate-metadata.ts",
     "dev": "tsup src/index.ts --format cjs,esm --watch --dts",
     "lint": "eslint src --ext .ts,.tsx",

package/src/render/PXEngineRenderer.tsx

@@ -1,272 +1,94 @@
 import React from "react";
-import { UIComponent, UISchema, UIAtom, UIMolecule } from "../types/schema";
+import { UIComponent, UISchema } from "../types/schema";
 import * as Atoms from "../atoms";
-import * as Molecules from "../molecules/index"; // Explicit index to help resolution
-
-// NOTE: This renderer will be used by the frontend to interpret JSON schemas
-// generated by the AI agent via the MCP server.
+import * as Molecules from "../molecules/index";
 
+/**
+ * PXEngineRenderer
+ *
+ * Handles both the full schema { version, root } and individual components.
+ * Dynamically resolves components from the Atoms/Molecules registry.
+ */
 interface PXEngineRendererProps {
   schema: UISchema | UIComponent;
   onAction?: (action: string, payload?: any) => void;
 }
 
-/**
- * PXEngineRenderer
- *
- * The core engine of the @pxengine-ui library.
- * Recursively renders Atoms and Molecules based on the provided JSON schema.
- */
 export const PXEngineRenderer: React.FC<PXEngineRendererProps> = ({
   schema,
   onAction,
 }) => {
-  // Determine if it's a full schema or just a component
-  const root = "root" in schema ? schema.root : schema;
+  if (!schema) return null;
 
-  /**
-   * Render Atomic components (UI Primitives)
-   */
-  const renderAtom = (
-    atom: UIAtom,
-    renderComponent: (c: UIComponent) => React.ReactNode,
-  ): React.ReactNode => {
-    const { type, id } = atom;
+  // Extract root if it's a full UISchema
+  const root = (schema as any).root || (schema as UIComponent);
 
-    switch (type) {
-      case "layout":
-        return (
-          <Atoms.LayoutAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "card":
-        return (
-          <Atoms.CardAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "text":
-        return <Atoms.TextAtom key={id} {...(atom as any)} />;
-      case "button":
-        return (
-          <Atoms.ButtonAtom key={id} {...(atom as any)} onAction={onAction} />
-        );
-      case "input":
-        return <Atoms.InputAtom key={id} {...(atom as any)} />;
-      case "badge":
-        return <Atoms.BadgeAtom key={id} {...(atom as any)} />;
-      case "avatar":
-        return <Atoms.AvatarAtom key={id} {...(atom as any)} />;
-      case "progress":
-        return <Atoms.ProgressAtom key={id} {...(atom as any)} />;
-      case "skeleton":
-        return <Atoms.SkeletonAtom key={id} {...(atom as any)} />;
-      case "alert":
-        return <Atoms.AlertAtom key={id} {...(atom as any)} />;
-      case "separator":
-        return <Atoms.SeparatorAtom key={id} {...(atom as any)} />;
-      case "table":
-        return <Atoms.TableAtom key={id} {...(atom as any)} />;
-      case "tabs":
-        return (
-          <Atoms.TabsAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "accordion":
-        return (
-          <Atoms.AccordionAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "scroll-area":
-        return (
-          <Atoms.ScrollAreaAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "carousel":
-        return (
-          <Atoms.CarouselAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "aspect-ratio":
-        return (
-          <Atoms.AspectRatioAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "collapsible":
-        return (
-          <Atoms.CollapsibleAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "tooltip":
-        return (
-          <Atoms.TooltipAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "popover":
-        return (
-          <Atoms.PopoverAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "dialog":
-        return (
-          <Atoms.DialogAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "sheet":
-        return (
-          <Atoms.SheetAtom
-            key={id}
-            {...(atom as any)}
-            renderComponent={renderComponent}
-          />
-        );
-      case "alert-dialog":
-        return (
-          <Atoms.AlertDialogAtom
-            key={id}
-            {...(atom as any)}
-            onAction={onAction}
-            renderComponent={renderComponent}
-          />
-        );
-      case "breadcrumb":
-        return <Atoms.BreadcrumbAtom key={id} {...(atom as any)} />;
-      case "spinner":
-        return <Atoms.SpinnerAtom key={id} {...(atom as any)} />;
-      case "calendar":
-        return <Atoms.CalendarAtom key={id} {...(atom as any)} />;
-      case "pagination":
-        return <Atoms.PaginationAtom key={id} {...(atom as any)} />;
-      case "command":
-        return <Atoms.CommandAtom key={id} {...(atom as any)} />;
-      default:
-        return null;
+  const renderRecursive = (
+    component: UIComponent | string | any,
+  ): React.ReactNode => {
+    // 1. Handle text nodes (string or number)
+    if (typeof component === "string" || typeof component === "number") {
+      return component;
     }
-  };
 
-  /**
-   * Render Molecule components (Domain-specific / Complex)
-   */
-  const renderMolecule = (molecule: UIMolecule): React.ReactNode => {
-    const { type, id } = molecule;
+    if (!component) return null;
 
-    switch (type) {
-      case "campaign-seed":
-        return (
-          <Molecules.CampaignSeedCard
-            key={id}
-            {...(molecule as any)}
-            onProceed={() =>
-              onAction?.((molecule as any).proceedAction || "proceed")
-            }
-          />
-        );
-      case "search-spec":
-        return (
-          <Molecules.SearchSpecCard
-            key={id}
-            {...(molecule as any)}
-            onProceed={() =>
-              onAction?.((molecule as any).proceedAction || "proceed")
-            }
-          />
-        );
-      case "mcq":
-        return (
-          <Molecules.MCQCard
-            key={id}
-            {...(molecule as any)}
-            onProceed={() =>
-              onAction?.((molecule as any).proceedAction || "proceed")
-            }
-          />
-        );
-      case "action-button":
-        return (
-          <Molecules.ActionButton
-            key={id}
-            {...(molecule as any)}
-            onProceed={() => onAction?.((molecule as any).action || "proceed")}
-          />
-        );
-      default:
-        return null;
-    }
-  };
+    const { type, name, props = {}, children = [], id } = component;
+
+    // Determine the component name to search for
+    const componentName = name || type;
+    if (!componentName) return null;
 
-  const renderComponent = (component: UIComponent): React.ReactNode => {
-    const { type } = component;
+    // Normalize name to PascalCase and check for "Atom" suffix
+    const normalizedName =
+      componentName.charAt(0).toUpperCase() + componentName.slice(1);
+    const atomName = normalizedName.endsWith("Atom")
+      ? normalizedName
+      : `${normalizedName}Atom`;
 
-    // Route based on defined Atom types
-    const isAtom = [
-      "layout",
-      "card",
-      "text",
-      "button",
-      "input",
-      "badge",
-      "avatar",
-      "progress",
-      "skeleton",
-      "alert",
-      "separator",
-      "table",
-      "tabs",
-      "accordion",
-      "scroll-area",
-      "carousel",
-      "aspect-ratio",
-      "collapsible",
-      "tooltip",
-      "popover",
-      "dialog",
-      "sheet",
-      "alert-dialog",
-      "breadcrumb",
-      "spinner",
-      "calendar",
-      "pagination",
-      "command",
-    ].includes(type);
+    // 2. Resolve Component from library registry
+    const TargetComponent =
+      (Atoms as any)[atomName] ||
+      (Atoms as any)[normalizedName] ||
+      (Atoms as any)[componentName] ||
+      (Molecules as any)[normalizedName] ||
+      (Molecules as any)[componentName];
 
-    if (isAtom) {
-      return renderAtom(component as UIAtom, renderComponent);
+    if (!TargetComponent) {
+      console.warn(`[PXEngineRenderer] Component not found: ${componentName}`);
+      return (
+        <div
+          key={id}
+          className="p-2 border border-dashed border-red-500/50 text-red-500 text-[10px] rounded"
+        >
+          Unknown: {componentName}
+        </div>
+      );
     }
 
-    return renderMolecule(component as UIMolecule);
+    // 3. Render Component
+    // We pass 'renderComponent' for components that handle their own child rendering (like Layout/Card)
+    // We also pass children as props for standard React children behavior
+    return (
+      <TargetComponent
+        key={id || Math.random().toString(36).substr(2, 9)}
+        {...props}
+        onAction={onAction}
+        renderComponent={renderRecursive}
+        children={Array.isArray(children) ? children : undefined}
+      >
+        {Array.isArray(children)
+          ? children.map((child, idx) => (
+              <React.Fragment key={idx}>
+                {renderRecursive(child)}
+              </React.Fragment>
+            ))
+          : typeof children === "string"
+            ? children
+            : null}
+      </TargetComponent>
+    );
   };
 
-  return <>{renderComponent(root)}</>;
+  return <div className="px-engine-root">{renderRecursive(root)}</div>;
 };