pxengine 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -3023,6 +3023,42 @@ function Spinner({ className, ...props }) {
   );
 }
 
+// src/render/PXEngineRenderer.tsx
+var import_react25 = __toESM(require("react"), 1);
+
+// src/atoms/index.ts
+var atoms_exports = {};
+__export(atoms_exports, {
+  AccordionAtom: () => AccordionAtom,
+  AlertAtom: () => AlertAtom,
+  AlertDialogAtom: () => AlertDialogAtom,
+  AspectRatioAtom: () => AspectRatioAtom,
+  AvatarAtom: () => AvatarAtom,
+  BadgeAtom: () => BadgeAtom,
+  BreadcrumbAtom: () => BreadcrumbAtom,
+  ButtonAtom: () => ButtonAtom,
+  CalendarAtom: () => CalendarAtom,
+  CardAtom: () => CardAtom,
+  CarouselAtom: () => CarouselAtom,
+  CollapsibleAtom: () => CollapsibleAtom,
+  CommandAtom: () => CommandAtom,
+  DialogAtom: () => DialogAtom,
+  InputAtom: () => InputAtom,
+  LayoutAtom: () => LayoutAtom,
+  PaginationAtom: () => PaginationAtom,
+  PopoverAtom: () => PopoverAtom,
+  ProgressAtom: () => ProgressAtom,
+  ScrollAreaAtom: () => ScrollAreaAtom,
+  SeparatorAtom: () => SeparatorAtom,
+  SheetAtom: () => SheetAtom,
+  SkeletonAtom: () => SkeletonAtom,
+  SpinnerAtom: () => SpinnerAtom,
+  TableAtom: () => TableAtom,
+  TabsAtom: () => TabsAtom,
+  TextAtom: () => TextAtom,
+  TooltipAtom: () => TooltipAtom
+});
+
 // src/atoms/TextAtom.tsx
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var TextAtom = ({
@@ -3763,6 +3799,23 @@ var CommandAtom = ({
   );
 };
 
+// src/molecules/index.ts
+var molecules_exports = {};
+__export(molecules_exports, {
+  ActionButton: () => ActionButton,
+  CAMPAIGN_SEED_FIELDS: () => CAMPAIGN_SEED_FIELDS,
+  CampaignSeedCard: () => CampaignSeedCard,
+  CountrySelectDisplay: () => CountrySelectDisplay,
+  CountrySelectEdit: () => CountrySelectEdit,
+  EditableField: () => EditableField,
+  FormCard: () => FormCard,
+  KeywordBundlesDisplay: () => KeywordBundlesDisplay,
+  KeywordBundlesEdit: () => KeywordBundlesEdit,
+  MCQCard: () => MCQCard,
+  SEARCH_SPEC_FIELDS: () => SEARCH_SPEC_FIELDS,
+  SearchSpecCard: () => SearchSpecCard
+});
+
 // src/molecules/generic/EditableField/EditableField.tsx
 var import_react18 = __toESM(require("react"), 1);
 var import_jsx_runtime69 = require("react/jsx-runtime");
@@ -4911,243 +4964,46 @@ var PXEngineRenderer = ({
   schema,
   onAction
 }) => {
-  const root = "root" in schema ? schema.root : schema;
-  const renderAtom = (atom, renderComponent2) => {
-    const { type, id } = atom;
-    switch (type) {
-      case "layout":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          LayoutAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "card":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          CardAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "text":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TextAtom, { ...atom }, id);
-      case "button":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ButtonAtom, { ...atom, onAction }, id);
-      case "input":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(InputAtom, { ...atom }, id);
-      case "badge":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(BadgeAtom, { ...atom }, id);
-      case "avatar":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(AvatarAtom, { ...atom }, id);
-      case "progress":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ProgressAtom, { ...atom }, id);
-      case "skeleton":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SkeletonAtom, { ...atom }, id);
-      case "alert":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(AlertAtom, { ...atom }, id);
-      case "separator":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SeparatorAtom, { ...atom }, id);
-      case "table":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(TableAtom, { ...atom }, id);
-      case "tabs":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          TabsAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "accordion":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          AccordionAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "scroll-area":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          ScrollAreaAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "carousel":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          CarouselAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "aspect-ratio":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          AspectRatioAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "collapsible":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          CollapsibleAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "tooltip":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          TooltipAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "popover":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          PopoverAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "dialog":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          DialogAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "sheet":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          SheetAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "alert-dialog":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          AlertDialogAtom,
-          {
-            ...atom,
-            onAction,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "breadcrumb":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(BreadcrumbAtom, { ...atom }, id);
-      case "spinner":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SpinnerAtom, { ...atom }, id);
-      case "calendar":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(CalendarAtom, { ...atom }, id);
-      case "pagination":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PaginationAtom, { ...atom }, id);
-      case "command":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(CommandAtom, { ...atom }, id);
-      default:
-        return null;
+  if (!schema) return null;
+  const root = schema.root || schema;
+  const renderRecursive = (component) => {
+    if (typeof component === "string" || typeof component === "number") {
+      return component;
     }
-  };
-  const renderMolecule = (molecule) => {
-    const { type, id } = molecule;
-    switch (type) {
-      case "campaign-seed":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          CampaignSeedCard,
-          {
-            ...molecule,
-            onProceed: () => onAction?.(molecule.proceedAction || "proceed")
-          },
-          id
-        );
-      case "search-spec":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          SearchSpecCard,
-          {
-            ...molecule,
-            onProceed: () => onAction?.(molecule.proceedAction || "proceed")
-          },
-          id
-        );
-      case "mcq":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          MCQCard,
-          {
-            ...molecule,
-            onProceed: () => onAction?.(molecule.proceedAction || "proceed")
-          },
-          id
-        );
-      case "action-button":
-        return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-          ActionButton,
-          {
-            ...molecule,
-            onProceed: () => onAction?.(molecule.action || "proceed")
-          },
-          id
-        );
-      default:
-        return null;
-    }
-  };
-  const renderComponent = (component) => {
-    const { type } = component;
-    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);
-    if (isAtom) {
-      return renderAtom(component, renderComponent);
+    if (!component) return null;
+    const { type, name, props = {}, children = [], id } = component;
+    const componentName = name || type;
+    if (!componentName) return null;
+    const normalizedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+    const atomName = normalizedName.endsWith("Atom") ? normalizedName : `${normalizedName}Atom`;
+    const TargetComponent = atoms_exports[atomName] || atoms_exports[normalizedName] || atoms_exports[componentName] || molecules_exports[normalizedName] || molecules_exports[componentName];
+    if (!TargetComponent) {
+      console.warn(`[PXEngineRenderer] Component not found: ${componentName}`);
+      return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+        "div",
+        {
+          className: "p-2 border border-dashed border-red-500/50 text-red-500 text-[10px] rounded",
+          children: [
+            "Unknown: ",
+            componentName
+          ]
+        },
+        id
+      );
     }
-    return renderMolecule(component);
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+      TargetComponent,
+      {
+        ...props,
+        onAction,
+        renderComponent: renderRecursive,
+        children: Array.isArray(children) ? children : void 0,
+        children: Array.isArray(children) ? children.map((child, idx) => /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_react25.default.Fragment, { children: renderRecursive(child) }, idx)) : typeof children === "string" ? children : null
+      },
+      id || Math.random().toString(36).substr(2, 9)
+    );
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(import_jsx_runtime76.Fragment, { children: renderComponent(root) });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "px-engine-root", children: renderRecursive(root) });
 };
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/index.d.cts

@@ -723,16 +723,16 @@ interface UISchema {
     root: UIComponent;
 }
 
-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.
+ * 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;
+}
 declare const PXEngineRenderer: React__default.FC<PXEngineRendererProps>;
 
 /**

package/dist/index.d.ts

@@ -723,16 +723,16 @@ interface UISchema {
     root: UIComponent;
 }
 
-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.
+ * 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;
+}
 declare const PXEngineRenderer: React__default.FC<PXEngineRendererProps>;
 
 /**

package/dist/index.js

@@ -1,3 +1,9 @@
+var __defProp = Object.defineProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
 // src/components/ui/button.tsx
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
@@ -2774,6 +2780,42 @@ function Spinner({ className, ...props }) {
   );
 }
 
+// src/render/PXEngineRenderer.tsx
+import React58 from "react";
+
+// src/atoms/index.ts
+var atoms_exports = {};
+__export(atoms_exports, {
+  AccordionAtom: () => AccordionAtom,
+  AlertAtom: () => AlertAtom,
+  AlertDialogAtom: () => AlertDialogAtom,
+  AspectRatioAtom: () => AspectRatioAtom,
+  AvatarAtom: () => AvatarAtom,
+  BadgeAtom: () => BadgeAtom,
+  BreadcrumbAtom: () => BreadcrumbAtom,
+  ButtonAtom: () => ButtonAtom,
+  CalendarAtom: () => CalendarAtom,
+  CardAtom: () => CardAtom,
+  CarouselAtom: () => CarouselAtom,
+  CollapsibleAtom: () => CollapsibleAtom,
+  CommandAtom: () => CommandAtom,
+  DialogAtom: () => DialogAtom,
+  InputAtom: () => InputAtom,
+  LayoutAtom: () => LayoutAtom,
+  PaginationAtom: () => PaginationAtom,
+  PopoverAtom: () => PopoverAtom,
+  ProgressAtom: () => ProgressAtom,
+  ScrollAreaAtom: () => ScrollAreaAtom,
+  SeparatorAtom: () => SeparatorAtom,
+  SheetAtom: () => SheetAtom,
+  SkeletonAtom: () => SkeletonAtom,
+  SpinnerAtom: () => SpinnerAtom,
+  TableAtom: () => TableAtom,
+  TabsAtom: () => TabsAtom,
+  TextAtom: () => TextAtom,
+  TooltipAtom: () => TooltipAtom
+});
+
 // src/atoms/TextAtom.tsx
 import { jsx as jsx41 } from "react/jsx-runtime";
 var TextAtom = ({
@@ -3514,6 +3556,23 @@ var CommandAtom = ({
   );
 };
 
+// src/molecules/index.ts
+var molecules_exports = {};
+__export(molecules_exports, {
+  ActionButton: () => ActionButton,
+  CAMPAIGN_SEED_FIELDS: () => CAMPAIGN_SEED_FIELDS,
+  CampaignSeedCard: () => CampaignSeedCard,
+  CountrySelectDisplay: () => CountrySelectDisplay,
+  CountrySelectEdit: () => CountrySelectEdit,
+  EditableField: () => EditableField,
+  FormCard: () => FormCard,
+  KeywordBundlesDisplay: () => KeywordBundlesDisplay,
+  KeywordBundlesEdit: () => KeywordBundlesEdit,
+  MCQCard: () => MCQCard,
+  SEARCH_SPEC_FIELDS: () => SEARCH_SPEC_FIELDS,
+  SearchSpecCard: () => SearchSpecCard
+});
+
 // src/molecules/generic/EditableField/EditableField.tsx
 import React52, { useState as useState2, useEffect as useEffect3, useRef as useRef2 } from "react";
 import { jsx as jsx69, jsxs as jsxs37 } from "react/jsx-runtime";
@@ -4657,248 +4716,51 @@ var MCQCard = React57.memo(
 MCQCard.displayName = "MCQCard";
 
 // src/render/PXEngineRenderer.tsx
-import { Fragment as Fragment3, jsx as jsx76 } from "react/jsx-runtime";
+import { jsx as jsx76, jsxs as jsxs44 } from "react/jsx-runtime";
 var PXEngineRenderer = ({
   schema,
   onAction
 }) => {
-  const root = "root" in schema ? schema.root : schema;
-  const renderAtom = (atom, renderComponent2) => {
-    const { type, id } = atom;
-    switch (type) {
-      case "layout":
-        return /* @__PURE__ */ jsx76(
-          LayoutAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "card":
-        return /* @__PURE__ */ jsx76(
-          CardAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "text":
-        return /* @__PURE__ */ jsx76(TextAtom, { ...atom }, id);
-      case "button":
-        return /* @__PURE__ */ jsx76(ButtonAtom, { ...atom, onAction }, id);
-      case "input":
-        return /* @__PURE__ */ jsx76(InputAtom, { ...atom }, id);
-      case "badge":
-        return /* @__PURE__ */ jsx76(BadgeAtom, { ...atom }, id);
-      case "avatar":
-        return /* @__PURE__ */ jsx76(AvatarAtom, { ...atom }, id);
-      case "progress":
-        return /* @__PURE__ */ jsx76(ProgressAtom, { ...atom }, id);
-      case "skeleton":
-        return /* @__PURE__ */ jsx76(SkeletonAtom, { ...atom }, id);
-      case "alert":
-        return /* @__PURE__ */ jsx76(AlertAtom, { ...atom }, id);
-      case "separator":
-        return /* @__PURE__ */ jsx76(SeparatorAtom, { ...atom }, id);
-      case "table":
-        return /* @__PURE__ */ jsx76(TableAtom, { ...atom }, id);
-      case "tabs":
-        return /* @__PURE__ */ jsx76(
-          TabsAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "accordion":
-        return /* @__PURE__ */ jsx76(
-          AccordionAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "scroll-area":
-        return /* @__PURE__ */ jsx76(
-          ScrollAreaAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "carousel":
-        return /* @__PURE__ */ jsx76(
-          CarouselAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "aspect-ratio":
-        return /* @__PURE__ */ jsx76(
-          AspectRatioAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "collapsible":
-        return /* @__PURE__ */ jsx76(
-          CollapsibleAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "tooltip":
-        return /* @__PURE__ */ jsx76(
-          TooltipAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "popover":
-        return /* @__PURE__ */ jsx76(
-          PopoverAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "dialog":
-        return /* @__PURE__ */ jsx76(
-          DialogAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "sheet":
-        return /* @__PURE__ */ jsx76(
-          SheetAtom,
-          {
-            ...atom,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "alert-dialog":
-        return /* @__PURE__ */ jsx76(
-          AlertDialogAtom,
-          {
-            ...atom,
-            onAction,
-            renderComponent: renderComponent2
-          },
-          id
-        );
-      case "breadcrumb":
-        return /* @__PURE__ */ jsx76(BreadcrumbAtom, { ...atom }, id);
-      case "spinner":
-        return /* @__PURE__ */ jsx76(SpinnerAtom, { ...atom }, id);
-      case "calendar":
-        return /* @__PURE__ */ jsx76(CalendarAtom, { ...atom }, id);
-      case "pagination":
-        return /* @__PURE__ */ jsx76(PaginationAtom, { ...atom }, id);
-      case "command":
-        return /* @__PURE__ */ jsx76(CommandAtom, { ...atom }, id);
-      default:
-        return null;
-    }
-  };
-  const renderMolecule = (molecule) => {
-    const { type, id } = molecule;
-    switch (type) {
-      case "campaign-seed":
-        return /* @__PURE__ */ jsx76(
-          CampaignSeedCard,
-          {
-            ...molecule,
-            onProceed: () => onAction?.(molecule.proceedAction || "proceed")
-          },
-          id
-        );
-      case "search-spec":
-        return /* @__PURE__ */ jsx76(
-          SearchSpecCard,
-          {
-            ...molecule,
-            onProceed: () => onAction?.(molecule.proceedAction || "proceed")
-          },
-          id
-        );
-      case "mcq":
-        return /* @__PURE__ */ jsx76(
-          MCQCard,
-          {
-            ...molecule,
-            onProceed: () => onAction?.(molecule.proceedAction || "proceed")
-          },
-          id
-        );
-      case "action-button":
-        return /* @__PURE__ */ jsx76(
-          ActionButton,
-          {
-            ...molecule,
-            onProceed: () => onAction?.(molecule.action || "proceed")
-          },
-          id
-        );
-      default:
-        return null;
+  if (!schema) return null;
+  const root = schema.root || schema;
+  const renderRecursive = (component) => {
+    if (typeof component === "string" || typeof component === "number") {
+      return component;
     }
-  };
-  const renderComponent = (component) => {
-    const { type } = component;
-    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);
-    if (isAtom) {
-      return renderAtom(component, renderComponent);
+    if (!component) return null;
+    const { type, name, props = {}, children = [], id } = component;
+    const componentName = name || type;
+    if (!componentName) return null;
+    const normalizedName = componentName.charAt(0).toUpperCase() + componentName.slice(1);
+    const atomName = normalizedName.endsWith("Atom") ? normalizedName : `${normalizedName}Atom`;
+    const TargetComponent = atoms_exports[atomName] || atoms_exports[normalizedName] || atoms_exports[componentName] || molecules_exports[normalizedName] || molecules_exports[componentName];
+    if (!TargetComponent) {
+      console.warn(`[PXEngineRenderer] Component not found: ${componentName}`);
+      return /* @__PURE__ */ jsxs44(
+        "div",
+        {
+          className: "p-2 border border-dashed border-red-500/50 text-red-500 text-[10px] rounded",
+          children: [
+            "Unknown: ",
+            componentName
+          ]
+        },
+        id
+      );
     }
-    return renderMolecule(component);
+    return /* @__PURE__ */ jsx76(
+      TargetComponent,
+      {
+        ...props,
+        onAction,
+        renderComponent: renderRecursive,
+        children: Array.isArray(children) ? children : void 0,
+        children: Array.isArray(children) ? children.map((child, idx) => /* @__PURE__ */ jsx76(React58.Fragment, { children: renderRecursive(child) }, idx)) : typeof children === "string" ? children : null
+      },
+      id || Math.random().toString(36).substr(2, 9)
+    );
   };
-  return /* @__PURE__ */ jsx76(Fragment3, { children: renderComponent(root) });
+  return /* @__PURE__ */ jsx76("div", { className: "px-engine-root", children: renderRecursive(root) });
 };
 export {
   Accordion,

package/dist/registry.json

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

package/package.json

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

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>;
 };