pxengine 0.1.0

package/src/render/PXEngineRenderer.tsx

@@ -0,0 +1,272 @@
+import React from "react";
+import { UIComponent, UISchema, UIAtom, UIMolecule } 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.
+
+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;
+
+  /**
+   * Render Atomic components (UI Primitives)
+   */
+  const renderAtom = (
+    atom: UIAtom,
+    renderComponent: (c: UIComponent) => React.ReactNode,
+  ): React.ReactNode => {
+    const { type, id } = atom;
+
+    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;
+    }
+  };
+
+  /**
+   * Render Molecule components (Domain-specific / Complex)
+   */
+  const renderMolecule = (molecule: UIMolecule): React.ReactNode => {
+    const { type, id } = molecule;
+
+    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 renderComponent = (component: UIComponent): React.ReactNode => {
+    const { type } = component;
+
+    // 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);
+
+    if (isAtom) {
+      return renderAtom(component as UIAtom, renderComponent);
+    }
+
+    return renderMolecule(component as UIMolecule);
+  };
+
+  return <>{renderComponent(root)}</>;
+};

package/src/render/index.ts

@@ -0,0 +1 @@
+export * from "./PXEngineRenderer";

package/src/styles/globals.css

@@ -0,0 +1,146 @@
+@tailwind base;
+
+@custom-variant dark (&:is(.dark *));
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+    --radius: 0.5rem;
+
+    /* Custom theme variables (will be inherited from client) */
+    --gray25: #fcfcfd;
+    --gray50: #f9fafb;
+    --gray100: #f2f4f7;
+    --gray200: #eaecf0;
+    --gray300: #d0d5dd;
+    --gray400: #98a2b3;
+    --gray500: #667085;
+    --gray600: #475467;
+    --gray700: #344054;
+    --gray800: #1d2939;
+    --gray900: #101828;
+    --purple100: #f4f3ff;
+    --purple200: #988cff;
+    --purple500: #6941c6;
+    --purple-text: #7f56d9;
+    --purple50: #f9f5ff;
+    --purple20: #f4ebff;
+    --purple-border: #d6bbfb;
+    --purpleLight: #f4f3ff;
+    --purple-text-1: #7f56d9;
+    --purple-text-2: #6941c6;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+:root {
+  --sidebar: hsl(0 0% 98%);
+  --sidebar-foreground: hsl(240 5.3% 26.1%);
+  --sidebar-primary: hsl(240 5.9% 10%);
+  --sidebar-primary-foreground: hsl(0 0% 98%);
+  --sidebar-accent: hsl(240 4.8% 95.9%);
+  --sidebar-accent-foreground: hsl(240 5.9% 10%);
+  --sidebar-border: hsl(220 13% 91%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+.dark {
+  --sidebar: hsl(240 5.9% 10%);
+  --sidebar-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-primary: hsl(224.3 76.3% 48%);
+  --sidebar-primary-foreground: hsl(0 0% 100%);
+  --sidebar-accent: hsl(240 3.7% 15.9%);
+  --sidebar-accent-foreground: hsl(240 4.8% 95.9%);
+  --sidebar-border: hsl(240 3.7% 15.9%);
+  --sidebar-ring: hsl(217.2 91.2% 59.8%);
+}
+
+@theme inline {
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --animate-accordion-down: accordion-down 0.2s ease-out;
+  --animate-accordion-up: accordion-up 0.2s ease-out;
+
+  @keyframes accordion-down {
+    from {
+      height: 0;
+    }
+    to {
+      height: var(--radix-accordion-content-height);
+    }
+  }
+
+  @keyframes accordion-up {
+    from {
+      height: var(--radix-accordion-content-height);
+    }
+    to {
+      height: 0;
+    }
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

package/src/types/atoms.ts

@@ -0,0 +1,294 @@
+export type LayoutDirection = "vertical" | "horizontal" | "grid";
+export type GapSize = "none" | "sm" | "md" | "lg" | "xl";
+export type TextVariant = "h1" | "h2" | "h3" | "h4" | "p" | "small" | "muted" | "label";
+export type ButtonVariant = "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | "purple" | "gradient";
+export type ButtonSize = "default" | "sm" | "lg" | "icon" | "xl";
+export type InputType = "text" | "email" | "password" | "number" | "search" | "tel" | "url" | "textarea" | "select" | "slider" | "checkbox" | "switch" | "radio" | "otp" | "date";
+
+export interface BaseAtom {
+  id: string;
+  type: string;
+  className?: string;
+}
+
+// ============================================================================
+// FORM ATOMS
+// ============================================================================
+
+export interface ButtonAtomType extends BaseAtom {
+  type: "button";
+  label: string;
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+  action?: string;
+  disabled?: boolean;
+  isLoading?: boolean;
+}
+
+export interface InputAtomType extends BaseAtom {
+  type: "input";
+  inputType: InputType;
+  label?: string;
+  placeholder?: string;
+  defaultValue?: any;
+  required?: boolean;
+  disabled?: boolean;
+  options?: Array<{ label: string; value: string }>;
+  config?: Record<string, any>;
+}
+
+export interface ToggleAtomType extends BaseAtom {
+  type: "toggle";
+  label: string;
+  pressed?: boolean;
+  disabled?: boolean;
+}
+
+// ============================================================================
+// LAYOUT & DISPLAY ATOMS
+// ============================================================================
+
+export interface TextAtomType extends BaseAtom {
+  type: "text";
+  content: string;
+  variant: TextVariant;
+}
+
+export interface LayoutAtomType extends BaseAtom {
+  type: "layout";
+  direction: LayoutDirection;
+  gap?: GapSize;
+  children: any[]; // Recursive
+}
+
+export interface CardAtomType extends BaseAtom {
+  type: "card";
+  title?: string;
+  description?: string;
+  children: any[];
+  footer?: any[];
+}
+
+export interface TabsAtomType extends BaseAtom {
+  type: "tabs";
+  defaultValue: string;
+  tabs: Array<{
+    value: string;
+    label: string;
+    content: any[];
+  }>;
+}
+
+export interface AccordionAtomType extends BaseAtom {
+  type: "accordion";
+  items: Array<{
+    value: string;
+    trigger: string;
+    content: any[];
+  }>;
+}
+
+export interface SeparatorAtomType extends BaseAtom {
+  type: "separator";
+  orientation?: "horizontal" | "vertical";
+}
+
+export interface ScrollAreaAtomType extends BaseAtom {
+  type: "scroll-area";
+  maxHeight?: string;
+  children: any[];
+}
+
+// ============================================================================
+// DATA DISPLAY ATOMS
+// ============================================================================
+
+export interface AvatarAtomType extends BaseAtom {
+  type: "avatar";
+  src?: string;
+  fallback: string;
+  alt?: string;
+}
+
+export interface BadgeAtomType extends BaseAtom {
+  type: "badge";
+  label: string;
+  variant?: "default" | "secondary" | "destructive" | "outline" | "purple" | "green";
+}
+
+export interface ProgressAtomType extends BaseAtom {
+  type: "progress";
+  value: number; // 0 to 100
+}
+
+export interface TableAtomType extends BaseAtom {
+  type: "table";
+  headers: string[];
+  rows: any[][];
+}
+
+export interface CarouselAtomType extends BaseAtom {
+  type: "carousel";
+  items: any[][]; // Array of children per slide
+}
+
+export interface AlertAtomType extends BaseAtom {
+  type: "alert";
+  title: string;
+  description?: string;
+  variant?: "default" | "destructive" | "warning" | "info" | "success";
+}
+
+// ============================================================================
+// OVERLAY ATOMS
+// ============================================================================
+
+export interface TooltipAtomType extends BaseAtom {
+  type: "tooltip";
+  content: string;
+  children: any[];
+}
+
+export interface PopoverAtomType extends BaseAtom {
+  type: "popover";
+  trigger: any[];
+  content: any[];
+}
+
+export interface DialogAtomType extends BaseAtom {
+  type: "dialog";
+  title: string;
+  description?: string;
+  trigger: any[];
+  children: any[];
+  footer?: any[];
+}
+
+// ============================================================================
+// ADDITIONAL LAYOUT ATOMS
+// ============================================================================
+
+export interface AspectRatioAtomType extends BaseAtom {
+  type: "aspect-ratio";
+  ratio: number;
+  children: any[];
+}
+
+export interface CollapsibleAtomType extends BaseAtom {
+  type: "collapsible";
+  trigger: any[];
+  content: any[];
+  defaultOpen?: boolean;
+}
+
+// ============================================================================
+// ADDITIONAL OVERLAY ATOMS
+// ============================================================================
+
+export interface SheetAtomType extends BaseAtom {
+  type: "sheet";
+  side?: "top" | "bottom" | "left" | "right";
+  title?: string;
+  description?: string;
+  trigger: any[];
+  children: any[];
+  footer?: any[];
+}
+
+export interface AlertDialogAtomType extends BaseAtom {
+  type: "alert-dialog";
+  title: string;
+  description?: string;
+  trigger: any[];
+  confirmLabel?: string;
+  cancelLabel?: string;
+  action?: string;
+}
+
+// ============================================================================
+// NAVIGATION ATOMS
+// ============================================================================
+
+export interface BreadcrumbAtomType extends BaseAtom {
+  type: "breadcrumb";
+  items: Array<{
+    label: string;
+    href?: string;
+    isCurrent?: boolean;
+  }>;
+}
+
+// ============================================================================
+// UTILITY ATOMS
+// ============================================================================
+
+export interface SkeletonAtomType extends BaseAtom {
+  type: "skeleton";
+  shape?: "rect" | "circle";
+  width?: string | number;
+  height?: string | number;
+}
+
+export interface SpinnerAtomType extends BaseAtom {
+  type: "spinner";
+  size?: "sm" | "md" | "lg" | "xl";
+}
+
+export interface CommandAtomType extends BaseAtom {
+  type: "command";
+  placeholder?: string;
+  groups: Array<{
+    heading?: string;
+    items: Array<{
+      label: string;
+      value: string;
+      icon?: string;
+      action?: string;
+    }>;
+  }>;
+}
+
+export interface PaginationAtomType extends BaseAtom {
+  type: "pagination";
+  currentPage: number;
+  totalPages: number;
+  hasNext?: boolean;
+  hasPrev?: boolean;
+}
+
+export interface CalendarAtomType extends BaseAtom {
+  type: "calendar";
+  mode?: "single" | "range" | "multiple";
+  selectedDate?: string | string[];
+}
+
+export type UIAtom =
+  | ButtonAtomType
+  | InputAtomType
+  | ToggleAtomType
+  | TextAtomType
+  | LayoutAtomType
+  | CardAtomType
+  | TabsAtomType
+  | AccordionAtomType
+  | SeparatorAtomType
+  | ScrollAreaAtomType
+  | AspectRatioAtomType
+  | CollapsibleAtomType
+  | AvatarAtomType
+  | BadgeAtomType
+  | ProgressAtomType
+  | TableAtomType
+  | CarouselAtomType
+  | AlertAtomType
+  | TooltipAtomType
+  | PopoverAtomType
+  | DialogAtomType
+  | SheetAtomType
+  | AlertDialogAtomType
+  | SkeletonAtomType
+  | SpinnerAtomType
+  | BreadcrumbAtomType
+  | CalendarAtomType
+  | PaginationAtomType
+  | CommandAtomType;