pxengine 0.1.0

package/README.md

@@ -0,0 +1,175 @@
+# @pxengine-ui
+
+> **Shadcn-based UI component library for agent-driven interfaces**
+
+A standalone UI component library built on top of shadcn/ui, designed specifically for agent-driven user interfaces. Components follow Atomic Design principles and are distributed via copy-paste (shadcn-style).
+
+---
+
+## Overview
+
+`@pxengine-ui` is a component library that:
+
+- **Builds on shadcn/ui** - Uses shadcn components as atoms (base layer)
+- **Follows Atomic Design** - Atoms (shadcn) → Molecules → Organisms
+- **Agent-First** - Designed for schema-driven, agent-generated UIs
+- **Copy-Paste Distribution** - Like shadcn, components are copied into your project
+- **TypeScript-First** - Full type safety across the stack
+- **Theme-Aware** - Inherits from your existing theme system
+
+---
+
+## Documentation
+
+- **[Architecture](./docs/architecture.md)** - System design, folder structure, design decisions
+- **[Conventions](./docs/conventions.md)** - Naming, coding standards, best practices
+- **[Getting Started](./docs/getting-started.md)** - Setup and usage guide
+- **[Component Catalog](./docs/component-catalog.md)** - Visual reference for all components
+
+---
+
+## Structure
+
+```
+@pxengine-ui/
+├── docs/                    # Documentation
+├── src/
+│   ├── atoms/              # Shadcn components (base layer)
+│   ├── molecules/          # Composed components
+│   │   ├── creator-discovery/  # Domain-specific
+│   │   └── generic/            # Reusable
+│   ├── lib/                # Utilities
+│   ├── types/              # Shared types
+│   └── index.ts
+├── config/                 # Tailwind preset, tsconfig
+└── package.json
+```
+
+---
+
+## Component Hierarchy
+
+### **Atoms** (Shadcn Components)
+
+Base UI primitives from shadcn/ui:
+
+- Button, Input, Label, Checkbox, Select, Slider, Card, etc.
+- Fully accessible (Radix UI primitives)
+- Styled with Tailwind CSS
+
+### **Molecules** (Composed Components)
+
+Built by combining atoms:
+
+- **Creator Discovery**: CampaignSeedCard, SearchSpecCard, MCQRenderer
+- **Generic**: EditableField, FormCard, ActionButton
+
+### **Organisms** (Complex Sections)
+
+Full UI sections (future):
+
+- CreatorSearchWorkflow, CampaignBuilder, etc.
+
+---
+
+## Quick Start
+
+### 1. Install Dependencies
+
+```bash
+cd @pxengine-ui
+npm install
+```
+
+### 2. Copy a Component
+
+```bash
+# Copy shadcn button atom
+npx shadcn-ui@latest add button
+
+# Copy a molecule (future CLI)
+npx pxengine-ui add campaign-seed-card
+```
+
+### 3. Use in Your App
+
+```tsx
+import { CampaignSeedCard } from "@/components/pxengine-ui/molecules/CampaignSeedCard";
+
+<CampaignSeedCard
+  data={campaignSeed}
+  sessionId="abc123"
+  onProceed={() => handleProceed()}
+/>;
+```
+
+---
+
+## Distribution Strategy
+
+**Shadcn-Style Copy-Paste**:
+
+1. Components live in `@pxengine-ui/src/`
+2. Copy components into `client/components/pxengine-ui/` when needed
+3. Modify copied components freely
+4. Library serves as source of truth for updates
+
+**Benefits**:
+
+- Full ownership and customization
+- No version conflicts
+- Tree-shaking (only copy what you need)
+- Easy to debug
+
+---
+
+## Theme System
+
+The library inherits your existing theme:
+
+- Uses CSS variables from client
+- Tailwind preset extends client config
+- Dark mode support via `class` strategy
+
+---
+
+## Component Examples
+
+### CampaignSeedCard
+
+```tsx
+<CampaignSeedCard
+  data={{
+    brand: "Nike",
+    objective: "Brand Awareness",
+    budget_hint: { min: 50000, max: 100000 },
+  }}
+  sessionId="abc123"
+  onProceed={() => handleProceed()}
+  isLatestMessage={true}
+/>
+```
+
+### EditableField
+
+```tsx
+<EditableField
+  label="Brand Name"
+  value={brandName}
+  type="text"
+  isEditing={isEditing}
+  onSave={(newValue) => handleSave(newValue)}
+/>
+```
+
+---
+
+## Tech Stack
+
+- **React** 18+ with TypeScript
+- **Shadcn/ui** for base components (atoms)
+- **Radix UI** for accessibility primitives
+- **Tailwind CSS** for styling
+- **Framer Motion** for animations (optional)
+
+---

package/config/tailwind-preset.js

@@ -0,0 +1,106 @@
+/**
+ * @pxengine/ui Tailwind Preset
+ * 
+ * This file allows consumers of the @pxengine/ui library to easily inherit 
+ * the custom theme, colors, and animations required for the components.
+ * 
+ * Usage in tailwind.config.js:
+ * presets: [require("@pxengine/ui/config/tailwind-preset")]
+ */
+
+module.exports = {
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px",
+      },
+    },
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "system-ui", "sans-serif"],
+        noto: ["Noto Sans", "system-ui", "sans-serif"],
+        grotesk: ["Space Grotesk", "system-ui", "sans-serif"],
+        roboto: ["Roboto", "system-ui", "sans-serif"],
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        // Custom PXEngine colors
+        gray25: "var(--gray25)",
+        gray50: "var(--gray50)",
+        gray100: "var(--gray100)",
+        gray200: "var(--gray200)",
+        gray300: "var(--gray300)",
+        gray400: "var(--gray400)",
+        gray500: "var(--gray500)",
+        gray600: "var(--gray600)",
+        gray700: "var(--gray700)",
+        gray800: "var(--gray800)",
+        gray900: "var(--gray900)",
+        purple100: "var(--purple100)",
+        purple200: "var(--purple200)",
+        purple500: "var(--purple500)",
+        purpleText: "var(--purple-text)",
+        purple50: "var(--purple50)",
+        purple20: "var(--purple20)",
+        purpleBorder: "var(--purple-border)",
+        purpleLight: "var(--purpleLight)",
+        purpleText1: "var(--purple-text-1)",
+        purpleText2: "var(--purple-text-2)",
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [require("tailwindcss-animate")],
+};