From ec8d3ff34ee78193ed33139761e6294bf4bdb5a9 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 14:09:16 +0000
Subject: [PATCH 1/4] Initial plan


From 25d84af3135379c218a12752a03e1fd5bec83c39 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 14:18:12 +0000
Subject: [PATCH 2/4] Add core package and initial component category prompts

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .github/prompts/README.md                     | 213 ++++++
 .../prompts/components/basic-components.md    | 277 +++++++
 .../prompts/components/layout-components.md   | 441 +++++++++++
 .../core-packages/components-package.md       | 548 ++++++++++++++
 .github/prompts/core-packages/core-package.md | 694 ++++++++++++++++++
 .../prompts/core-packages/react-package.md    | 571 ++++++++++++++
 .../prompts/core-packages/types-package.md    | 577 +++++++++++++++
 7 files changed, 3321 insertions(+)
 create mode 100644 .github/prompts/README.md
 create mode 100644 .github/prompts/components/basic-components.md
 create mode 100644 .github/prompts/components/layout-components.md
 create mode 100644 .github/prompts/core-packages/components-package.md
 create mode 100644 .github/prompts/core-packages/core-package.md
 create mode 100644 .github/prompts/core-packages/react-package.md
 create mode 100644 .github/prompts/core-packages/types-package.md

diff --git a/.github/prompts/README.md b/.github/prompts/README.md
new file mode 100644
index 0000000..f16a4b7
--- /dev/null
+++ b/.github/prompts/README.md
@@ -0,0 +1,213 @@
+# ObjectUI AI Development Prompts
+
+This directory contains specialized AI prompts for developing and optimizing each core component of the ObjectUI system.
+
+## Purpose
+
+These prompts serve as system instructions for AI agents (like GitHub Copilot, ChatGPT, Claude, etc.) when working on specific parts of the ObjectUI codebase. Each prompt contains:
+
+- **Role & Context**: What the AI should act as and understand
+- **Technical Constraints**: Stack-specific rules and requirements
+- **Architecture Guidelines**: How the component fits in the system
+- **Development Rules**: Best practices and patterns to follow
+- **Testing Requirements**: What and how to test
+- **Examples**: Common patterns and usage
+
+## Directory Structure
+
+```
+.github/prompts/
+├── README.md                           # This file
+├── core-packages/                      # Core system packages
+│   ├── types-package.md               # @object-ui/types - Protocol definitions
+│   ├── core-package.md                # @object-ui/core - Engine logic
+│   ├── react-package.md               # @object-ui/react - Runtime bindings
+│   └── components-package.md          # @object-ui/components - UI library
+├── components/                         # Component category prompts
+│   ├── basic-components.md            # Basic primitives (text, image, icon)
+│   ├── layout-components.md           # Layout system (grid, flex, container)
+│   ├── form-components.md             # Form controls (input, select, checkbox)
+│   ├── data-display-components.md     # Data visualization (list, table, badge)
+│   ├── feedback-components.md         # User feedback (loading, progress, toast)
+│   ├── overlay-components.md          # Overlays (dialog, popover, tooltip)
+│   ├── navigation-components.md       # Navigation (menu, tabs, breadcrumb)
+│   ├── disclosure-components.md       # Disclosure (accordion, collapsible)
+│   └── complex-components.md          # Complex patterns (CRUD, calendar)
+├── plugins/                            # Plugin development
+│   └── plugin-development.md          # Guidelines for creating plugins
+└── tools/                              # Developer tools
+    ├── designer.md                    # Visual designer
+    ├── cli.md                         # CLI tool
+    └── runner.md                      # App runner
+
+```
+
+## How to Use
+
+### For AI Agents
+
+When working on a specific component or package:
+
+1. **Identify** the relevant prompt file based on the task
+2. **Load** the prompt as your system instruction
+3. **Follow** the guidelines, constraints, and patterns defined
+4. **Reference** the examples for common patterns
+
+### For Developers
+
+When requesting AI assistance:
+
+1. **Point** the AI to the relevant prompt file
+2. **Provide** context about what you're trying to achieve
+3. **Review** the AI's output against the prompt's requirements
+
+### Example Usage
+
+```bash
+# Using with GitHub Copilot Chat
+"Use the prompt from .github/prompts/core-packages/types-package.md to help me add a new component schema"
+
+# Using with ChatGPT/Claude
+"I need to develop a new form component. Here's the development guide: [paste content from .github/prompts/components/form-components.md]"
+```
+
+## Prompt Categories
+
+### 1. Core Packages (Foundation Layer)
+
+These prompts govern the fundamental building blocks:
+
+- **types**: Pure TypeScript interfaces, zero dependencies
+- **core**: Schema validation, registry, expression engine
+- **react**: React bindings and SchemaRenderer
+- **components**: Shadcn/Tailwind implementation
+
+### 2. Component Categories (UI Layer)
+
+Organized by UI purpose and patterns:
+
+- **basic**: Primitive elements (text, image, icon, separator)
+- **layout**: Spatial organization (grid, flex, stack, container)
+- **form**: User input (input, select, checkbox, radio, switch)
+- **data-display**: Information presentation (list, table, badge, avatar)
+- **feedback**: System state (loading, progress, skeleton, toast)
+- **overlay**: Layered content (dialog, popover, dropdown, tooltip)
+- **navigation**: Movement (menu, tabs, breadcrumb, pagination)
+- **disclosure**: Show/hide content (accordion, collapsible, tabs)
+- **complex**: Advanced patterns (CRUD, calendar, kanban, charts)
+
+### 3. Plugins (Extension Layer)
+
+Guidelines for extending ObjectUI:
+
+- Plugin architecture and patterns
+- Lazy loading and code splitting
+- Integration with core system
+- Examples: charts, editor, kanban, markdown
+
+### 4. Tools (Developer Experience)
+
+For building ObjectUI tooling:
+
+- **designer**: Visual drag-and-drop editor
+- **cli**: Command-line interface
+- **runner**: Development server
+
+## Key Principles (Applies to All Prompts)
+
+### 1. JSON Schema-First Design
+
+Every component must be fully definable via JSON schema:
+
+```json
+{
+  "type": "button",
+  "label": "Click Me",
+  "variant": "primary",
+  "onClick": { "type": "action", "name": "submit" }
+}
+```
+
+### 2. Zero Runtime Overhead
+
+- No inline styles (`style={{}}`)
+- No CSS-in-JS libraries
+- Tailwind classes only (via `cn()` utility)
+- Use `class-variance-authority` for variants
+
+### 3. Stateless Components
+
+Components are controlled by schema props:
+
+```tsx
+// ✅ Good: Controlled by props
+export function Button({ schema, data }: RendererProps<ButtonSchema>) {
+  return <button className={cn(buttonVariants({ variant: schema.variant }))} />
+}
+
+// ❌ Bad: Internal state
+export function Button() {
+  const [clicked, setClicked] = useState(false)
+}
+```
+
+### 4. Separation of Concerns
+
+```
+types (Protocol) → core (Logic) → react (Bindings) → components (UI)
+```
+
+No backwards dependencies allowed!
+
+### 5. TypeScript Strict Mode
+
+- All code must pass `tsc --strict`
+- No `any` types without justification
+- Comprehensive interface definitions
+
+### 6. Accessibility First
+
+- WCAG 2.1 AA minimum
+- Keyboard navigation
+- Screen reader support
+- ARIA attributes
+- Focus management
+
+### 7. Testing Requirements
+
+- Unit tests for logic (core)
+- Integration tests for renderers (components)
+- Type tests for schemas (types)
+- Visual regression tests (Storybook)
+
+## Maintenance
+
+These prompts should be updated when:
+
+- Architecture patterns change
+- New constraints are identified
+- Common mistakes are discovered
+- Best practices evolve
+
+## Contributing
+
+When adding or updating prompts:
+
+1. Follow the existing structure
+2. Include concrete examples
+3. Specify constraints clearly
+4. Link to relevant documentation
+5. Test the prompt with an AI agent
+
+## Related Documentation
+
+- [Architecture Overview](../../docs/spec/architecture.md)
+- [Component System](../../docs/spec/component.md)
+- [Protocol Specifications](../../docs/protocol/overview.md)
+- [Contributing Guide](../../CONTRIBUTING.md)
+
+---
+
+**Version**: 1.0.0  
+**Last Updated**: 2026-01-21  
+**Maintainer**: ObjectUI Team
diff --git a/.github/prompts/components/basic-components.md b/.github/prompts/components/basic-components.md
new file mode 100644
index 0000000..4c59129
--- /dev/null
+++ b/.github/prompts/components/basic-components.md
@@ -0,0 +1,277 @@
+# AI Prompt: Basic Components
+
+## Overview
+
+Basic components are the **primitive building blocks** of the ObjectUI system. They represent fundamental HTML elements like text, images, icons, and dividers - wrapped in schema-driven interfaces.
+
+**Category**: `basic`  
+**Examples**: text, image, icon, div, span, separator, html  
+**Complexity**: ⭐ Simple  
+**Package**: `@object-ui/components/src/renderers/basic/`
+
+## Purpose
+
+Basic components serve as:
+1. **Foundational elements** for complex layouts
+2. **Content display** primitives (text, images)
+3. **Structural elements** (div, span, separator)
+4. **Visual decorations** (icons, lines)
+
+## Component List
+
+### Text Component
+Display plain or formatted text.
+
+**Schema**:
+```json
+{
+  "type": "text",
+  "content": "Hello World",
+  "variant": "body" | "heading" | "caption",
+  "className": "text-lg font-bold"
+}
+```
+
+**Implementation**:
+```tsx
+export function TextRenderer({ schema }: RendererProps<TextSchema>) {
+  return (
+    <span className={cn(textVariants({ variant: schema.variant }), schema.className)}>
+      {schema.content}
+    </span>
+  );
+}
+
+const textVariants = cva('', {
+  variants: {
+    variant: {
+      body: 'text-base',
+      heading: 'text-2xl font-bold',
+      caption: 'text-sm text-muted-foreground'
+    }
+  }
+});
+```
+
+### Image Component
+Display images with responsive sizing and loading states.
+
+**Schema**:
+```json
+{
+  "type": "image",
+  "src": "https://example.com/image.jpg",
+  "alt": "Description",
+  "width": 300,
+  "height": 200,
+  "className": "rounded-lg"
+}
+```
+
+**Implementation**:
+```tsx
+export function ImageRenderer({ schema }: RendererProps<ImageSchema>) {
+  return (
+    <img
+      src={schema.src}
+      alt={schema.alt || ''}
+      width={schema.width}
+      height={schema.height}
+      loading="lazy"
+      className={cn('object-cover', schema.className)}
+    />
+  );
+}
+```
+
+### Icon Component
+Display icons using Lucide React.
+
+**Schema**:
+```json
+{
+  "type": "icon",
+  "name": "Check",
+  "size": 24,
+  "className": "text-green-500"
+}
+```
+
+**Implementation**:
+```tsx
+import * as Icons from 'lucide-react';
+
+export function IconRenderer({ schema }: RendererProps<IconSchema>) {
+  const IconComponent = Icons[schema.name as keyof typeof Icons] as any;
+  
+  if (!IconComponent) {
+    console.warn(`Icon not found: ${schema.name}`);
+    return null;
+  }
+
+  return (
+    <IconComponent
+      size={schema.size || 24}
+      className={schema.className}
+    />
+  );
+}
+```
+
+### Div Component
+Generic container element.
+
+**Schema**:
+```json
+{
+  "type": "div",
+  "className": "p-4 bg-gray-100 rounded",
+  "children": [...]
+}
+```
+
+**Implementation**:
+```tsx
+export function DivRenderer({ schema }: RendererProps<DivSchema>) {
+  return (
+    <div className={schema.className}>
+      {schema.children?.map((child, index) => (
+        <SchemaRenderer key={child.id || index} schema={child} />
+      ))}
+    </div>
+  );
+}
+```
+
+### Separator Component
+Visual divider line.
+
+**Schema**:
+```json
+{
+  "type": "separator",
+  "orientation": "horizontal" | "vertical",
+  "className": "my-4"
+}
+```
+
+**Implementation**:
+```tsx
+import { Separator as ShadcnSeparator } from '@/ui/separator';
+
+export function SeparatorRenderer({ schema }: RendererProps<SeparatorSchema>) {
+  return (
+    <ShadcnSeparator
+      orientation={schema.orientation || 'horizontal'}
+      className={schema.className}
+    />
+  );
+}
+```
+
+## Development Guidelines
+
+### Keep It Simple
+Basic components should be straightforward wrappers around HTML elements:
+
+```tsx
+// ✅ Good: Simple wrapper
+export function TextRenderer({ schema }: RendererProps<TextSchema>) {
+  return <span className={schema.className}>{schema.content}</span>;
+}
+
+// ❌ Bad: Over-engineered
+export function TextRenderer({ schema }: RendererProps<TextSchema>) {
+  const [formatted, setFormatted] = useState('');
+  useEffect(() => {
+    // Complex formatting logic...
+  }, [schema.content]);
+  return <span>{formatted}</span>;
+}
+```
+
+### No Business Logic
+Basic components display data, they don't transform it:
+
+```tsx
+// ❌ Bad: Business logic
+export function TextRenderer({ schema }: RendererProps<TextSchema>) {
+  const formatted = formatCurrency(schema.content);  // Don't do this
+  return <span>{formatted}</span>;
+}
+
+// ✅ Good: Display as-is
+export function TextRenderer({ schema }: RendererProps<TextSchema>) {
+  return <span>{schema.content}</span>;
+}
+```
+
+### Accessibility
+
+```tsx
+// ✅ Good: Proper alt text
+<img src={schema.src} alt={schema.alt || 'Image'} />
+
+// ❌ Bad: Missing alt
+<img src={schema.src} />
+
+// ✅ Good: Semantic HTML
+<h1 className={schema.className}>{schema.content}</h1>
+
+// ❌ Bad: Div soup
+<div className="text-2xl font-bold">{schema.content}</div>
+```
+
+## Testing
+
+```tsx
+describe('TextRenderer', () => {
+  it('renders text content', () => {
+    const schema = { type: 'text', content: 'Hello' };
+    render(<SchemaRenderer schema={schema} />);
+    expect(screen.getByText('Hello')).toBeInTheDocument();
+  });
+
+  it('applies className', () => {
+    const schema = { type: 'text', content: 'Hello', className: 'font-bold' };
+    render(<SchemaRenderer schema={schema} />);
+    expect(screen.getByText('Hello')).toHaveClass('font-bold');
+  });
+});
+```
+
+## Common Patterns
+
+### With Expression Support
+```tsx
+export function TextRenderer({ schema }: RendererProps<TextSchema>) {
+  const content = useExpression(schema.content, {}, '');
+  return <span className={schema.className}>{content}</span>;
+}
+```
+
+### With Children
+```tsx
+export function DivRenderer({ schema }: RendererProps<DivSchema>) {
+  return (
+    <div className={schema.className}>
+      {schema.children?.map((child, i) => (
+        <SchemaRenderer key={child.id || i} schema={child} />
+      ))}
+    </div>
+  );
+}
+```
+
+## Checklist
+
+- [ ] Simple, no complex logic
+- [ ] Accessible (alt text, ARIA)
+- [ ] Supports className override
+- [ ] Handles missing data gracefully
+- [ ] Tests added
+- [ ] Registered in index.ts
+
+---
+
+**Principle**: Keep it **simple**, **semantic**, and **accessible**.
diff --git a/.github/prompts/components/layout-components.md b/.github/prompts/components/layout-components.md
new file mode 100644
index 0000000..093d869
--- /dev/null
+++ b/.github/prompts/components/layout-components.md
@@ -0,0 +1,441 @@
+# AI Prompt: Layout Components
+
+## Overview
+
+Layout components control the **spatial organization** of UI elements. They implement responsive grid systems, flexbox layouts, and container structures using Tailwind's utility classes.
+
+**Category**: `layout`  
+**Examples**: grid, flex, stack, container, card, section  
+**Complexity**: ⭐⭐ Moderate  
+**Package**: `@object-ui/components/src/renderers/layout/`
+
+## Purpose
+
+Layout components:
+1. **Organize content** spatially (grids, flex containers)
+2. **Create responsive layouts** (mobile, tablet, desktop)
+3. **Group related elements** (cards, sections)
+4. **Control spacing** (gaps, padding, margins)
+
+## Core Layout Components
+
+### Grid Component
+CSS Grid layout with responsive columns.
+
+**Schema**:
+```json
+{
+  "type": "grid",
+  "columns": 3,
+  "gap": 4,
+  "items": [
+    { "type": "card", "title": "Item 1" },
+    { "type": "card", "title": "Item 2" }
+  ]
+}
+```
+
+**Responsive Schema**:
+```json
+{
+  "type": "grid",
+  "columns": { "sm": 1, "md": 2, "lg": 3 },
+  "gap": 4,
+  "items": [...]
+}
+```
+
+**Implementation**:
+```tsx
+export function GridRenderer({ schema }: RendererProps<GridSchema>) {
+  const gridClasses = cn(
+    'grid',
+    getGridColumns(schema.columns),
+    getGap(schema.gap),
+    schema.className
+  );
+
+  return (
+    <div className={gridClasses}>
+      {schema.items?.map((item, index) => (
+        <SchemaRenderer key={item.id || index} schema={item} />
+      ))}
+    </div>
+  );
+}
+
+function getGridColumns(columns: GridSchema['columns']): string {
+  if (typeof columns === 'number') {
+    return `grid-cols-${columns}`;
+  }
+  
+  const classes: string[] = [];
+  if (columns?.sm) classes.push(`grid-cols-${columns.sm}`);
+  if (columns?.md) classes.push(`md:grid-cols-${columns.md}`);
+  if (columns?.lg) classes.push(`lg:grid-cols-${columns.lg}`);
+  return classes.join(' ');
+}
+
+function getGap(gap?: number | string): string {
+  if (typeof gap === 'number') return `gap-${gap}`;
+  return gap || '';
+}
+```
+
+### Flex Component
+Flexbox layout with direction and alignment controls.
+
+**Schema**:
+```json
+{
+  "type": "flex",
+  "direction": "row" | "column",
+  "justify": "start" | "center" | "between" | "around",
+  "align": "start" | "center" | "end" | "stretch",
+  "gap": 4,
+  "wrap": true,
+  "children": [...]
+}
+```
+
+**Implementation**:
+```tsx
+export function FlexRenderer({ schema }: RendererProps<FlexSchema>) {
+  const flexClasses = cn(
+    'flex',
+    getFlexDirection(schema.direction),
+    getJustify(schema.justify),
+    getAlign(schema.align),
+    schema.wrap && 'flex-wrap',
+    getGap(schema.gap),
+    schema.className
+  );
+
+  return (
+    <div className={flexClasses}>
+      {schema.children?.map((child, index) => (
+        <SchemaRenderer key={child.id || index} schema={child} />
+      ))}
+    </div>
+  );
+}
+
+function getFlexDirection(direction?: FlexSchema['direction']): string {
+  const map = {
+    row: 'flex-row',
+    column: 'flex-col',
+    'row-reverse': 'flex-row-reverse',
+    'column-reverse': 'flex-col-reverse'
+  };
+  return map[direction || 'row'];
+}
+
+function getJustify(justify?: FlexSchema['justify']): string {
+  const map = {
+    start: 'justify-start',
+    center: 'justify-center',
+    end: 'justify-end',
+    between: 'justify-between',
+    around: 'justify-around',
+    evenly: 'justify-evenly'
+  };
+  return map[justify || 'start'];
+}
+
+function getAlign(align?: FlexSchema['align']): string {
+  const map = {
+    start: 'items-start',
+    center: 'items-center',
+    end: 'items-end',
+    stretch: 'items-stretch',
+    baseline: 'items-baseline'
+  };
+  return map[align || 'start'];
+}
+```
+
+### Stack Component
+Vertical or horizontal stack with consistent spacing.
+
+**Schema**:
+```json
+{
+  "type": "stack",
+  "direction": "vertical" | "horizontal",
+  "spacing": 4,
+  "children": [...]
+}
+```
+
+**Implementation**:
+```tsx
+export function StackRenderer({ schema }: RendererProps<StackSchema>) {
+  const isVertical = schema.direction !== 'horizontal';
+  
+  const stackClasses = cn(
+    'flex',
+    isVertical ? 'flex-col' : 'flex-row',
+    getGap(schema.spacing),
+    schema.className
+  );
+
+  return (
+    <div className={stackClasses}>
+      {schema.children?.map((child, index) => (
+        <SchemaRenderer key={child.id || index} schema={child} />
+      ))}
+    </div>
+  );
+}
+```
+
+### Container Component
+Centered container with max-width.
+
+**Schema**:
+```json
+{
+  "type": "container",
+  "maxWidth": "lg" | "xl" | "2xl",
+  "padding": 4,
+  "children": [...]
+}
+```
+
+**Implementation**:
+```tsx
+export function ContainerRenderer({ schema }: RendererProps<ContainerSchema>) {
+  const containerClasses = cn(
+    'container mx-auto',
+    getMaxWidth(schema.maxWidth),
+    getPadding(schema.padding),
+    schema.className
+  );
+
+  return (
+    <div className={containerClasses}>
+      {schema.children?.map((child, index) => (
+        <SchemaRenderer key={child.id || index} schema={child} />
+      ))}
+    </div>
+  );
+}
+
+function getMaxWidth(maxWidth?: ContainerSchema['maxWidth']): string {
+  const map = {
+    sm: 'max-w-sm',
+    md: 'max-w-md',
+    lg: 'max-w-lg',
+    xl: 'max-w-xl',
+    '2xl': 'max-w-2xl',
+    '4xl': 'max-w-4xl',
+    '6xl': 'max-w-6xl',
+    full: 'max-w-full'
+  };
+  return map[maxWidth || 'lg'];
+}
+```
+
+### Card Component
+Card container with header, body, and footer.
+
+**Schema**:
+```json
+{
+  "type": "card",
+  "title": "Card Title",
+  "description": "Card description",
+  "body": { "type": "div", "children": [...] },
+  "footer": { "type": "div", "children": [...] }
+}
+```
+
+**Implementation**:
+```tsx
+import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from '@/ui/card';
+
+export function CardRenderer({ schema }: RendererProps<CardSchema>) {
+  return (
+    <Card className={schema.className}>
+      {(schema.title || schema.description) && (
+        <CardHeader>
+          {schema.title && <CardTitle>{schema.title}</CardTitle>}
+          {schema.description && <CardDescription>{schema.description}</CardDescription>}
+        </CardHeader>
+      )}
+      
+      {schema.body && (
+        <CardContent>
+          <SchemaRenderer schema={schema.body} />
+        </CardContent>
+      )}
+      
+      {schema.footer && (
+        <CardFooter>
+          <SchemaRenderer schema={schema.footer} />
+        </CardFooter>
+      )}
+    </Card>
+  );
+}
+```
+
+## Development Guidelines
+
+### Responsive Design
+
+Always support responsive breakpoints:
+
+```tsx
+// ✅ Good: Responsive grid
+{
+  "columns": { "sm": 1, "md": 2, "lg": 3 }
+}
+
+// ✅ Good: Responsive gap
+{
+  "gap": { "sm": 2, "md": 4, "lg": 6 }
+}
+```
+
+### Flexible Spacing
+
+Use Tailwind spacing scale (0-96):
+
+```tsx
+// ✅ Good: Tailwind scale
+const gap = schema.gap || 4;  // 1rem
+const padding = schema.padding || 4;
+
+// ❌ Bad: Pixel values
+const gap = schema.gap || '16px';
+```
+
+### Nested Layouts
+
+Support nested layout components:
+
+```tsx
+{
+  "type": "grid",
+  "columns": 2,
+  "items": [
+    {
+      "type": "flex",
+      "direction": "column",
+      "children": [...]
+    }
+  ]
+}
+```
+
+## Testing
+
+```tsx
+describe('GridRenderer', () => {
+  it('renders grid with correct columns', () => {
+    const schema = {
+      type: 'grid',
+      columns: 3,
+      items: [
+        { type: 'text', content: 'Item 1' },
+        { type: 'text', content: 'Item 2' }
+      ]
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    const grid = screen.getByText('Item 1').parentElement;
+    expect(grid).toHaveClass('grid', 'grid-cols-3');
+  });
+
+  it('renders responsive grid', () => {
+    const schema = {
+      type: 'grid',
+      columns: { sm: 1, md: 2, lg: 3 },
+      items: [...]
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    const grid = screen.getByText('Item 1').parentElement;
+    expect(grid).toHaveClass('grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-3');
+  });
+});
+```
+
+## Common Patterns
+
+### Auto-fit Grid
+
+```json
+{
+  "type": "grid",
+  "className": "grid-cols-[repeat(auto-fit,minmax(250px,1fr))]",
+  "gap": 4,
+  "items": [...]
+}
+```
+
+### Centered Content
+
+```json
+{
+  "type": "flex",
+  "justify": "center",
+  "align": "center",
+  "className": "min-h-screen",
+  "children": [...]
+}
+```
+
+### Sidebar Layout
+
+```json
+{
+  "type": "grid",
+  "className": "grid-cols-[250px_1fr]",
+  "gap": 0,
+  "items": [
+    { "type": "div", "className": "bg-gray-100", "children": [...] },
+    { "type": "div", "children": [...] }
+  ]
+}
+```
+
+## Performance
+
+### Avoid Deep Nesting
+
+```tsx
+// ❌ Bad: Too many nested layouts
+<Grid>
+  <Flex>
+    <Stack>
+      <Container>
+        <Flex>
+          <Content />
+        </Flex>
+      </Container>
+    </Stack>
+  </Flex>
+</Grid>
+
+// ✅ Good: Flatten when possible
+<Grid>
+  <Content />
+</Grid>
+```
+
+## Checklist
+
+- [ ] Responsive breakpoints supported
+- [ ] Tailwind spacing scale used
+- [ ] Supports nested layouts
+- [ ] Tests added
+- [ ] Accessible structure
+- [ ] Performance optimized
+
+---
+
+**Principle**: Build **flexible**, **responsive** layouts with **Tailwind utilities**.
diff --git a/.github/prompts/core-packages/components-package.md b/.github/prompts/core-packages/components-package.md
new file mode 100644
index 0000000..7c5b18d
--- /dev/null
+++ b/.github/prompts/core-packages/components-package.md
@@ -0,0 +1,548 @@
+# AI Prompt: @object-ui/components Package
+
+## Role & Identity
+
+You are a **UI Component Engineer** for the `@object-ui/components` package in the ObjectUI system.
+
+This package is the **Presentation Layer** - it implements beautiful, accessible UI components using **Shadcn/UI + Tailwind CSS**. Every component is a **renderer** that transforms a JSON schema into pixel-perfect React components.
+
+**Your Mission**: Build production-ready, accessible UI components that are controlled entirely by JSON schemas.
+
+## Package Context
+
+**Package**: `@object-ui/components`  
+**Location**: `packages/components/`  
+**Description**: Standard UI component library built with Shadcn UI + Tailwind CSS  
+**Dependencies**: `@object-ui/core`, `@object-ui/react`, `@radix-ui/*`, `tailwindcss`  
+**Size Budget**: < 50KB gzipped (excluding lazy-loaded plugins)
+
+### Position in Architecture
+
+```
+┌─────────────────────────────────────┐
+│  @object-ui/types                   │  ← Type definitions
+├─────────────────────────────────────┤
+│  @object-ui/core                    │  ← Schema validation
+├─────────────────────────────────────┤
+│  @object-ui/react                   │  ← React bindings
+├─────────────────────────────────────┤
+│  @object-ui/components (YOU HERE)  │  ← Shadcn implementation
+└─────────────────────────────────────┘
+```
+
+**Critical Rule**: Components are **stateless** and **controlled by schema props**. All styling uses **Tailwind classes** via the `cn()` utility.
+
+## Technical Constraints
+
+### 🔴 STRICT REQUIREMENTS
+
+1. **Tailwind CSS Only**
+   ```tsx
+   // ❌ FORBIDDEN
+   <div style={{ color: 'red', padding: '16px' }}>...</div>
+   
+   // ✅ REQUIRED
+   <div className={cn('text-red-500 p-4', className)}>...</div>
+   ```
+
+2. **Use class-variance-authority (cva)**
+   ```tsx
+   import { cva, type VariantProps } from 'class-variance-authority';
+
+   const buttonVariants = cva(
+     'inline-flex items-center justify-center rounded-md text-sm font-medium',
+     {
+       variants: {
+         variant: {
+           default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+           destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+           outline: 'border border-input bg-background hover:bg-accent',
+         },
+         size: {
+           default: 'h-10 px-4 py-2',
+           sm: 'h-9 rounded-md px-3',
+           lg: 'h-11 rounded-md px-8',
+         }
+       },
+       defaultVariants: {
+         variant: 'default',
+         size: 'default',
+       }
+     }
+   );
+   ```
+
+3. **Use cn() for Class Merging**
+   ```tsx
+   import { cn } from '@/lib/utils';
+
+   export function Button({ schema, className }: RendererProps<ButtonSchema>) {
+     return (
+       <button
+         className={cn(
+           buttonVariants({ variant: schema.variant, size: schema.size }),
+           schema.className,  // Schema classes
+           className          // Component override
+         )}
+       >
+         {schema.label}
+       </button>
+     );
+   }
+   ```
+
+4. **Stateless Components**
+   ```tsx
+   // ❌ BAD: Internal state
+   export function Button({ schema }: RendererProps<ButtonSchema>) {
+     const [clicked, setClicked] = useState(false);
+     return <button onClick={() => setClicked(true)} />;
+   }
+
+   // ✅ GOOD: Controlled by schema
+   export function Button({ schema }: RendererProps<ButtonSchema>) {
+     const handleAction = useAction();
+     return (
+       <button 
+         onClick={() => schema.onClick && handleAction(schema.onClick)}
+       >
+         {schema.label}
+       </button>
+     );
+   }
+   ```
+
+5. **Shadcn/Radix UI Primitives**
+   ```tsx
+   // Use Shadcn components from ui/ directory
+   import { Button as ShadcnButton } from '@/ui/button';
+   import { Input as ShadcnInput } from '@/ui/input';
+   ```
+
+### File Organization
+
+```
+packages/components/src/
+├── index.ts                       # Main exports + registerDefaultRenderers()
+├── lib/
+│   └── utils.ts                  # cn() utility
+├── ui/                           # Shadcn base components
+│   ├── button.tsx
+│   ├── input.tsx
+│   ├── select.tsx
+│   └── ...
+├── renderers/                    # Schema renderers (organized by category)
+│   ├── basic/
+│   │   ├── text.tsx
+│   │   ├── image.tsx
+│   │   ├── icon.tsx
+│   │   ├── div.tsx
+│   │   └── separator.tsx
+│   ├── layout/
+│   │   ├── grid.tsx
+│   │   ├── flex.tsx
+│   │   ├── stack.tsx
+│   │   └── container.tsx
+│   ├── form/
+│   │   ├── input.tsx
+│   │   ├── select.tsx
+│   │   ├── checkbox.tsx
+│   │   └── button.tsx
+│   ├── data-display/
+│   │   ├── list.tsx
+│   │   ├── badge.tsx
+│   │   ├── avatar.tsx
+│   │   └── table.tsx
+│   ├── feedback/
+│   │   ├── loading.tsx
+│   │   ├── progress.tsx
+│   │   └── skeleton.tsx
+│   ├── overlay/
+│   │   ├── dialog.tsx
+│   │   ├── popover.tsx
+│   │   └── tooltip.tsx
+│   ├── navigation/
+│   │   ├── menu.tsx
+│   │   ├── tabs.tsx
+│   │   └── breadcrumb.tsx
+│   ├── disclosure/
+│   │   ├── accordion.tsx
+│   │   └── collapsible.tsx
+│   └── complex/
+│       ├── crud.tsx
+│       ├── calendar.tsx
+│       └── kanban.tsx
+└── __tests__/
+    ├── button.test.tsx
+    └── ...
+```
+
+## Component Development Pattern
+
+### 1. Basic Renderer Structure
+
+```tsx
+// packages/components/src/renderers/form/button.tsx
+import React from 'react';
+import { type RendererProps } from '@object-ui/react';
+import { type ButtonSchema } from '@object-ui/types';
+import { Button as ShadcnButton } from '@/ui/button';
+import { cn } from '@/lib/utils';
+import { useAction } from '@object-ui/react';
+
+/**
+ * Button renderer component
+ * 
+ * Renders a button from ButtonSchema.
+ * 
+ * @example
+ * {
+ *   "type": "button",
+ *   "label": "Submit",
+ *   "variant": "primary",
+ *   "onClick": { "type": "action", "name": "submit" }
+ * }
+ */
+export function ButtonRenderer({ 
+  schema, 
+  className 
+}: RendererProps<ButtonSchema>) {
+  const handleAction = useAction();
+
+  const handleClick = () => {
+    if (schema.onClick) {
+      handleAction(schema.onClick);
+    }
+  };
+
+  return (
+    <ShadcnButton
+      variant={schema.variant}
+      size={schema.size}
+      disabled={schema.disabled}
+      className={cn(schema.className, className)}
+      onClick={handleClick}
+    >
+      {schema.label}
+    </ShadcnButton>
+  );
+}
+```
+
+### 2. Layout Renderer
+
+```tsx
+// packages/components/src/renderers/layout/grid.tsx
+import React from 'react';
+import { type RendererProps, SchemaRenderer } from '@object-ui/react';
+import { type GridSchema } from '@object-ui/types';
+import { cn } from '@/lib/utils';
+
+/**
+ * Grid renderer component
+ * 
+ * @example
+ * {
+ *   "type": "grid",
+ *   "columns": 3,
+ *   "gap": 4,
+ *   "items": [
+ *     { "type": "card", "title": "Item 1" },
+ *     { "type": "card", "title": "Item 2" }
+ *   ]
+ * }
+ */
+export function GridRenderer({ 
+  schema, 
+  className 
+}: RendererProps<GridSchema>) {
+  const gridClasses = cn(
+    'grid',
+    getGridColumns(schema.columns),
+    getGap(schema.gap),
+    schema.className,
+    className
+  );
+
+  return (
+    <div className={gridClasses}>
+      {schema.items?.map((item, index) => (
+        <SchemaRenderer key={item.id || index} schema={item} />
+      ))}
+    </div>
+  );
+}
+
+function getGridColumns(cols: GridSchema['columns']): string {
+  if (typeof cols === 'number') {
+    return `grid-cols-${cols}`;
+  }
+  
+  // Responsive columns
+  const classes: string[] = [];
+  if (cols?.sm) classes.push(`sm:grid-cols-${cols.sm}`);
+  if (cols?.md) classes.push(`md:grid-cols-${cols.md}`);
+  if (cols?.lg) classes.push(`lg:grid-cols-${cols.lg}`);
+  return classes.join(' ');
+}
+
+function getGap(gap: GridSchema['gap']): string {
+  if (typeof gap === 'number') {
+    return `gap-${gap}`;
+  }
+  return gap || '';
+}
+```
+
+### 3. Form Field Renderer
+
+```tsx
+// packages/components/src/renderers/form/input.tsx
+import React from 'react';
+import { type RendererProps } from '@object-ui/react';
+import { type InputSchema } from '@object-ui/types';
+import { Input as ShadcnInput } from '@/ui/input';
+import { Label } from '@/ui/label';
+import { cn } from '@/lib/utils';
+import { useDataContext } from '@object-ui/react';
+
+/**
+ * Input renderer component
+ */
+export function InputRenderer({ 
+  schema, 
+  className 
+}: RendererProps<InputSchema>) {
+  const { data, setData } = useDataContext();
+  const value = data[schema.name] || schema.defaultValue || '';
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setData(schema.name, e.target.value);
+  };
+
+  return (
+    <div className={cn('space-y-2', className)}>
+      {schema.label && (
+        <Label htmlFor={schema.name}>
+          {schema.label}
+          {schema.required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      
+      <ShadcnInput
+        id={schema.name}
+        name={schema.name}
+        type={schema.inputType || 'text'}
+        placeholder={schema.placeholder}
+        value={value}
+        onChange={handleChange}
+        disabled={schema.disabled}
+        readOnly={schema.readOnly}
+        required={schema.required}
+        className={schema.className}
+      />
+      
+      {schema.description && (
+        <p className="text-sm text-muted-foreground">
+          {schema.description}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+### 4. Registration Function
+
+```tsx
+// packages/components/src/index.ts
+import { registerRenderer } from '@object-ui/core';
+import { ButtonRenderer } from './renderers/form/button';
+import { InputRenderer } from './renderers/form/input';
+import { GridRenderer } from './renderers/layout/grid';
+// ... import all renderers
+
+/**
+ * Register all default renderers
+ * 
+ * Call this once in your app's entry point.
+ */
+export function registerDefaultRenderers(): void {
+  // Basic components
+  registerRenderer('text', TextRenderer);
+  registerRenderer('image', ImageRenderer);
+  registerRenderer('icon', IconRenderer);
+  registerRenderer('div', DivRenderer);
+  registerRenderer('separator', SeparatorRenderer);
+  
+  // Layout components
+  registerRenderer('grid', GridRenderer);
+  registerRenderer('flex', FlexRenderer);
+  registerRenderer('stack', StackRenderer);
+  registerRenderer('container', ContainerRenderer);
+  
+  // Form components
+  registerRenderer('input', InputRenderer);
+  registerRenderer('select', SelectRenderer);
+  registerRenderer('checkbox', CheckboxRenderer);
+  registerRenderer('button', ButtonRenderer);
+  
+  // Data display
+  registerRenderer('list', ListRenderer);
+  registerRenderer('badge', BadgeRenderer);
+  registerRenderer('avatar', AvatarRenderer);
+  
+  // Feedback
+  registerRenderer('loading', LoadingRenderer);
+  registerRenderer('progress', ProgressRenderer);
+  registerRenderer('skeleton', SkeletonRenderer);
+  
+  // Overlay
+  registerRenderer('dialog', DialogRenderer);
+  registerRenderer('popover', PopoverRenderer);
+  registerRenderer('tooltip', TooltipRenderer);
+  
+  // Navigation
+  registerRenderer('menu', MenuRenderer);
+  registerRenderer('tabs', TabsRenderer);
+  registerRenderer('breadcrumb', BreadcrumbRenderer);
+  
+  // Disclosure
+  registerRenderer('accordion', AccordionRenderer);
+  registerRenderer('collapsible', CollapsibleRenderer);
+  
+  // Complex
+  registerRenderer('crud', CrudRenderer);
+  registerRenderer('calendar', CalendarRenderer);
+}
+
+// Export all renderers for custom registration
+export * from './renderers';
+```
+
+## Accessibility Requirements
+
+Every component MUST be accessible:
+
+1. **Keyboard Navigation**: Tab, Enter, Escape, Arrow keys
+2. **Screen Readers**: Proper ARIA labels and roles
+3. **Focus Management**: Visible focus indicators
+4. **Color Contrast**: WCAG AA minimum (4.5:1)
+
+```tsx
+// ✅ Good: Accessible button
+<button
+  aria-label={schema.ariaLabel || schema.label}
+  aria-disabled={schema.disabled}
+  className={cn(
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+    buttonVariants({ variant, size })
+  )}
+>
+  {schema.label}
+</button>
+```
+
+## Testing
+
+```tsx
+// packages/components/src/__tests__/button.test.tsx
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { SchemaRenderer } from '@object-ui/react';
+import { registerDefaultRenderers } from '../index';
+
+// Register renderers before tests
+registerDefaultRenderers();
+
+describe('ButtonRenderer', () => {
+  it('should render button with label', () => {
+    const schema = {
+      type: 'button',
+      label: 'Click me'
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('should call action on click', () => {
+    const onAction = vi.fn();
+    const schema = {
+      type: 'button',
+      label: 'Click me',
+      onClick: { type: 'action', name: 'test' }
+    };
+
+    render(<SchemaRenderer schema={schema} onAction={onAction} />);
+    
+    fireEvent.click(screen.getByText('Click me'));
+    
+    expect(onAction).toHaveBeenCalledWith({ type: 'action', name: 'test' });
+  });
+
+  it('should apply variant styles', () => {
+    const schema = {
+      type: 'button',
+      label: 'Primary',
+      variant: 'primary' as const
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    const button = screen.getByText('Primary');
+    expect(button).toHaveClass('bg-primary');
+  });
+});
+```
+
+## Common Pitfalls
+
+### ❌ Don't Use Inline Styles
+
+```tsx
+// ❌ BAD
+<div style={{ padding: '16px' }}>...</div>
+
+// ✅ GOOD
+<div className="p-4">...</div>
+```
+
+### ❌ Don't Store State Internally
+
+```tsx
+// ❌ BAD
+const [value, setValue] = useState('');
+
+// ✅ GOOD
+const { data, setData } = useDataContext();
+const value = data[schema.name];
+```
+
+## Build & Test
+
+```bash
+# Build
+pnpm build
+
+# Test
+pnpm test
+
+# Type check
+pnpm type-check
+```
+
+## Checklist
+
+- [ ] Uses Tailwind classes only
+- [ ] Uses cva for variants
+- [ ] Stateless (controlled by schema)
+- [ ] Accessible (WCAG AA)
+- [ ] Tests added
+- [ ] TypeScript types
+- [ ] Registered in index.ts
+
+---
+
+**Remember**: You build **beautiful** components that are **controlled** by schemas!
diff --git a/.github/prompts/core-packages/core-package.md b/.github/prompts/core-packages/core-package.md
new file mode 100644
index 0000000..b80c88a
--- /dev/null
+++ b/.github/prompts/core-packages/core-package.md
@@ -0,0 +1,694 @@
+# AI Prompt: @object-ui/core Package
+
+## Role & Identity
+
+You are a **Schema Engine Architect** for the `@object-ui/core` package in the ObjectUI system.
+
+This package is the **Logic Engine Layer** - it validates schemas, manages component registry, evaluates expressions, and handles data transformations. You write **pure JavaScript/TypeScript logic** with **zero React dependencies**.
+
+**Your Mission**: Build a robust, type-safe engine that transforms JSON schemas into executable UI logic without any UI rendering.
+
+## Package Context
+
+**Package**: `@object-ui/core`  
+**Location**: `packages/core/`  
+**Description**: Core logic, validation, and registry. Zero React dependencies.  
+**Dependencies**: `@object-ui/types`, `zod`, `lodash`  
+**Size Budget**: < 20KB gzipped
+
+### Position in Architecture
+
+```
+┌─────────────────────────────────────┐
+│  @object-ui/types                   │  ← Type definitions
+├─────────────────────────────────────┤
+│  @object-ui/core   (YOU ARE HERE)  │  ← Schema validation & logic
+├─────────────────────────────────────┤
+│  @object-ui/react                   │  ← React bindings
+├─────────────────────────────────────┤
+│  @object-ui/components              │  ← UI implementation
+└─────────────────────────────────────┘
+```
+
+**Critical Rule**: This package has **ZERO React dependencies**. It's pure logic that can run in any JavaScript environment (Node.js, browser, worker threads).
+
+## Technical Constraints
+
+### 🔴 STRICT REQUIREMENTS
+
+1. **Zero React Dependencies**
+   ```json
+   // package.json - NO React allowed
+   {
+     "dependencies": {
+       "@object-ui/types": "workspace:*",
+       "@objectstack/client": "^0.1.1",
+       "@objectstack/spec": "^0.1.2",
+       "lodash": "^4.17.21",
+       "zod": "^3.22.4"
+     }
+   }
+   ```
+
+2. **Pure Logic Only**
+   ```ts
+   // ✅ Good: Pure logic
+   export function validateSchema(schema: ComponentSchema): ValidationResult {
+     // Pure validation logic
+     return { valid: true };
+   }
+
+   // ❌ Bad: UI rendering
+   export function renderComponent(schema: ComponentSchema) {
+     return <div />  // NO! This belongs in @object-ui/react
+   }
+   ```
+
+3. **Environment Agnostic**
+   ```ts
+   // ✅ Good: Works everywhere
+   export function evaluateExpression(expr: string, data: any): any {
+     // Pure computation
+   }
+
+   // ❌ Bad: Browser-specific
+   export function evaluateExpression(expr: string, data: any): any {
+     return document.querySelector(expr);  // NO! Browser-only
+   }
+   ```
+
+### File Organization
+
+```
+packages/core/src/
+├── index.ts                    # Main export barrel
+├── registry/
+│   ├── ComponentRegistry.ts    # Component registry class
+│   ├── RendererRegistry.ts     # Renderer registry class
+│   └── index.ts               # Registry exports
+├── validation/
+│   ├── SchemaValidator.ts      # Schema validation logic
+│   ├── validators/             # Specific validators
+│   │   ├── component.ts
+│   │   ├── form.ts
+│   │   └── action.ts
+│   └── index.ts
+├── expression/
+│   ├── ExpressionEvaluator.ts  # Expression evaluation engine
+│   ├── parser.ts              # Expression parser
+│   └── index.ts
+├── data/
+│   ├── DataContext.ts          # Data context management
+│   ├── DataTransformer.ts      # Data transformation utilities
+│   └── index.ts
+├── utils/
+│   ├── merge.ts               # Deep merge utilities
+│   ├── clone.ts               # Clone utilities
+│   └── path.ts                # Object path utilities
+└── __tests__/
+    ├── registry.test.ts
+    ├── validation.test.ts
+    └── expression.test.ts
+```
+
+## Core Responsibilities
+
+### 1. Component Registry
+
+The registry maps component types to their metadata and renderers:
+
+```ts
+/**
+ * Component registry for managing component types
+ */
+export class ComponentRegistry {
+  private components = new Map<string, ComponentMetadata>();
+
+  /**
+   * Register a component type
+   */
+  register(type: string, metadata: ComponentMetadata): void {
+    if (this.components.has(type)) {
+      console.warn(`Component type "${type}" is already registered`);
+    }
+    this.components.set(type, metadata);
+  }
+
+  /**
+   * Get component metadata
+   */
+  get(type: string): ComponentMetadata | undefined {
+    return this.components.get(type);
+  }
+
+  /**
+   * Check if component type is registered
+   */
+  has(type: string): boolean {
+    return this.components.has(type);
+  }
+
+  /**
+   * Get all registered component types
+   */
+  getTypes(): string[] {
+    return Array.from(this.components.keys());
+  }
+
+  /**
+   * Clear all registrations
+   */
+  clear(): void {
+    this.components.clear();
+  }
+}
+
+export interface ComponentMetadata {
+  /** Component type */
+  type: string;
+  
+  /** Display name */
+  displayName: string;
+  
+  /** Component category */
+  category: 'basic' | 'layout' | 'form' | 'data-display' | 'feedback' | 'overlay' | 'navigation' | 'disclosure' | 'complex';
+  
+  /** Schema validator function */
+  validator?: (schema: unknown) => ValidationResult;
+  
+  /** Default schema values */
+  defaults?: Partial<ComponentSchema>;
+  
+  /** Component description */
+  description?: string;
+}
+
+export interface ValidationResult {
+  valid: boolean;
+  errors?: ValidationError[];
+}
+
+export interface ValidationError {
+  path: string;
+  message: string;
+  code?: string;
+}
+```
+
+### 2. Schema Validation
+
+Validate schemas against their type definitions:
+
+```ts
+/**
+ * Schema validator using Zod
+ */
+export class SchemaValidator {
+  /**
+   * Validate a component schema
+   */
+  validateComponent(schema: unknown): ValidationResult {
+    try {
+      // Basic structure validation
+      if (!schema || typeof schema !== 'object') {
+        return {
+          valid: false,
+          errors: [{ path: '', message: 'Schema must be an object' }]
+        };
+      }
+
+      const componentSchema = schema as ComponentSchema;
+
+      // Type field is required
+      if (!componentSchema.type) {
+        return {
+          valid: false,
+          errors: [{ path: 'type', message: 'Component type is required' }]
+        };
+      }
+
+      // Get component metadata
+      const metadata = registry.get(componentSchema.type);
+      if (!metadata) {
+        return {
+          valid: false,
+          errors: [{ 
+            path: 'type', 
+            message: `Unknown component type: ${componentSchema.type}` 
+          }]
+        };
+      }
+
+      // Run type-specific validator if available
+      if (metadata.validator) {
+        return metadata.validator(schema);
+      }
+
+      return { valid: true };
+    } catch (error) {
+      return {
+        valid: false,
+        errors: [{ path: '', message: error.message }]
+      };
+    }
+  }
+
+  /**
+   * Validate multiple schemas (recursive)
+   */
+  validateSchemaTree(schema: ComponentSchema): ValidationResult {
+    const result = this.validateComponent(schema);
+    
+    if (!result.valid) {
+      return result;
+    }
+
+    // Validate children recursively
+    if (schema.children && Array.isArray(schema.children)) {
+      for (let i = 0; i < schema.children.length; i++) {
+        const childResult = this.validateSchemaTree(schema.children[i]);
+        if (!childResult.valid) {
+          return {
+            valid: false,
+            errors: childResult.errors?.map(err => ({
+              ...err,
+              path: `children[${i}].${err.path}`
+            }))
+          };
+        }
+      }
+    }
+
+    return { valid: true };
+  }
+}
+```
+
+### 3. Expression Evaluation
+
+Evaluate template expressions in schemas:
+
+```ts
+/**
+ * Expression evaluator for dynamic values
+ * 
+ * Supports:
+ * - ${data.user.name} - Data binding
+ * - ${data.age > 18} - Boolean expressions
+ * - ${data.price * 1.2} - Math expressions
+ */
+export class ExpressionEvaluator {
+  /**
+   * Evaluate an expression with data context
+   */
+  evaluate(expression: string | boolean | number, data: any): any {
+    // Literal values
+    if (typeof expression !== 'string') {
+      return expression;
+    }
+
+    // Not an expression
+    if (!expression.startsWith('${') || !expression.endsWith('}')) {
+      return expression;
+    }
+
+    // Extract expression content
+    const expr = expression.slice(2, -1).trim();
+
+    try {
+      // Create safe evaluation context
+      const context = this.createContext(data);
+      
+      // Evaluate using Function constructor (safer than eval)
+      const fn = new Function(...Object.keys(context), `return ${expr}`);
+      return fn(...Object.values(context));
+    } catch (error) {
+      console.error(`Expression evaluation failed: ${expression}`, error);
+      return undefined;
+    }
+  }
+
+  /**
+   * Create evaluation context from data
+   */
+  private createContext(data: any): Record<string, any> {
+    return {
+      data: data || {},
+      // Add utility functions
+      Math,
+      Date,
+      String,
+      Number,
+      Boolean,
+      Array,
+      Object
+    };
+  }
+
+  /**
+   * Resolve object path (e.g., "user.profile.name")
+   */
+  resolvePath(obj: any, path: string): any {
+    return path.split('.').reduce((current, key) => current?.[key], obj);
+  }
+
+  /**
+   * Check if value contains expressions
+   */
+  hasExpression(value: unknown): boolean {
+    return typeof value === 'string' && 
+           value.includes('${') && 
+           value.includes('}');
+  }
+
+  /**
+   * Process object recursively, evaluating all expressions
+   */
+  processObject<T>(obj: T, data: any): T {
+    if (obj === null || obj === undefined) {
+      return obj;
+    }
+
+    if (Array.isArray(obj)) {
+      return obj.map(item => this.processObject(item, data)) as T;
+    }
+
+    if (typeof obj === 'object') {
+      const result: any = {};
+      for (const [key, value] of Object.entries(obj)) {
+        result[key] = this.processObject(value, data);
+      }
+      return result;
+    }
+
+    // Evaluate if it's an expression
+    if (this.hasExpression(obj)) {
+      return this.evaluate(obj as string, data);
+    }
+
+    return obj;
+  }
+}
+```
+
+### 4. Data Context Management
+
+```ts
+/**
+ * Data context for schema rendering
+ */
+export class DataContext {
+  private data: Map<string, any> = new Map();
+  private parent?: DataContext;
+
+  constructor(initialData?: Record<string, any>, parent?: DataContext) {
+    this.parent = parent;
+    if (initialData) {
+      Object.entries(initialData).forEach(([key, value]) => {
+        this.data.set(key, value);
+      });
+    }
+  }
+
+  /**
+   * Get data value by key
+   */
+  get(key: string): any {
+    if (this.data.has(key)) {
+      return this.data.get(key);
+    }
+    // Check parent context
+    return this.parent?.get(key);
+  }
+
+  /**
+   * Set data value
+   */
+  set(key: string, value: any): void {
+    this.data.set(key, value);
+  }
+
+  /**
+   * Merge data into context
+   */
+  merge(data: Record<string, any>): void {
+    Object.entries(data).forEach(([key, value]) => {
+      this.data.set(key, value);
+    });
+  }
+
+  /**
+   * Create child context
+   */
+  createChild(data?: Record<string, any>): DataContext {
+    return new DataContext(data, this);
+  }
+
+  /**
+   * Get all data as object
+   */
+  toObject(): Record<string, any> {
+    const result: Record<string, any> = {};
+    
+    // Include parent data first
+    if (this.parent) {
+      Object.assign(result, this.parent.toObject());
+    }
+    
+    // Override with local data
+    this.data.forEach((value, key) => {
+      result[key] = value;
+    });
+    
+    return result;
+  }
+}
+```
+
+### 5. Utilities
+
+```ts
+/**
+ * Deep merge objects (lodash-compatible)
+ */
+export function deepMerge<T extends object>(target: T, ...sources: Partial<T>[]): T {
+  return merge({}, target, ...sources);
+}
+
+/**
+ * Deep clone object
+ */
+export function deepClone<T>(obj: T): T {
+  return cloneDeep(obj);
+}
+
+/**
+ * Get value at object path
+ */
+export function getPath(obj: any, path: string, defaultValue?: any): any {
+  const value = path.split('.').reduce((current, key) => current?.[key], obj);
+  return value !== undefined ? value : defaultValue;
+}
+
+/**
+ * Set value at object path
+ */
+export function setPath(obj: any, path: string, value: any): void {
+  const keys = path.split('.');
+  const lastKey = keys.pop()!;
+  const target = keys.reduce((current, key) => {
+    if (!current[key]) {
+      current[key] = {};
+    }
+    return current[key];
+  }, obj);
+  target[lastKey] = value;
+}
+```
+
+## Development Guidelines
+
+### Writing Pure Logic
+
+```ts
+// ✅ Good: Pure function
+export function normalizeSchema(schema: ComponentSchema): ComponentSchema {
+  return {
+    ...schema,
+    className: schema.className || '',
+    children: schema.children || []
+  };
+}
+
+// ❌ Bad: Side effects
+let globalState: any;
+export function normalizeSchema(schema: ComponentSchema): ComponentSchema {
+  globalState = schema;  // Side effect!
+  return schema;
+}
+```
+
+### Error Handling
+
+```ts
+// ✅ Good: Return error objects
+export function validateSchema(schema: unknown): ValidationResult {
+  try {
+    // Validation logic
+    return { valid: true };
+  } catch (error) {
+    return {
+      valid: false,
+      errors: [{ path: '', message: error.message }]
+    };
+  }
+}
+
+// ❌ Bad: Throw exceptions for expected errors
+export function validateSchema(schema: unknown): boolean {
+  if (!schema.type) {
+    throw new Error('Type required');  // Don't throw for validation
+  }
+  return true;
+}
+```
+
+### Type Safety
+
+```ts
+// ✅ Good: Proper typing
+export function getComponentMetadata(type: string): ComponentMetadata | undefined {
+  return registry.get(type);
+}
+
+// ❌ Bad: Using any
+export function getComponentMetadata(type: string): any {
+  return registry.get(type);
+}
+```
+
+## Testing Requirements
+
+```ts
+// packages/core/src/__tests__/registry.test.ts
+import { describe, it, expect, beforeEach } from 'vitest';
+import { ComponentRegistry } from '../registry';
+
+describe('ComponentRegistry', () => {
+  let registry: ComponentRegistry;
+
+  beforeEach(() => {
+    registry = new ComponentRegistry();
+  });
+
+  it('should register a component', () => {
+    registry.register('button', {
+      type: 'button',
+      displayName: 'Button',
+      category: 'form'
+    });
+
+    expect(registry.has('button')).toBe(true);
+  });
+
+  it('should get component metadata', () => {
+    const metadata = {
+      type: 'button',
+      displayName: 'Button',
+      category: 'form' as const
+    };
+    
+    registry.register('button', metadata);
+    
+    expect(registry.get('button')).toEqual(metadata);
+  });
+
+  it('should return undefined for unregistered component', () => {
+    expect(registry.get('unknown')).toBeUndefined();
+  });
+});
+```
+
+## Performance Considerations
+
+1. **Memoization**: Cache expression evaluation results
+2. **Lazy Loading**: Don't validate schemas until needed
+3. **Shallow Cloning**: Use shallow clone when deep clone isn't needed
+4. **Registry Lookups**: Use Map for O(1) lookups
+
+## Common Pitfalls
+
+### ❌ Don't Import React
+
+```ts
+// ❌ BAD
+import React from 'react';
+
+export function createComponent(schema: ComponentSchema) {
+  return React.createElement('div');  // NO!
+}
+```
+
+### ❌ Don't Use Browser APIs
+
+```ts
+// ❌ BAD
+export function getComponentWidth(id: string): number {
+  return document.getElementById(id)?.offsetWidth || 0;  // Browser-only
+}
+```
+
+### ❌ Don't Mutate Input
+
+```ts
+// ❌ BAD
+export function normalizeSchema(schema: ComponentSchema): ComponentSchema {
+  schema.className = schema.className || '';  // Mutating input!
+  return schema;
+}
+
+// ✅ GOOD
+export function normalizeSchema(schema: ComponentSchema): ComponentSchema {
+  return {
+    ...schema,
+    className: schema.className || ''
+  };
+}
+```
+
+## Build & Test
+
+```bash
+# Type check
+pnpm type-check
+
+# Run tests
+pnpm test
+
+# Build
+pnpm build
+
+# Lint
+pnpm lint
+```
+
+**Success Criteria**:
+- ✅ All tests pass
+- ✅ Zero React dependencies
+- ✅ Works in Node.js environment
+- ✅ 100% type coverage
+
+## Checklist for New Features
+
+- [ ] Pure JavaScript/TypeScript (no React)
+- [ ] No browser-specific APIs
+- [ ] Proper TypeScript types
+- [ ] Unit tests added
+- [ ] Documentation updated
+- [ ] No side effects in functions
+- [ ] Error handling implemented
+- [ ] Performance considered
+
+---
+
+**Remember**: You are the **engine**, not the **UI**. Keep it pure, testable, and framework-agnostic!
diff --git a/.github/prompts/core-packages/react-package.md b/.github/prompts/core-packages/react-package.md
new file mode 100644
index 0000000..038059a
--- /dev/null
+++ b/.github/prompts/core-packages/react-package.md
@@ -0,0 +1,571 @@
+# AI Prompt: @object-ui/react Package
+
+## Role & Identity
+
+You are a **React Integration Architect** for the `@object-ui/react` package in the ObjectUI system.
+
+This package is the **Runtime Binding Layer** - it bridges pure JSON schemas with React rendering. You build React hooks, context providers, and the core `<SchemaRenderer>` component that orchestrates the entire UI rendering process.
+
+**Your Mission**: Create elegant React bindings that transform JSON schemas into interactive React components with minimal overhead.
+
+## Package Context
+
+**Package**: `@object-ui/react`  
+**Location**: `packages/react/`  
+**Description**: React bindings and SchemaRenderer component for Object UI  
+**Dependencies**: `@object-ui/core`, `react`, `react-dom`  
+**Size Budget**: < 15KB gzipped
+
+### Position in Architecture
+
+```
+┌─────────────────────────────────────┐
+│  @object-ui/types                   │  ← Type definitions
+├─────────────────────────────────────┤
+│  @object-ui/core                    │  ← Schema validation & logic
+├─────────────────────────────────────┤
+│  @object-ui/react  (YOU ARE HERE)  │  ← React bindings
+├─────────────────────────────────────┤
+│  @object-ui/components              │  ← Shadcn implementation
+└─────────────────────────────────────┘
+```
+
+**Critical Rule**: This package is **rendering-agnostic**. It orchestrates rendering but delegates actual UI to registered renderers from `@object-ui/components`.
+
+## Technical Constraints
+
+### 🔴 STRICT REQUIREMENTS
+
+1. **React 18+ Only**
+   ```json
+   {
+     "peerDependencies": {
+       "react": "^18.0.0 || ^19.0.0",
+       "react-dom": "^18.0.0 || ^19.0.0"
+     }
+   }
+   ```
+
+2. **No UI Components**
+   ```tsx
+   // ❌ BAD: Rendering UI in @object-ui/react
+   export function SchemaRenderer({ schema }: Props) {
+     return <div className="container">{/* ... */}</div>
+   }
+
+   // ✅ GOOD: Delegate to registered renderer
+   export function SchemaRenderer({ schema }: Props) {
+     const Renderer = getRenderer(schema.type);
+     return <Renderer schema={schema} />;
+   }
+   ```
+
+3. **Minimal React API Surface**
+   - Use hooks for state management
+   - Use Context for dependency injection
+   - Avoid class components
+   - Prefer functional components
+
+4. **No Styling**
+   ```tsx
+   // ❌ BAD
+   <div style={{ color: 'red' }}>...</div>
+   
+   // ✅ GOOD
+   <Renderer schema={schema} />  // Renderer handles styling
+   ```
+
+### File Organization
+
+```
+packages/react/src/
+├── index.ts                      # Main exports
+├── SchemaRenderer.tsx            # Main renderer component
+├── hooks/
+│   ├── useSchemaContext.ts      # Context hook
+│   ├── useDataContext.ts        # Data context hook
+│   ├── useRenderer.ts           # Renderer lookup hook
+│   ├── useExpression.ts         # Expression evaluation hook
+│   └── index.ts
+├── context/
+│   ├── SchemaContext.tsx        # Schema context provider
+│   ├── DataContext.tsx          # Data context provider
+│   ├── RegistryContext.tsx      # Registry context provider
+│   └── index.ts
+├── types.ts                      # React-specific types
+└── __tests__/
+    ├── SchemaRenderer.test.tsx
+    ├── hooks.test.tsx
+    └── context.test.tsx
+```
+
+## Core Components
+
+### 1. SchemaRenderer Component
+
+The main entry point for rendering schemas:
+
+```tsx
+import React from 'react';
+import { ComponentSchema } from '@object-ui/types';
+import { useRenderer } from './hooks/useRenderer';
+import { useExpression } from './hooks/useExpression';
+import { SchemaProvider } from './context/SchemaContext';
+import { DataProvider } from './context/DataContext';
+
+export interface SchemaRendererProps {
+  /** Schema to render */
+  schema: ComponentSchema;
+  
+  /** Data context for expressions */
+  data?: Record<string, any>;
+  
+  /** Optional className for root element */
+  className?: string;
+  
+  /** Action handlers */
+  onAction?: (action: ActionSchema) => void;
+  
+  /** Custom renderer overrides */
+  renderers?: Record<string, RendererComponent>;
+}
+
+/**
+ * Main schema renderer component
+ * 
+ * @example
+ * ```tsx
+ * <SchemaRenderer 
+ *   schema={{ type: 'button', label: 'Click me' }}
+ *   data={{ user: { name: 'John' } }}
+ *   onAction={(action) => console.log(action)}
+ * />
+ * ```
+ */
+export function SchemaRenderer({
+  schema,
+  data = {},
+  className,
+  onAction,
+  renderers
+}: SchemaRendererProps): React.ReactElement | null {
+  // Evaluate visibility expression
+  const visible = useExpression(schema.visible, data, true);
+  
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <SchemaProvider schema={schema} onAction={onAction}>
+      <DataProvider data={data}>
+        <SchemaRendererInner 
+          schema={schema} 
+          className={className}
+          renderers={renderers}
+        />
+      </DataProvider>
+    </SchemaProvider>
+  );
+}
+
+function SchemaRendererInner({
+  schema,
+  className,
+  renderers
+}: Omit<SchemaRendererProps, 'data' | 'onAction'>) {
+  // Get renderer for this schema type
+  const Renderer = useRenderer(schema.type, renderers);
+
+  if (!Renderer) {
+    console.error(`No renderer found for type: ${schema.type}`);
+    return null;
+  }
+
+  // Render with the registered renderer
+  return <Renderer schema={schema} className={className} />;
+}
+```
+
+### 2. Context Providers
+
+#### SchemaContext
+
+```tsx
+import React, { createContext, useContext, ReactNode } from 'react';
+import { ComponentSchema, ActionSchema } from '@object-ui/types';
+
+interface SchemaContextValue {
+  schema: ComponentSchema;
+  onAction?: (action: ActionSchema) => void;
+}
+
+const SchemaContext = createContext<SchemaContextValue | null>(null);
+
+export interface SchemaProviderProps {
+  schema: ComponentSchema;
+  onAction?: (action: ActionSchema) => void;
+  children: ReactNode;
+}
+
+export function SchemaProvider({ schema, onAction, children }: SchemaProviderProps) {
+  return (
+    <SchemaContext.Provider value={{ schema, onAction }}>
+      {children}
+    </SchemaContext.Provider>
+  );
+}
+
+export function useSchemaContext(): SchemaContextValue {
+  const context = useContext(SchemaContext);
+  if (!context) {
+    throw new Error('useSchemaContext must be used within SchemaProvider');
+  }
+  return context;
+}
+```
+
+#### DataContext
+
+```tsx
+import React, { createContext, useContext, ReactNode, useMemo } from 'react';
+
+interface DataContextValue {
+  data: Record<string, any>;
+  setData: (key: string, value: any) => void;
+  mergeData: (newData: Record<string, any>) => void;
+}
+
+const DataContext = createContext<DataContextValue | null>(null);
+
+export interface DataProviderProps {
+  data: Record<string, any>;
+  children: ReactNode;
+}
+
+export function DataProvider({ data: initialData, children }: DataProviderProps) {
+  const [data, setDataState] = React.useState(initialData);
+
+  const value = useMemo<DataContextValue>(() => ({
+    data,
+    setData: (key: string, value: any) => {
+      setDataState(prev => ({ ...prev, [key]: value }));
+    },
+    mergeData: (newData: Record<string, any>) => {
+      setDataState(prev => ({ ...prev, ...newData }));
+    }
+  }), [data]);
+
+  return (
+    <DataContext.Provider value={value}>
+      {children}
+    </DataContext.Provider>
+  );
+}
+
+export function useDataContext(): DataContextValue {
+  const context = useContext(DataContext);
+  if (!context) {
+    throw new Error('useDataContext must be used within DataProvider');
+  }
+  return context;
+}
+```
+
+### 3. Hooks
+
+#### useRenderer
+
+```tsx
+import { useMemo } from 'react';
+import { RendererComponent } from '../types';
+import { getRenderer as getCoreRenderer } from '@object-ui/core';
+
+/**
+ * Get renderer component for a schema type
+ */
+export function useRenderer(
+  type: string,
+  customRenderers?: Record<string, RendererComponent>
+): RendererComponent | null {
+  return useMemo(() => {
+    // Check custom renderers first
+    if (customRenderers && customRenderers[type]) {
+      return customRenderers[type];
+    }
+
+    // Fall back to registered renderers
+    return getCoreRenderer(type);
+  }, [type, customRenderers]);
+}
+```
+
+#### useExpression
+
+```tsx
+import { useMemo } from 'react';
+import { ExpressionEvaluator } from '@object-ui/core';
+import { useDataContext } from '../context/DataContext';
+
+const evaluator = new ExpressionEvaluator();
+
+/**
+ * Evaluate an expression with current data context
+ */
+export function useExpression<T = any>(
+  expression: string | boolean | number | undefined,
+  customData?: Record<string, any>,
+  defaultValue?: T
+): T {
+  const { data: contextData } = useDataContext();
+  const data = customData || contextData;
+
+  return useMemo(() => {
+    if (expression === undefined) {
+      return defaultValue as T;
+    }
+
+    try {
+      return evaluator.evaluate(expression, data) as T;
+    } catch (error) {
+      console.error('Expression evaluation failed:', expression, error);
+      return defaultValue as T;
+    }
+  }, [expression, data, defaultValue]);
+}
+```
+
+#### useAction
+
+```tsx
+import { useCallback } from 'react';
+import { ActionSchema } from '@object-ui/types';
+import { useSchemaContext } from '../context/SchemaContext';
+
+/**
+ * Create action handler
+ */
+export function useAction() {
+  const { onAction } = useSchemaContext();
+
+  return useCallback((action: ActionSchema) => {
+    if (onAction) {
+      onAction(action);
+    } else {
+      console.warn('No action handler registered:', action);
+    }
+  }, [onAction]);
+}
+```
+
+## React-Specific Types
+
+```ts
+// packages/react/src/types.ts
+import { ComponentSchema } from '@object-ui/types';
+
+/**
+ * Props for renderer components
+ */
+export interface RendererProps<T extends ComponentSchema = ComponentSchema> {
+  /** Component schema */
+  schema: T;
+  
+  /** Optional className override */
+  className?: string;
+  
+  /** Optional children override */
+  children?: React.ReactNode;
+}
+
+/**
+ * Renderer component type
+ */
+export type RendererComponent<T extends ComponentSchema = ComponentSchema> = 
+  React.ComponentType<RendererProps<T>>;
+
+/**
+ * Renderer registration function
+ */
+export type RegisterRenderer = (
+  type: string,
+  component: RendererComponent
+) => void;
+```
+
+## Development Guidelines
+
+### Component Design
+
+```tsx
+// ✅ Good: Functional component with hooks
+export function SchemaRenderer({ schema, data }: Props) {
+  const visible = useExpression(schema.visible, data, true);
+  const Renderer = useRenderer(schema.type);
+  
+  if (!visible) return null;
+  return <Renderer schema={schema} />;
+}
+
+// ❌ Bad: Class component
+export class SchemaRenderer extends React.Component {
+  render() {
+    return <div />;
+  }
+}
+```
+
+### Hook Usage
+
+```tsx
+// ✅ Good: Use hooks for reusable logic
+export function useSchemaValidation(schema: ComponentSchema) {
+  return useMemo(() => {
+    return validateSchema(schema);
+  }, [schema]);
+}
+
+// ❌ Bad: Inline logic in components
+export function MyComponent({ schema }: Props) {
+  const valid = validateSchema(schema);  // Runs every render!
+  return <div />;
+}
+```
+
+### Memoization
+
+```tsx
+// ✅ Good: Memoize expensive computations
+export function SchemaRenderer({ schema, data }: Props) {
+  const processedData = useMemo(() => {
+    return processLargeDataset(data);
+  }, [data]);
+  
+  return <Renderer schema={schema} data={processedData} />;
+}
+
+// ❌ Bad: Compute every render
+export function SchemaRenderer({ schema, data }: Props) {
+  const processedData = processLargeDataset(data);  // Every render!
+  return <Renderer schema={schema} data={processedData} />;
+}
+```
+
+## Testing
+
+```tsx
+// packages/react/src/__tests__/SchemaRenderer.test.tsx
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect, vi } from 'vitest';
+import { SchemaRenderer } from '../SchemaRenderer';
+
+describe('SchemaRenderer', () => {
+  it('should render a component', () => {
+    const schema = {
+      type: 'div',
+      children: [
+        { type: 'text', content: 'Hello World' }
+      ]
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    expect(screen.getByText('Hello World')).toBeInTheDocument();
+  });
+
+  it('should evaluate visibility expression', () => {
+    const schema = {
+      type: 'div',
+      visible: '${data.show}',
+      children: [
+        { type: 'text', content: 'Visible' }
+      ]
+    };
+
+    const { rerender } = render(
+      <SchemaRenderer schema={schema} data={{ show: false }} />
+    );
+    
+    expect(screen.queryByText('Visible')).not.toBeInTheDocument();
+
+    rerender(<SchemaRenderer schema={schema} data={{ show: true }} />);
+    
+    expect(screen.getByText('Visible')).toBeInTheDocument();
+  });
+
+  it('should call action handler', () => {
+    const onAction = vi.fn();
+    const schema = {
+      type: 'button',
+      label: 'Click',
+      onClick: { type: 'action', name: 'test' }
+    };
+
+    render(<SchemaRenderer schema={schema} onAction={onAction} />);
+    
+    screen.getByText('Click').click();
+    
+    expect(onAction).toHaveBeenCalledWith({ type: 'action', name: 'test' });
+  });
+});
+```
+
+## Common Pitfalls
+
+### ❌ Don't Render UI Directly
+
+```tsx
+// ❌ BAD
+export function SchemaRenderer({ schema }: Props) {
+  if (schema.type === 'button') {
+    return <button>{schema.label}</button>;  // Hardcoded UI
+  }
+}
+
+// ✅ GOOD
+export function SchemaRenderer({ schema }: Props) {
+  const Renderer = useRenderer(schema.type);
+  return <Renderer schema={schema} />;
+}
+```
+
+### ❌ Don't Skip Memoization
+
+```tsx
+// ❌ BAD
+export function useExpression(expr: string, data: any) {
+  return evaluator.evaluate(expr, data);  // No memoization
+}
+
+// ✅ GOOD
+export function useExpression(expr: string, data: any) {
+  return useMemo(() => evaluator.evaluate(expr, data), [expr, data]);
+}
+```
+
+## Build & Test
+
+```bash
+# Type check
+pnpm type-check
+
+# Run tests
+pnpm test
+
+# Build
+pnpm build
+```
+
+## Checklist
+
+- [ ] No UI rendering (delegate to renderers)
+- [ ] Functional components only
+- [ ] Hooks for reusable logic
+- [ ] Proper memoization
+- [ ] Context for dependency injection
+- [ ] Tests for all components
+- [ ] TypeScript strict mode
+
+---
+
+**Remember**: You **orchestrate** rendering, you don't **implement** UI. Keep it thin and delegate!
diff --git a/.github/prompts/core-packages/types-package.md b/.github/prompts/core-packages/types-package.md
new file mode 100644
index 0000000..e187711
--- /dev/null
+++ b/.github/prompts/core-packages/types-package.md
@@ -0,0 +1,577 @@
+# AI Prompt: @object-ui/types Package
+
+## Role & Identity
+
+You are a **Protocol Architect** for the `@object-ui/types` package in the ObjectUI system.
+
+This package is the **Pure Protocol Layer** - it defines the JSON Schema contracts that all other packages implement. You do not write implementation code; you write TypeScript **interfaces** that describe the shape of JSON configurations.
+
+**Your Mission**: Define crystal-clear, minimal, composable type definitions that enable JSON-driven UI development.
+
+## Package Context
+
+**Package**: `@object-ui/types`  
+**Location**: `packages/types/`  
+**Description**: Pure TypeScript type definitions - The Protocol Layer  
+**Dependencies**: ZERO React dependencies, minimal external dependencies  
+**Size Budget**: < 10KB (types are zero-cost at runtime)
+
+### Position in Architecture
+
+```
+┌─────────────────────────────────────┐
+│  @object-ui/types  (YOU ARE HERE)  │  ← The Contract
+├─────────────────────────────────────┤
+│  @object-ui/core                    │  ← Validates schemas
+├─────────────────────────────────────┤
+│  @object-ui/react                   │  ← Renders components
+├─────────────────────────────────────┤
+│  @object-ui/components              │  ← UI implementation
+└─────────────────────────────────────┘
+```
+
+**Critical Rule**: This package has **ZERO dependencies on implementation**. No React, no UI libraries, no runtime code. Just type definitions.
+
+## Technical Constraints
+
+### 🔴 STRICT REQUIREMENTS
+
+1. **Zero Runtime Dependencies**
+   ```json
+   // package.json dependencies - ONLY these are allowed
+   {
+     "dependencies": {
+       "@objectstack/spec": "^0.1.2"  // ✅ Protocol specs
+     }
+   }
+   ```
+
+2. **Pure TypeScript Interfaces**
+   ```ts
+   // ✅ Good: Pure type definition
+   export interface ButtonSchema extends ComponentSchema {
+     type: 'button';
+     label: string;
+     variant?: 'default' | 'primary' | 'destructive';
+     onClick?: ActionSchema;
+   }
+
+   // ❌ Bad: Implementation code
+   export const ButtonSchema = {
+     validate: (data) => { /* ... */ }
+   }
+   ```
+
+3. **No React Types**
+   ```ts
+   // ❌ FORBIDDEN
+   import { ReactNode } from 'react';
+   export interface MySchema {
+     children: ReactNode;  // NO!
+   }
+
+   // ✅ CORRECT
+   export interface MySchema {
+     children?: ComponentSchema[];  // JSON-serializable
+   }
+   ```
+
+4. **JSON-Serializable Only**
+   ```ts
+   // ❌ Bad: Functions cannot be in JSON
+   export interface BadSchema {
+     onClick: () => void;
+   }
+
+   // ✅ Good: Action schema (JSON-serializable)
+   export interface GoodSchema {
+     onClick?: ActionSchema;
+   }
+   ```
+
+### File Organization
+
+```
+packages/types/src/
+├── index.ts              # Main export barrel
+├── base.ts              # Core base types (ComponentSchema, ActionSchema)
+├── layout.ts            # Layout component schemas (Grid, Flex, Stack)
+├── form.ts              # Form component schemas (Input, Select, Checkbox)
+├── data-display.ts      # Data display schemas (List, Badge, Avatar)
+├── feedback.ts          # Feedback schemas (Loading, Progress, Skeleton)
+├── overlay.ts           # Overlay schemas (Dialog, Popover, Tooltip)
+├── navigation.ts        # Navigation schemas (Menu, Tabs, Breadcrumb)
+├── disclosure.ts        # Disclosure schemas (Accordion, Collapsible)
+├── complex.ts           # Complex schemas (CRUD, Calendar, Kanban)
+├── data.ts              # Data source interfaces
+└── registry.ts          # Registry type definitions
+```
+
+## Core Type Patterns
+
+### 1. Base Component Schema
+
+All component schemas extend `ComponentSchema`:
+
+```ts
+/**
+ * Base schema for all components
+ */
+export interface ComponentSchema {
+  /** Component type identifier (must be registered) */
+  type: string;
+  
+  /** Optional ID for referencing this component */
+  id?: string;
+  
+  /** CSS class names (Tailwind utilities) */
+  className?: string;
+  
+  /** Conditional visibility expression */
+  visible?: boolean | string;  // e.g., "${data.age > 18}"
+  
+  /** Conditional disabled state */
+  disabled?: boolean | string;
+  
+  /** Child components */
+  children?: ComponentSchema[];
+  
+  /** Additional metadata */
+  [key: string]: unknown;
+}
+```
+
+### 2. Specific Component Schema
+
+```ts
+/**
+ * Button component schema
+ * 
+ * @example
+ * {
+ *   "type": "button",
+ *   "label": "Submit",
+ *   "variant": "primary",
+ *   "onClick": { "type": "action", "name": "submitForm" }
+ * }
+ */
+export interface ButtonSchema extends ComponentSchema {
+  type: 'button';
+  
+  /** Button text */
+  label: string;
+  
+  /** Visual style variant */
+  variant?: 'default' | 'primary' | 'destructive' | 'outline' | 'ghost' | 'link';
+  
+  /** Size variant */
+  size?: 'sm' | 'default' | 'lg' | 'icon';
+  
+  /** Click action */
+  onClick?: ActionSchema;
+  
+  /** Loading state */
+  loading?: boolean | string;
+}
+```
+
+### 3. Action Schema
+
+Actions are JSON-serializable event handlers:
+
+```ts
+/**
+ * Base action schema
+ */
+export interface ActionSchema {
+  /** Action type */
+  type: 'action';
+  
+  /** Action name/identifier */
+  name: string;
+  
+  /** Action payload */
+  payload?: Record<string, unknown>;
+}
+
+/**
+ * Navigation action
+ */
+export interface NavigateActionSchema extends ActionSchema {
+  name: 'navigate';
+  payload: {
+    url: string;
+    target?: '_self' | '_blank';
+  };
+}
+
+/**
+ * API call action
+ */
+export interface ApiActionSchema extends ActionSchema {
+  name: 'apiCall';
+  payload: {
+    endpoint: string;
+    method: 'GET' | 'POST' | 'PUT' | 'DELETE';
+    body?: Record<string, unknown>;
+  };
+}
+```
+
+### 4. Data Source Interface
+
+```ts
+/**
+ * Data source interface for backend integration
+ */
+export interface DataSource {
+  /**
+   * Find/query data
+   */
+  find(resource: string, params?: QueryParams): Promise<QueryResult>;
+  
+  /**
+   * Get single item by ID
+   */
+  findOne(resource: string, id: string | number): Promise<DataItem>;
+  
+  /**
+   * Create new item
+   */
+  create(resource: string, data: Record<string, unknown>): Promise<DataItem>;
+  
+  /**
+   * Update existing item
+   */
+  update(resource: string, id: string | number, data: Record<string, unknown>): Promise<DataItem>;
+  
+  /**
+   * Delete item
+   */
+  delete(resource: string, id: string | number): Promise<void>;
+}
+
+export interface QueryParams {
+  filters?: Record<string, unknown>;
+  sort?: string;
+  page?: number;
+  perPage?: number;
+}
+
+export interface QueryResult {
+  data: DataItem[];
+  total: number;
+  page: number;
+  perPage: number;
+}
+
+export interface DataItem {
+  [key: string]: unknown;
+}
+```
+
+## Development Guidelines
+
+### Adding a New Component Type
+
+1. **Identify the category** (layout, form, data-display, etc.)
+2. **Define the interface** in the appropriate file
+3. **Extend ComponentSchema**
+4. **Document with JSDoc** (include example JSON)
+5. **Export from index.ts**
+
+Example:
+
+```ts
+// packages/types/src/form.ts
+
+/**
+ * Text input component schema
+ * 
+ * @example
+ * {
+ *   "type": "input",
+ *   "name": "email",
+ *   "label": "Email Address",
+ *   "placeholder": "you@example.com",
+ *   "required": true,
+ *   "validation": {
+ *     "type": "email"
+ *   }
+ * }
+ */
+export interface InputSchema extends FormFieldSchema {
+  type: 'input';
+  
+  /** Input type */
+  inputType?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
+  
+  /** Placeholder text */
+  placeholder?: string;
+  
+  /** Default value */
+  defaultValue?: string | number;
+  
+  /** Validation rules */
+  validation?: ValidationSchema;
+}
+
+/**
+ * Base schema for form fields
+ */
+export interface FormFieldSchema extends ComponentSchema {
+  /** Field name (for form data) */
+  name: string;
+  
+  /** Field label */
+  label?: string;
+  
+  /** Helper text */
+  description?: string;
+  
+  /** Required field flag */
+  required?: boolean | string;
+  
+  /** Read-only state */
+  readOnly?: boolean | string;
+}
+
+/**
+ * Validation schema
+ */
+export interface ValidationSchema {
+  type?: 'email' | 'url' | 'number' | 'integer' | 'regex';
+  min?: number;
+  max?: number;
+  minLength?: number;
+  maxLength?: number;
+  pattern?: string;
+  message?: string;
+}
+```
+
+### Type Safety Best Practices
+
+1. **Use Discriminated Unions**
+   ```ts
+   // ✅ Good: Type-safe component schema union
+   export type ComponentSchema = 
+     | ButtonSchema 
+     | InputSchema 
+     | GridSchema
+     | DivSchema;
+   
+   // Now TypeScript can narrow types based on `type` field
+   function renderComponent(schema: ComponentSchema) {
+     if (schema.type === 'button') {
+       // schema is narrowed to ButtonSchema
+       console.log(schema.label);  // ✅ Type-safe
+     }
+   }
+   ```
+
+2. **Use Literal Types for Enums**
+   ```ts
+   // ✅ Good: Literal union
+   export interface ButtonSchema extends ComponentSchema {
+     variant?: 'default' | 'primary' | 'destructive';
+   }
+   
+   // ❌ Avoid: String enums (harder to use in JSON)
+   export enum ButtonVariant {
+     Default = 'default',
+     Primary = 'primary'
+   }
+   ```
+
+3. **Make Optional Props Truly Optional**
+   ```ts
+   // ✅ Good: Clear optionality
+   export interface InputSchema {
+     name: string;           // Required
+     label?: string;         // Optional
+     placeholder?: string;   // Optional
+   }
+   
+   // ❌ Bad: Ambiguous
+   export interface InputSchema {
+     name: string;
+     label: string | undefined;  // Confusing
+   }
+   ```
+
+4. **Use Generic Types for Reusability**
+   ```ts
+   /**
+    * Generic list schema
+    */
+   export interface ListSchema<T = DataItem> extends ComponentSchema {
+     type: 'list';
+     
+     /** Data items */
+     items?: T[];
+     
+     /** Item template */
+     itemTemplate?: ComponentSchema;
+   }
+   ```
+
+### Documentation Standards
+
+Every exported type must have:
+
+1. **JSDoc comment** explaining its purpose
+2. **@example** with valid JSON schema
+3. **Type parameters** documented if generic
+4. **Property descriptions** for non-obvious fields
+
+```ts
+/**
+ * Grid layout component schema
+ * 
+ * Creates a responsive grid layout using CSS Grid.
+ * 
+ * @example
+ * {
+ *   "type": "grid",
+ *   "columns": 3,
+ *   "gap": 4,
+ *   "items": [
+ *     { "type": "card", "title": "Item 1" },
+ *     { "type": "card", "title": "Item 2" }
+ *   ]
+ * }
+ */
+export interface GridSchema extends LayoutSchema {
+  type: 'grid';
+  
+  /** Number of columns (or responsive config) */
+  columns?: number | { sm?: number; md?: number; lg?: number };
+  
+  /** Gap between items (Tailwind spacing scale) */
+  gap?: number | string;
+  
+  /** Grid items */
+  items?: ComponentSchema[];
+}
+```
+
+## Testing
+
+Since this package is pure types, testing focuses on:
+
+1. **Type tests** (using `tsd` or similar)
+2. **Schema validation examples**
+3. **JSON serialization tests**
+
+```ts
+// packages/types/src/__tests__/button.test-d.ts
+import { expectType, expectError } from 'tsd';
+import type { ButtonSchema } from '../form';
+
+// ✅ Valid schema
+expectType<ButtonSchema>({
+  type: 'button',
+  label: 'Click me',
+  variant: 'primary'
+});
+
+// ❌ Invalid variant
+expectError<ButtonSchema>({
+  type: 'button',
+  label: 'Click me',
+  variant: 'invalid'  // Type error
+});
+```
+
+## Common Pitfalls
+
+### ❌ Don't Include Implementation
+
+```ts
+// ❌ BAD: Implementation in types package
+export interface ButtonSchema {
+  type: 'button';
+  onClick: () => void;  // Function reference
+}
+
+export function createButton(schema: ButtonSchema) {
+  // Implementation code doesn't belong here
+}
+```
+
+### ❌ Don't Import from React
+
+```ts
+// ❌ BAD: React dependency
+import { CSSProperties } from 'react';
+
+export interface ComponentSchema {
+  style?: CSSProperties;
+}
+```
+
+### ❌ Don't Use Circular Dependencies
+
+```ts
+// ❌ BAD: Circular dependency
+// form.ts
+import { LayoutSchema } from './layout';
+
+// layout.ts
+import { FormSchema } from './form';  // Circular!
+```
+
+### ✅ Do Use Forward References
+
+```ts
+// ✅ GOOD: Forward reference
+export interface FormSchema extends ComponentSchema {
+  layout?: ComponentSchema;  // Generic reference
+}
+```
+
+## Build & Validation
+
+```bash
+# Type check
+pnpm type-check
+
+# Build
+pnpm build
+
+# Lint
+pnpm lint
+```
+
+**Success Criteria**:
+- ✅ `tsc --noEmit` passes with zero errors
+- ✅ All exports have JSDoc comments
+- ✅ Zero runtime dependencies (except @objectstack/spec)
+- ✅ Generated `.d.ts` files are clean
+
+## Checklist for New Types
+
+When adding a new component schema:
+
+- [ ] Created interface extending `ComponentSchema`
+- [ ] Added `type` field with literal type
+- [ ] Documented with JSDoc and `@example`
+- [ ] Exported from category file (e.g., `form.ts`)
+- [ ] Re-exported from `index.ts`
+- [ ] Added to discriminated union type
+- [ ] No React dependencies
+- [ ] No function types (JSON-serializable only)
+- [ ] Type tests added (if applicable)
+- [ ] Build passes without errors
+
+## Related Files
+
+- `packages/types/src/index.ts` - Main export barrel
+- `packages/types/src/base.ts` - Base component types
+- `packages/types/README.md` - Package documentation
+- `docs/protocol/overview.md` - Protocol specification
+
+---
+
+**Remember**: You are defining the **contract**, not the **implementation**. Keep it pure, simple, and JSON-serializable!

From 46362d5c4d57c8573f1bf80ecb0d38e39135b67a Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 14:24:19 +0000
Subject: [PATCH 3/4] Complete AI development prompts for all ObjectUI
 components

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .../components/data-display-components.md     | 439 ++++++++++++++++
 .../disclosure-complex-components.md          | 431 ++++++++++++++++
 .../prompts/components/feedback-components.md | 361 +++++++++++++
 .github/prompts/components/form-components.md | 475 ++++++++++++++++++
 .../components/navigation-components.md       | 409 +++++++++++++++
 .../prompts/components/overlay-components.md  | 473 +++++++++++++++++
 .github/prompts/plugins/plugin-development.md | 404 +++++++++++++++
 .github/prompts/tools/designer-cli-runner.md  | 395 +++++++++++++++
 8 files changed, 3387 insertions(+)
 create mode 100644 .github/prompts/components/data-display-components.md
 create mode 100644 .github/prompts/components/disclosure-complex-components.md
 create mode 100644 .github/prompts/components/feedback-components.md
 create mode 100644 .github/prompts/components/form-components.md
 create mode 100644 .github/prompts/components/navigation-components.md
 create mode 100644 .github/prompts/components/overlay-components.md
 create mode 100644 .github/prompts/plugins/plugin-development.md
 create mode 100644 .github/prompts/tools/designer-cli-runner.md

diff --git a/.github/prompts/components/data-display-components.md b/.github/prompts/components/data-display-components.md
new file mode 100644
index 0000000..a9973d4
--- /dev/null
+++ b/.github/prompts/components/data-display-components.md
@@ -0,0 +1,439 @@
+# AI Prompt: Data Display Components
+
+## Overview
+
+Data display components present **information** to users in structured, visual formats. They transform data into readable, scannable UI elements like lists, tables, badges, and statistics.
+
+**Category**: `data-display`  
+**Examples**: list, table, badge, avatar, statistic, alert, card  
+**Complexity**: ⭐⭐ Moderate  
+**Package**: `@object-ui/components/src/renderers/data-display/`
+
+## Purpose
+
+Data display components:
+1. **Present structured data** (lists, tables)
+2. **Highlight information** (badges, statistics)
+3. **Show status** (alerts, indicators)
+4. **Display user info** (avatars, profiles)
+
+## Core Data Display Components
+
+### List Component
+Display items in a vertical list.
+
+**Schema**:
+```json
+{
+  "type": "list",
+  "items": [
+    { "type": "text", "content": "Item 1" },
+    { "type": "text", "content": "Item 2" },
+    { "type": "text", "content": "Item 3" }
+  ],
+  "divider": true,
+  "className": "space-y-2"
+}
+```
+
+**Implementation**:
+```tsx
+import { Separator } from '@/ui/separator';
+import { SchemaRenderer } from '@object-ui/react';
+
+export function ListRenderer({ schema }: RendererProps<ListSchema>) {
+  return (
+    <div className={cn('space-y-0', schema.className)}>
+      {schema.items?.map((item, index) => (
+        <React.Fragment key={item.id || index}>
+          <div className="py-2">
+            <SchemaRenderer schema={item} />
+          </div>
+          {schema.divider && index < schema.items.length - 1 && (
+            <Separator />
+          )}
+        </React.Fragment>
+      ))}
+    </div>
+  );
+}
+```
+
+### Badge Component
+Small label or status indicator.
+
+**Schema**:
+```json
+{
+  "type": "badge",
+  "label": "New",
+  "variant": "default" | "secondary" | "destructive" | "outline",
+  "className": ""
+}
+```
+
+**Implementation**:
+```tsx
+import { Badge as ShadcnBadge } from '@/ui/badge';
+
+export function BadgeRenderer({ schema }: RendererProps<BadgeSchema>) {
+  return (
+    <ShadcnBadge 
+      variant={schema.variant}
+      className={schema.className}
+    >
+      {schema.label}
+    </ShadcnBadge>
+  );
+}
+```
+
+### Avatar Component
+User profile picture or initials.
+
+**Schema**:
+```json
+{
+  "type": "avatar",
+  "src": "https://example.com/avatar.jpg",
+  "alt": "John Doe",
+  "fallback": "JD",
+  "size": "md"
+}
+```
+
+**Implementation**:
+```tsx
+import { Avatar, AvatarFallback, AvatarImage } from '@/ui/avatar';
+import { cva } from 'class-variance-authority';
+
+const avatarVariants = cva('', {
+  variants: {
+    size: {
+      sm: 'h-8 w-8 text-xs',
+      md: 'h-10 w-10 text-sm',
+      lg: 'h-12 w-12 text-base',
+      xl: 'h-16 w-16 text-lg'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+
+export function AvatarRenderer({ schema }: RendererProps<AvatarSchema>) {
+  return (
+    <Avatar className={cn(avatarVariants({ size: schema.size }), schema.className)}>
+      {schema.src && (
+        <AvatarImage src={schema.src} alt={schema.alt || ''} />
+      )}
+      <AvatarFallback>{schema.fallback || '?'}</AvatarFallback>
+    </Avatar>
+  );
+}
+```
+
+### Statistic Component
+Display a metric or number with label.
+
+**Schema**:
+```json
+{
+  "type": "statistic",
+  "label": "Total Users",
+  "value": "1,234",
+  "trend": "+12.5%",
+  "trendDirection": "up" | "down"
+}
+```
+
+**Implementation**:
+```tsx
+import { ArrowUp, ArrowDown } from 'lucide-react';
+
+export function StatisticRenderer({ schema }: RendererProps<StatisticSchema>) {
+  const TrendIcon = schema.trendDirection === 'up' ? ArrowUp : ArrowDown;
+  const trendColor = schema.trendDirection === 'up' 
+    ? 'text-green-500' 
+    : 'text-red-500';
+
+  return (
+    <div className={cn('space-y-1', schema.className)}>
+      <p className="text-sm text-muted-foreground">
+        {schema.label}
+      </p>
+      
+      <div className="flex items-baseline gap-2">
+        <p className="text-2xl font-bold">
+          {schema.value}
+        </p>
+        
+        {schema.trend && (
+          <p className={cn('text-sm flex items-center gap-1', trendColor)}>
+            <TrendIcon className="h-3 w-3" />
+            {schema.trend}
+          </p>
+        )}
+      </div>
+      
+      {schema.description && (
+        <p className="text-sm text-muted-foreground">
+          {schema.description}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+### Alert Component
+Important message or notification.
+
+**Schema**:
+```json
+{
+  "type": "alert",
+  "title": "Success",
+  "description": "Your changes have been saved.",
+  "variant": "default" | "destructive"
+}
+```
+
+**Implementation**:
+```tsx
+import { Alert, AlertTitle, AlertDescription } from '@/ui/alert';
+import { AlertCircle, CheckCircle2 } from 'lucide-react';
+
+export function AlertRenderer({ schema }: RendererProps<AlertSchema>) {
+  const Icon = schema.variant === 'destructive' ? AlertCircle : CheckCircle2;
+
+  return (
+    <Alert variant={schema.variant} className={schema.className}>
+      <Icon className="h-4 w-4" />
+      
+      {schema.title && (
+        <AlertTitle>{schema.title}</AlertTitle>
+      )}
+      
+      {schema.description && (
+        <AlertDescription>{schema.description}</AlertDescription>
+      )}
+    </Alert>
+  );
+}
+```
+
+### Table Component
+Data table with columns and rows.
+
+**Schema**:
+```json
+{
+  "type": "table",
+  "columns": [
+    { "key": "name", "label": "Name" },
+    { "key": "email", "label": "Email" },
+    { "key": "role", "label": "Role" }
+  ],
+  "data": [
+    { "name": "John Doe", "email": "john@example.com", "role": "Admin" },
+    { "name": "Jane Smith", "email": "jane@example.com", "role": "User" }
+  ]
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/ui/table';
+
+export function TableRenderer({ schema }: RendererProps<TableSchema>) {
+  return (
+    <div className={cn('rounded-md border', schema.className)}>
+      <Table>
+        <TableHeader>
+          <TableRow>
+            {schema.columns?.map((column) => (
+              <TableHead key={column.key}>{column.label}</TableHead>
+            ))}
+          </TableRow>
+        </TableHeader>
+        
+        <TableBody>
+          {schema.data?.map((row, rowIndex) => (
+            <TableRow key={rowIndex}>
+              {schema.columns?.map((column) => (
+                <TableCell key={column.key}>
+                  {row[column.key]}
+                </TableCell>
+              ))}
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}
+```
+
+## Development Guidelines
+
+### Data Binding
+
+Support expression evaluation for dynamic data:
+
+```tsx
+const value = useExpression(schema.value, data, '');
+const items = useExpression(schema.items, data, []);
+```
+
+### Formatting
+
+Support data formatting:
+
+```tsx
+// Numbers
+const formatted = new Intl.NumberFormat('en-US').format(value);
+
+// Currency
+const formatted = new Intl.NumberFormat('en-US', {
+  style: 'currency',
+  currency: 'USD'
+}).format(value);
+
+// Dates
+const formatted = new Date(value).toLocaleDateString();
+```
+
+### Empty States
+
+Handle empty data gracefully:
+
+```tsx
+if (!schema.items || schema.items.length === 0) {
+  return (
+    <div className="text-center py-8 text-muted-foreground">
+      {schema.emptyMessage || 'No data available'}
+    </div>
+  );
+}
+```
+
+## Testing
+
+```tsx
+describe('BadgeRenderer', () => {
+  it('renders badge with label', () => {
+    const schema = {
+      type: 'badge',
+      label: 'New'
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    expect(screen.getByText('New')).toBeInTheDocument();
+  });
+
+  it('applies variant styles', () => {
+    const schema = {
+      type: 'badge',
+      label: 'Error',
+      variant: 'destructive' as const
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    const badge = screen.getByText('Error');
+    expect(badge).toHaveClass('bg-destructive');
+  });
+});
+```
+
+## Common Patterns
+
+### Status Badge
+
+```json
+{
+  "type": "badge",
+  "label": "${data.status}",
+  "variant": "${data.status === 'active' ? 'default' : 'secondary'}"
+}
+```
+
+### User Profile Card
+
+```json
+{
+  "type": "flex",
+  "gap": 3,
+  "align": "center",
+  "children": [
+    {
+      "type": "avatar",
+      "src": "${data.user.avatar}",
+      "fallback": "${data.user.initials}"
+    },
+    {
+      "type": "stack",
+      "spacing": 1,
+      "children": [
+        { "type": "text", "content": "${data.user.name}", "className": "font-semibold" },
+        { "type": "text", "content": "${data.user.email}", "className": "text-sm text-muted-foreground" }
+      ]
+    }
+  ]
+}
+```
+
+### Statistics Dashboard
+
+```json
+{
+  "type": "grid",
+  "columns": 3,
+  "gap": 4,
+  "items": [
+    {
+      "type": "statistic",
+      "label": "Total Users",
+      "value": "${data.stats.users}",
+      "trend": "${data.stats.userGrowth}",
+      "trendDirection": "up"
+    },
+    {
+      "type": "statistic",
+      "label": "Revenue",
+      "value": "${data.stats.revenue}",
+      "trend": "${data.stats.revenueGrowth}",
+      "trendDirection": "up"
+    },
+    {
+      "type": "statistic",
+      "label": "Orders",
+      "value": "${data.stats.orders}",
+      "trend": "${data.stats.orderGrowth}",
+      "trendDirection": "down"
+    }
+  ]
+}
+```
+
+## Checklist
+
+- [ ] Supports dynamic data via expressions
+- [ ] Handles empty states
+- [ ] Proper data formatting
+- [ ] Accessible markup
+- [ ] Tests added
+- [ ] Visual variants implemented
+
+---
+
+**Principle**: Present data in **clear**, **scannable** formats with **proper formatting**.
diff --git a/.github/prompts/components/disclosure-complex-components.md b/.github/prompts/components/disclosure-complex-components.md
new file mode 100644
index 0000000..8a02114
--- /dev/null
+++ b/.github/prompts/components/disclosure-complex-components.md
@@ -0,0 +1,431 @@
+# AI Prompt: Disclosure Components & Complex Components
+
+## Disclosure Components
+
+### Overview
+
+Disclosure components control **showing and hiding** content. They manage progressive disclosure patterns where content is revealed on demand.
+
+**Category**: `disclosure`  
+**Examples**: accordion, collapsible, tabs (disclosure aspect)  
+**Complexity**: ⭐⭐ Moderate  
+
+### Accordion Component
+
+**Schema**:
+```json
+{
+  "type": "accordion",
+  "type": "single" | "multiple",
+  "items": [
+    {
+      "value": "item-1",
+      "trigger": "What is ObjectUI?",
+      "content": "ObjectUI is a schema-driven UI framework..."
+    },
+    {
+      "value": "item-2",
+      "trigger": "How does it work?",
+      "content": "It transforms JSON schemas into React components..."
+    }
+  ]
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from '@/ui/accordion';
+import { SchemaRenderer } from '@object-ui/react';
+
+export function AccordionRenderer({ schema }: RendererProps<AccordionSchema>) {
+  return (
+    <Accordion 
+      type={schema.type || 'single'} 
+      collapsible 
+      className={schema.className}
+    >
+      {schema.items?.map((item) => (
+        <AccordionItem key={item.value} value={item.value}>
+          <AccordionTrigger>{item.trigger}</AccordionTrigger>
+          <AccordionContent>
+            {typeof item.content === 'string' ? (
+              item.content
+            ) : (
+              <SchemaRenderer schema={item.content} />
+            )}
+          </AccordionContent>
+        </AccordionItem>
+      ))}
+    </Accordion>
+  );
+}
+```
+
+### Collapsible Component
+
+**Schema**:
+```json
+{
+  "type": "collapsible",
+  "trigger": "Show more details",
+  "content": {
+    "type": "div",
+    "children": [...]
+  },
+  "defaultOpen": false
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from '@/ui/collapsible';
+
+export function CollapsibleRenderer({ schema }: RendererProps<CollapsibleSchema>) {
+  const [open, setOpen] = useState(schema.defaultOpen || false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen} className={schema.className}>
+      <CollapsibleTrigger asChild>
+        <button className="flex items-center gap-2">
+          {schema.trigger}
+          <ChevronDown className={cn('h-4 w-4 transition-transform', open && 'rotate-180')} />
+        </button>
+      </CollapsibleTrigger>
+      
+      <CollapsibleContent>
+        {schema.content && <SchemaRenderer schema={schema.content} />}
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+```
+
+---
+
+## Complex Components
+
+### Overview
+
+Complex components combine multiple simpler components into **high-level patterns** like CRUD interfaces, calendars, and kanban boards.
+
+**Category**: `complex`  
+**Examples**: crud, calendar, data-table, kanban, file-upload, rich-editor  
+**Complexity**: ⭐⭐⭐⭐ Very Complex  
+
+### CRUD Component
+
+Complete Create-Read-Update-Delete interface.
+
+**Schema**:
+```json
+{
+  "type": "crud",
+  "resource": "users",
+  "api": "/api/users",
+  "columns": [
+    { "key": "name", "label": "Name", "sortable": true },
+    { "key": "email", "label": "Email", "sortable": true },
+    { "key": "role", "label": "Role" }
+  ],
+  "actions": {
+    "create": true,
+    "edit": true,
+    "delete": true
+  },
+  "searchable": true,
+  "pagination": true
+}
+```
+
+**Implementation**:
+```tsx
+export function CrudRenderer({ schema }: RendererProps<CrudSchema>) {
+  const [data, setData] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [page, setPage] = useState(1);
+
+  useEffect(() => {
+    fetchData();
+  }, [page]);
+
+  const fetchData = async () => {
+    setLoading(true);
+    const response = await fetch(`${schema.api}?page=${page}`);
+    const result = await response.json();
+    setData(result.data);
+    setLoading(false);
+  };
+
+  return (
+    <div className={cn('space-y-4', schema.className)}>
+      {/* Toolbar */}
+      <div className="flex justify-between items-center">
+        {schema.searchable && (
+          <Input placeholder="Search..." className="max-w-sm" />
+        )}
+        
+        {schema.actions?.create && (
+          <Button>
+            <Plus className="mr-2 h-4 w-4" />
+            Create
+          </Button>
+        )}
+      </div>
+
+      {/* Table */}
+      {loading ? (
+        <SkeletonRenderer schema={{ type: 'skeleton', count: 5 }} />
+      ) : (
+        <TableRenderer 
+          schema={{
+            type: 'table',
+            columns: schema.columns,
+            data: data
+          }}
+        />
+      )}
+
+      {/* Pagination */}
+      {schema.pagination && (
+        <PaginationRenderer
+          schema={{
+            type: 'pagination',
+            currentPage: page,
+            totalPages: 10,
+            onPageChange: { type: 'action', name: 'changePage' }
+          }}
+        />
+      )}
+    </div>
+  );
+}
+```
+
+### Calendar Component
+
+**Schema**:
+```json
+{
+  "type": "calendar",
+  "mode": "single" | "multiple" | "range",
+  "selected": "2024-01-15",
+  "onSelect": {
+    "type": "action",
+    "name": "selectDate"
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import { Calendar } from '@/ui/calendar';
+import { useDataContext, useAction } from '@object-ui/react';
+
+export function CalendarRenderer({ schema }: RendererProps<CalendarSchema>) {
+  const { data, setData } = useDataContext();
+  const handleAction = useAction();
+  const selected = data[schema.name || 'selectedDate'];
+
+  const handleSelect = (date: Date | undefined) => {
+    setData(schema.name || 'selectedDate', date);
+    
+    if (schema.onSelect) {
+      handleAction({
+        ...schema.onSelect,
+        payload: { date }
+      });
+    }
+  };
+
+  return (
+    <Calendar
+      mode={schema.mode || 'single'}
+      selected={selected}
+      onSelect={handleSelect}
+      className={schema.className}
+    />
+  );
+}
+```
+
+### Resizable Component
+
+Resizable panels for layouts.
+
+**Schema**:
+```json
+{
+  "type": "resizable",
+  "direction": "horizontal" | "vertical",
+  "panels": [
+    { "defaultSize": 50, "content": {...} },
+    { "defaultSize": 50, "content": {...} }
+  ]
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from '@/ui/resizable';
+
+export function ResizableRenderer({ schema }: RendererProps<ResizableSchema>) {
+  return (
+    <ResizablePanelGroup 
+      direction={schema.direction || 'horizontal'}
+      className={schema.className}
+    >
+      {schema.panels?.map((panel, index) => (
+        <React.Fragment key={index}>
+          <ResizablePanel defaultSize={panel.defaultSize}>
+            {panel.content && <SchemaRenderer schema={panel.content} />}
+          </ResizablePanel>
+          
+          {index < schema.panels.length - 1 && (
+            <ResizableHandle />
+          )}
+        </React.Fragment>
+      ))}
+    </ResizablePanelGroup>
+  );
+}
+```
+
+## Development Guidelines
+
+### Composition
+
+Build complex components by composing simpler ones:
+
+```tsx
+// ✅ Good: Compose from primitives
+export function CrudRenderer({ schema }: RendererProps<CrudSchema>) {
+  return (
+    <>
+      <TableRenderer schema={tableSchema} />
+      <PaginationRenderer schema={paginationSchema} />
+    </>
+  );
+}
+
+// ❌ Bad: Monolithic implementation
+export function CrudRenderer() {
+  return <div>{/* 500 lines of code */}</div>;
+}
+```
+
+### State Management
+
+Use data context for shared state:
+
+```tsx
+const { data, setData } = useDataContext();
+
+// Store CRUD state
+setData('crud_' + schema.resource + '_page', page);
+setData('crud_' + schema.resource + '_search', search);
+```
+
+### API Integration
+
+Support data sources:
+
+```tsx
+const dataSource = useDataSource();
+
+const fetchData = async () => {
+  const result = await dataSource.find(schema.resource, {
+    page,
+    perPage: 10,
+    filters: { search }
+  });
+  setData(result.data);
+};
+```
+
+## Testing
+
+Complex components need comprehensive tests:
+
+```tsx
+describe('CrudRenderer', () => {
+  it('renders table with data', async () => {
+    // Mock API
+    fetchMock.get('/api/users', { data: [...] });
+
+    render(<SchemaRenderer schema={crudSchema} />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('John Doe')).toBeInTheDocument();
+    });
+  });
+
+  it('handles pagination', async () => {
+    // Test pagination
+  });
+
+  it('handles search', async () => {
+    // Test search
+  });
+});
+```
+
+## Common Patterns
+
+### FAQ Accordion
+
+```json
+{
+  "type": "accordion",
+  "type": "single",
+  "items": [
+    { "value": "1", "trigger": "Question 1?", "content": "Answer 1" },
+    { "value": "2", "trigger": "Question 2?", "content": "Answer 2" }
+  ]
+}
+```
+
+### Admin CRUD
+
+```json
+{
+  "type": "crud",
+  "resource": "products",
+  "api": "/api/products",
+  "columns": [
+    { "key": "name", "label": "Product Name" },
+    { "key": "price", "label": "Price", "format": "currency" },
+    { "key": "stock", "label": "Stock" }
+  ],
+  "actions": { "create": true, "edit": true, "delete": true },
+  "searchable": true,
+  "filters": [
+    { "type": "select", "name": "category", "options": [...] }
+  ]
+}
+```
+
+## Checklist
+
+- [ ] Composed from simpler components
+- [ ] State management via data context
+- [ ] API integration supported
+- [ ] Loading states
+- [ ] Error handling
+- [ ] Comprehensive tests
+
+---
+
+**Principle**: Complex components are **compositions** of simpler ones with **robust state management**.
diff --git a/.github/prompts/components/feedback-components.md b/.github/prompts/components/feedback-components.md
new file mode 100644
index 0000000..83ed9db
--- /dev/null
+++ b/.github/prompts/components/feedback-components.md
@@ -0,0 +1,361 @@
+# AI Prompt: Feedback Components
+
+## Overview
+
+Feedback components provide **visual feedback** to users about system state, progress, and asynchronous operations. They inform users when things are loading, processing, or completing.
+
+**Category**: `feedback`  
+**Examples**: loading, progress, skeleton, toast, spinner  
+**Complexity**: ⭐⭐ Moderate  
+**Package**: `@object-ui/components/src/renderers/feedback/`
+
+## Purpose
+
+Feedback components:
+1. **Show loading states** (spinners, skeletons)
+2. **Display progress** (progress bars, percentages)
+3. **Notify users** (toasts, alerts)
+4. **Indicate activity** (pulsing, animations)
+
+## Core Feedback Components
+
+### Loading Component
+Spinning loader indicator.
+
+**Schema**:
+```json
+{
+  "type": "loading",
+  "size": "sm" | "md" | "lg",
+  "text": "Loading...",
+  "fullscreen": false
+}
+```
+
+**Implementation**:
+```tsx
+import { Loader2 } from 'lucide-react';
+import { cva } from 'class-variance-authority';
+
+const loadingVariants = cva('animate-spin', {
+  variants: {
+    size: {
+      sm: 'h-4 w-4',
+      md: 'h-8 w-8',
+      lg: 'h-12 w-12'
+    }
+  },
+  defaultVariants: {
+    size: 'md'
+  }
+});
+
+export function LoadingRenderer({ schema }: RendererProps<LoadingSchema>) {
+  const content = (
+    <div className={cn('flex flex-col items-center gap-2', schema.className)}>
+      <Loader2 className={loadingVariants({ size: schema.size })} />
+      {schema.text && (
+        <p className="text-sm text-muted-foreground">{schema.text}</p>
+      )}
+    </div>
+  );
+
+  if (schema.fullscreen) {
+    return (
+      <div className="fixed inset-0 flex items-center justify-center bg-background/80 backdrop-blur-sm z-50">
+        {content}
+      </div>
+    );
+  }
+
+  return content;
+}
+```
+
+### Progress Component
+Progress bar showing completion percentage.
+
+**Schema**:
+```json
+{
+  "type": "progress",
+  "value": 65,
+  "max": 100,
+  "showLabel": true,
+  "variant": "default" | "success" | "warning" | "danger"
+}
+```
+
+**Implementation**:
+```tsx
+import { Progress as ShadcnProgress } from '@/ui/progress';
+import { useExpression } from '@object-ui/react';
+
+export function ProgressRenderer({ schema }: RendererProps<ProgressSchema>) {
+  const value = useExpression(schema.value, {}, 0);
+  const max = schema.max || 100;
+  const percentage = Math.round((value / max) * 100);
+
+  return (
+    <div className={cn('space-y-2', schema.className)}>
+      {schema.showLabel && (
+        <div className="flex justify-between text-sm">
+          <span>{schema.label}</span>
+          <span className="text-muted-foreground">{percentage}%</span>
+        </div>
+      )}
+      
+      <ShadcnProgress 
+        value={percentage}
+        className={cn(
+          schema.variant === 'success' && '[&>div]:bg-green-500',
+          schema.variant === 'warning' && '[&>div]:bg-yellow-500',
+          schema.variant === 'danger' && '[&>div]:bg-red-500'
+        )}
+      />
+    </div>
+  );
+}
+```
+
+### Skeleton Component
+Placeholder for loading content.
+
+**Schema**:
+```json
+{
+  "type": "skeleton",
+  "variant": "text" | "circular" | "rectangular",
+  "width": "100%",
+  "height": "20px",
+  "count": 3
+}
+```
+
+**Implementation**:
+```tsx
+import { Skeleton as ShadcnSkeleton } from '@/ui/skeleton';
+
+export function SkeletonRenderer({ schema }: RendererProps<SkeletonSchema>) {
+  const count = schema.count || 1;
+
+  const skeletonStyle = {
+    width: schema.width,
+    height: schema.height
+  };
+
+  const skeletonClass = cn(
+    schema.variant === 'circular' && 'rounded-full',
+    schema.variant === 'rectangular' && 'rounded-md',
+    schema.className
+  );
+
+  return (
+    <div className="space-y-2">
+      {Array.from({ length: count }).map((_, index) => (
+        <ShadcnSkeleton
+          key={index}
+          className={skeletonClass}
+          style={skeletonStyle}
+        />
+      ))}
+    </div>
+  );
+}
+```
+
+### Toast Component
+Temporary notification message.
+
+**Schema**:
+```json
+{
+  "type": "toast",
+  "title": "Success",
+  "description": "Your changes have been saved.",
+  "variant": "default" | "destructive",
+  "duration": 3000
+}
+```
+
+**Implementation**:
+```tsx
+import { useToast } from '@/hooks/use-toast';
+import { useEffect } from 'react';
+
+export function ToastRenderer({ schema }: RendererProps<ToastSchema>) {
+  const { toast } = useToast();
+
+  useEffect(() => {
+    toast({
+      title: schema.title,
+      description: schema.description,
+      variant: schema.variant,
+      duration: schema.duration || 3000
+    });
+  }, [schema.title, schema.description, schema.variant, schema.duration]);
+
+  return null;  // Toast is rendered in portal
+}
+```
+
+## Development Guidelines
+
+### Loading States
+
+Show loading during async operations:
+
+```tsx
+// In button component
+{loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+
+// Full page loading
+{isLoading && (
+  <LoadingRenderer schema={{ type: 'loading', fullscreen: true }} />
+)}
+```
+
+### Progress Updates
+
+Support real-time progress updates:
+
+```tsx
+const progress = useExpression(schema.value, data, 0);
+
+useEffect(() => {
+  // Update progress from data context
+}, [progress]);
+```
+
+### Skeleton Patterns
+
+Match skeleton to actual content structure:
+
+```tsx
+// Card skeleton
+{
+  "type": "stack",
+  "spacing": 2,
+  "children": [
+    { "type": "skeleton", "variant": "rectangular", "height": "200px" },
+    { "type": "skeleton", "variant": "text", "width": "60%" },
+    { "type": "skeleton", "variant": "text", "width": "40%" }
+  ]
+}
+```
+
+### Accessibility
+
+```tsx
+// Loading state
+<div role="status" aria-live="polite">
+  <Loader2 className="animate-spin" />
+  <span className="sr-only">Loading...</span>
+</div>
+
+// Progress bar
+<div role="progressbar" aria-valuenow={value} aria-valuemin={0} aria-valuemax={max}>
+  <Progress value={value} />
+</div>
+```
+
+## Testing
+
+```tsx
+describe('LoadingRenderer', () => {
+  it('renders loading spinner', () => {
+    const schema = { type: 'loading', text: 'Loading...' };
+    render(<SchemaRenderer schema={schema} />);
+    
+    expect(screen.getByText('Loading...')).toBeInTheDocument();
+  });
+
+  it('renders fullscreen loading', () => {
+    const schema = { type: 'loading', fullscreen: true };
+    const { container } = render(<SchemaRenderer schema={schema} />);
+    
+    expect(container.querySelector('.fixed')).toBeInTheDocument();
+  });
+});
+```
+
+## Common Patterns
+
+### Button with Loading
+
+```json
+{
+  "type": "button",
+  "label": "Submit",
+  "loading": "${data.isSubmitting}",
+  "onClick": { "type": "action", "name": "submit" }
+}
+```
+
+### Skeleton Card
+
+```json
+{
+  "type": "card",
+  "className": "p-6",
+  "body": {
+    "type": "stack",
+    "spacing": 3,
+    "children": [
+      { "type": "skeleton", "variant": "circular", "width": "40px", "height": "40px" },
+      { "type": "skeleton", "variant": "text", "width": "80%" },
+      { "type": "skeleton", "variant": "text", "width": "60%" }
+    ]
+  }
+}
+```
+
+### Upload Progress
+
+```json
+{
+  "type": "stack",
+  "spacing": 2,
+  "children": [
+    { "type": "text", "content": "Uploading file..." },
+    {
+      "type": "progress",
+      "value": "${data.uploadProgress}",
+      "showLabel": true,
+      "variant": "default"
+    }
+  ]
+}
+```
+
+## Performance
+
+### Avoid Excessive Animation
+
+```tsx
+// ✅ Good: Single loader
+<Loader2 className="animate-spin" />
+
+// ❌ Bad: Many loaders
+{items.map(() => <Loader2 className="animate-spin" />)}
+```
+
+### Debounce Updates
+
+```tsx
+// For frequent progress updates
+const debouncedProgress = useDebounce(progress, 100);
+```
+
+## Checklist
+
+- [ ] Loading states handled
+- [ ] Progress updates smoothly
+- [ ] Skeletons match content
+- [ ] Accessible ARIA attributes
+- [ ] Animations performant
+- [ ] Tests added
+
+---
+
+**Principle**: Provide **clear**, **timely** feedback about system state.
diff --git a/.github/prompts/components/form-components.md b/.github/prompts/components/form-components.md
new file mode 100644
index 0000000..bb7f258
--- /dev/null
+++ b/.github/prompts/components/form-components.md
@@ -0,0 +1,475 @@
+# AI Prompt: Form Components
+
+## Overview
+
+Form components handle **user input** and **data collection**. They are the most interactive components in ObjectUI, managing state, validation, and user interactions while remaining controlled by schemas.
+
+**Category**: `form`  
+**Examples**: input, select, checkbox, radio, switch, textarea, button, slider  
+**Complexity**: ⭐⭐⭐ Complex  
+**Package**: `@object-ui/components/src/renderers/form/`
+
+## Purpose
+
+Form components:
+1. **Collect user input** (text, selections, toggles)
+2. **Validate data** (required, patterns, ranges)
+3. **Provide feedback** (errors, hints, loading states)
+4. **Submit data** (actions, API calls)
+
+## Core Form Components
+
+### Input Component
+Text input field with validation.
+
+**Schema**:
+```json
+{
+  "type": "input",
+  "name": "email",
+  "label": "Email Address",
+  "placeholder": "you@example.com",
+  "inputType": "email",
+  "required": true,
+  "validation": {
+    "type": "email",
+    "message": "Invalid email address"
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import { Input as ShadcnInput } from '@/ui/input';
+import { Label } from '@/ui/label';
+import { useDataContext } from '@object-ui/react';
+
+export function InputRenderer({ schema }: RendererProps<InputSchema>) {
+  const { data, setData } = useDataContext();
+  const value = data[schema.name] || schema.defaultValue || '';
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setData(schema.name, e.target.value);
+  };
+
+  return (
+    <div className={cn('space-y-2', schema.className)}>
+      {schema.label && (
+        <Label htmlFor={schema.name}>
+          {schema.label}
+          {schema.required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      
+      <ShadcnInput
+        id={schema.name}
+        name={schema.name}
+        type={schema.inputType || 'text'}
+        placeholder={schema.placeholder}
+        value={value}
+        onChange={handleChange}
+        disabled={schema.disabled}
+        readOnly={schema.readOnly}
+        required={schema.required}
+        aria-required={schema.required}
+        aria-invalid={!!schema.error}
+        aria-describedby={schema.description ? `${schema.name}-description` : undefined}
+      />
+      
+      {schema.description && (
+        <p id={`${schema.name}-description`} className="text-sm text-muted-foreground">
+          {schema.description}
+        </p>
+      )}
+      
+      {schema.error && (
+        <p className="text-sm text-destructive" role="alert">
+          {schema.error}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+### Select Component
+Dropdown selection field.
+
+**Schema**:
+```json
+{
+  "type": "select",
+  "name": "country",
+  "label": "Country",
+  "placeholder": "Select a country",
+  "options": [
+    { "value": "us", "label": "United States" },
+    { "value": "uk", "label": "United Kingdom" },
+    { "value": "ca", "label": "Canada" }
+  ],
+  "required": true
+}
+```
+
+**Implementation**:
+```tsx
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/ui/select';
+import { Label } from '@/ui/label';
+import { useDataContext } from '@object-ui/react';
+
+export function SelectRenderer({ schema }: RendererProps<SelectSchema>) {
+  const { data, setData } = useDataContext();
+  const value = data[schema.name] || schema.defaultValue || '';
+
+  const handleChange = (newValue: string) => {
+    setData(schema.name, newValue);
+  };
+
+  return (
+    <div className={cn('space-y-2', schema.className)}>
+      {schema.label && (
+        <Label htmlFor={schema.name}>
+          {schema.label}
+          {schema.required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      
+      <Select value={value} onValueChange={handleChange} disabled={schema.disabled}>
+        <SelectTrigger id={schema.name}>
+          <SelectValue placeholder={schema.placeholder} />
+        </SelectTrigger>
+        <SelectContent>
+          {schema.options?.map((option) => (
+            <SelectItem key={option.value} value={option.value}>
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectContent>
+      </Select>
+      
+      {schema.description && (
+        <p className="text-sm text-muted-foreground">
+          {schema.description}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+### Checkbox Component
+Boolean toggle input.
+
+**Schema**:
+```json
+{
+  "type": "checkbox",
+  "name": "agree",
+  "label": "I agree to the terms and conditions",
+  "required": true
+}
+```
+
+**Implementation**:
+```tsx
+import { Checkbox as ShadcnCheckbox } from '@/ui/checkbox';
+import { Label } from '@/ui/label';
+import { useDataContext } from '@object-ui/react';
+
+export function CheckboxRenderer({ schema }: RendererProps<CheckboxSchema>) {
+  const { data, setData } = useDataContext();
+  const checked = data[schema.name] || schema.defaultValue || false;
+
+  const handleChange = (newChecked: boolean) => {
+    setData(schema.name, newChecked);
+  };
+
+  return (
+    <div className={cn('flex items-center space-x-2', schema.className)}>
+      <ShadcnCheckbox
+        id={schema.name}
+        checked={checked}
+        onCheckedChange={handleChange}
+        disabled={schema.disabled}
+        required={schema.required}
+        aria-required={schema.required}
+      />
+      
+      {schema.label && (
+        <Label 
+          htmlFor={schema.name}
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          {schema.label}
+          {schema.required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+    </div>
+  );
+}
+```
+
+### Button Component
+Action trigger button.
+
+**Schema**:
+```json
+{
+  "type": "button",
+  "label": "Submit",
+  "variant": "primary",
+  "size": "default",
+  "loading": false,
+  "onClick": {
+    "type": "action",
+    "name": "submitForm"
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import { Button as ShadcnButton } from '@/ui/button';
+import { useAction, useExpression } from '@object-ui/react';
+import { Loader2 } from 'lucide-react';
+
+export function ButtonRenderer({ schema }: RendererProps<ButtonSchema>) {
+  const handleAction = useAction();
+  const loading = useExpression(schema.loading, {}, false);
+
+  const handleClick = () => {
+    if (schema.onClick && !loading) {
+      handleAction(schema.onClick);
+    }
+  };
+
+  return (
+    <ShadcnButton
+      variant={schema.variant}
+      size={schema.size}
+      disabled={schema.disabled || loading}
+      className={schema.className}
+      onClick={handleClick}
+      type={schema.type === 'submit' ? 'submit' : 'button'}
+    >
+      {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {schema.label}
+    </ShadcnButton>
+  );
+}
+```
+
+### Radio Group Component
+Single selection from multiple options.
+
+**Schema**:
+```json
+{
+  "type": "radio",
+  "name": "plan",
+  "label": "Select a plan",
+  "options": [
+    { "value": "free", "label": "Free" },
+    { "value": "pro", "label": "Pro" },
+    { "value": "enterprise", "label": "Enterprise" }
+  ]
+}
+```
+
+**Implementation**:
+```tsx
+import { RadioGroup, RadioGroupItem } from '@/ui/radio-group';
+import { Label } from '@/ui/label';
+import { useDataContext } from '@object-ui/react';
+
+export function RadioRenderer({ schema }: RendererProps<RadioSchema>) {
+  const { data, setData } = useDataContext();
+  const value = data[schema.name] || schema.defaultValue || '';
+
+  const handleChange = (newValue: string) => {
+    setData(schema.name, newValue);
+  };
+
+  return (
+    <div className={cn('space-y-2', schema.className)}>
+      {schema.label && (
+        <Label>
+          {schema.label}
+          {schema.required && <span className="text-destructive ml-1">*</span>}
+        </Label>
+      )}
+      
+      <RadioGroup value={value} onValueChange={handleChange} disabled={schema.disabled}>
+        {schema.options?.map((option) => (
+          <div key={option.value} className="flex items-center space-x-2">
+            <RadioGroupItem value={option.value} id={`${schema.name}-${option.value}`} />
+            <Label htmlFor={`${schema.name}-${option.value}`}>{option.label}</Label>
+          </div>
+        ))}
+      </RadioGroup>
+      
+      {schema.description && (
+        <p className="text-sm text-muted-foreground">
+          {schema.description}
+        </p>
+      )}
+    </div>
+  );
+}
+```
+
+## Development Guidelines
+
+### Data Binding
+
+Always use `useDataContext` for two-way binding:
+
+```tsx
+// ✅ Good: Two-way binding
+const { data, setData } = useDataContext();
+const value = data[schema.name] || '';
+
+const handleChange = (e) => {
+  setData(schema.name, e.target.value);
+};
+
+// ❌ Bad: Local state
+const [value, setValue] = useState('');
+```
+
+### Validation
+
+Support schema-based validation:
+
+```tsx
+const validate = () => {
+  if (schema.required && !value) {
+    return 'This field is required';
+  }
+  
+  if (schema.validation?.type === 'email' && !isValidEmail(value)) {
+    return schema.validation.message || 'Invalid email';
+  }
+  
+  return null;
+};
+```
+
+### Accessibility
+
+```tsx
+// ✅ Good: Accessible form field
+<input
+  id={schema.name}
+  name={schema.name}
+  aria-required={schema.required}
+  aria-invalid={!!error}
+  aria-describedby={`${schema.name}-description`}
+/>
+
+<p id={`${schema.name}-description`}>
+  {schema.description}
+</p>
+
+{error && (
+  <p role="alert" className="text-destructive">
+    {error}
+  </p>
+)}
+```
+
+### Loading States
+
+Support loading states for async operations:
+
+```tsx
+<button disabled={loading || schema.disabled}>
+  {loading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+  {schema.label}
+</button>
+```
+
+## Testing
+
+```tsx
+describe('InputRenderer', () => {
+  it('updates data context on change', () => {
+    const schema = {
+      type: 'input',
+      name: 'email',
+      label: 'Email'
+    };
+
+    const { getByLabelText } = render(
+      <DataProvider data={{}}>
+        <SchemaRenderer schema={schema} />
+      </DataProvider>
+    );
+
+    const input = getByLabelText('Email');
+    fireEvent.change(input, { target: { value: 'test@example.com' } });
+
+    expect(input).toHaveValue('test@example.com');
+  });
+
+  it('shows required indicator', () => {
+    const schema = {
+      type: 'input',
+      name: 'email',
+      label: 'Email',
+      required: true
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    expect(screen.getByText('*')).toBeInTheDocument();
+  });
+});
+```
+
+## Common Patterns
+
+### Form with Validation
+
+```json
+{
+  "type": "form",
+  "fields": [
+    {
+      "type": "input",
+      "name": "email",
+      "label": "Email",
+      "required": true,
+      "validation": { "type": "email" }
+    },
+    {
+      "type": "input",
+      "name": "password",
+      "label": "Password",
+      "inputType": "password",
+      "required": true,
+      "validation": { "minLength": 8 }
+    },
+    {
+      "type": "button",
+      "label": "Submit",
+      "variant": "primary",
+      "onClick": { "type": "action", "name": "submitForm" }
+    }
+  ]
+}
+```
+
+## Checklist
+
+- [ ] Two-way data binding with `useDataContext`
+- [ ] Validation support
+- [ ] Accessible labels and ARIA attributes
+- [ ] Loading states
+- [ ] Error messages
+- [ ] Required indicators
+- [ ] Tests added
+
+---
+
+**Principle**: Forms are **controlled** by data context and **validated** by schemas.
diff --git a/.github/prompts/components/navigation-components.md b/.github/prompts/components/navigation-components.md
new file mode 100644
index 0000000..399c132
--- /dev/null
+++ b/.github/prompts/components/navigation-components.md
@@ -0,0 +1,409 @@
+# AI Prompt: Navigation Components
+
+## Overview
+
+Navigation components help users **move through** and **orient within** the application. They provide structure, hierarchy, and wayfinding for complex interfaces.
+
+**Category**: `navigation`  
+**Examples**: tabs, breadcrumb, menu, menubar, pagination, navigation-menu  
+**Complexity**: ⭐⭐⭐ Complex  
+**Package**: `@object-ui/components/src/renderers/navigation/`
+
+## Purpose
+
+Navigation components:
+1. **Switch between views** (tabs, menu)
+2. **Show current location** (breadcrumbs, active states)
+3. **Navigate hierarchies** (nested menus, tree navigation)
+4. **Page through data** (pagination)
+
+## Core Navigation Components
+
+### Tabs Component
+
+**Schema**:
+```json
+{
+  "type": "tabs",
+  "defaultValue": "tab1",
+  "items": [
+    { "value": "tab1", "label": "Overview", "content": {...} },
+    { "value": "tab2", "label": "Analytics", "content": {...} },
+    { "value": "tab3", "label": "Reports", "content": {...} }
+  ]
+}
+```
+
+**Implementation**:
+```tsx
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/ui/tabs';
+import { SchemaRenderer, useDataContext } from '@object-ui/react';
+
+export function TabsRenderer({ schema }: RendererProps<TabsSchema>) {
+  const { data, setData } = useDataContext();
+  const activeTab = data[schema.name || 'activeTab'] || schema.defaultValue;
+
+  const handleChange = (value: string) => {
+    setData(schema.name || 'activeTab', value);
+  };
+
+  return (
+    <Tabs value={activeTab} onValueChange={handleChange} className={schema.className}>
+      <TabsList>
+        {schema.items?.map((item) => (
+          <TabsTrigger key={item.value} value={item.value}>
+            {item.label}
+          </TabsTrigger>
+        ))}
+      </TabsList>
+      
+      {schema.items?.map((item) => (
+        <TabsContent key={item.value} value={item.value}>
+          {item.content && <SchemaRenderer schema={item.content} />}
+        </TabsContent>
+      ))}
+    </Tabs>
+  );
+}
+```
+
+### Breadcrumb Component
+
+**Schema**:
+```json
+{
+  "type": "breadcrumb",
+  "items": [
+    { "label": "Home", "href": "/" },
+    { "label": "Products", "href": "/products" },
+    { "label": "Laptop", "href": "/products/laptop" }
+  ]
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from '@/ui/breadcrumb';
+
+export function BreadcrumbRenderer({ schema }: RendererProps<BreadcrumbSchema>) {
+  return (
+    <Breadcrumb className={schema.className}>
+      <BreadcrumbList>
+        {schema.items?.map((item, index) => {
+          const isLast = index === schema.items.length - 1;
+          
+          return (
+            <React.Fragment key={index}>
+              <BreadcrumbItem>
+                {isLast ? (
+                  <BreadcrumbPage>{item.label}</BreadcrumbPage>
+                ) : (
+                  <BreadcrumbLink href={item.href}>
+                    {item.label}
+                  </BreadcrumbLink>
+                )}
+              </BreadcrumbItem>
+              
+              {!isLast && <BreadcrumbSeparator />}
+            </React.Fragment>
+          );
+        })}
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+}
+```
+
+### Menu Component
+
+**Schema**:
+```json
+{
+  "type": "menu",
+  "items": [
+    {
+      "label": "Dashboard",
+      "icon": "Home",
+      "href": "/dashboard"
+    },
+    {
+      "label": "Settings",
+      "icon": "Settings",
+      "items": [
+        { "label": "Profile", "href": "/settings/profile" },
+        { "label": "Security", "href": "/settings/security" }
+      ]
+    }
+  ]
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+} from '@/ui/navigation-menu';
+import * as Icons from 'lucide-react';
+
+export function MenuRenderer({ schema }: RendererProps<MenuSchema>) {
+  return (
+    <NavigationMenu className={schema.className}>
+      <NavigationMenuList>
+        {schema.items?.map((item, index) => (
+          <NavigationMenuItem key={index}>
+            {item.items ? (
+              <>
+                <NavigationMenuTrigger>
+                  {item.icon && <Icon name={item.icon} className="mr-2 h-4 w-4" />}
+                  {item.label}
+                </NavigationMenuTrigger>
+                <NavigationMenuContent>
+                  <ul className="grid gap-3 p-4 w-[400px]">
+                    {item.items.map((subItem, subIndex) => (
+                      <li key={subIndex}>
+                        <NavigationMenuLink href={subItem.href}>
+                          {subItem.label}
+                        </NavigationMenuLink>
+                      </li>
+                    ))}
+                  </ul>
+                </NavigationMenuContent>
+              </>
+            ) : (
+              <NavigationMenuLink href={item.href}>
+                {item.icon && <Icon name={item.icon} className="mr-2 h-4 w-4" />}
+                {item.label}
+              </NavigationMenuLink>
+            )}
+          </NavigationMenuItem>
+        ))}
+      </NavigationMenuList>
+    </NavigationMenu>
+  );
+}
+```
+
+### Pagination Component
+
+**Schema**:
+```json
+{
+  "type": "pagination",
+  "currentPage": 1,
+  "totalPages": 10,
+  "onPageChange": {
+    "type": "action",
+    "name": "changePage"
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Pagination,
+  PaginationContent,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/ui/pagination';
+import { useAction, useExpression } from '@object-ui/react';
+
+export function PaginationRenderer({ schema }: RendererProps<PaginationSchema>) {
+  const handleAction = useAction();
+  const currentPage = useExpression(schema.currentPage, {}, 1);
+  const totalPages = useExpression(schema.totalPages, {}, 1);
+
+  const handlePageChange = (page: number) => {
+    if (schema.onPageChange) {
+      handleAction({
+        ...schema.onPageChange,
+        payload: { page }
+      });
+    }
+  };
+
+  return (
+    <Pagination className={schema.className}>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious
+            onClick={() => handlePageChange(currentPage - 1)}
+            disabled={currentPage === 1}
+          />
+        </PaginationItem>
+        
+        {Array.from({ length: totalPages }, (_, i) => i + 1).map((page) => (
+          <PaginationItem key={page}>
+            <PaginationLink
+              onClick={() => handlePageChange(page)}
+              isActive={page === currentPage}
+            >
+              {page}
+            </PaginationLink>
+          </PaginationItem>
+        ))}
+        
+        <PaginationItem>
+          <PaginationNext
+            onClick={() => handlePageChange(currentPage + 1)}
+            disabled={currentPage === totalPages}
+          />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}
+```
+
+## Development Guidelines
+
+### Active State Management
+
+Track and display active navigation item:
+
+```tsx
+const { data } = useDataContext();
+const currentPath = data.currentPath || '/';
+
+<NavigationMenuLink 
+  href={item.href}
+  className={cn(
+    item.href === currentPath && 'bg-accent'
+  )}
+>
+  {item.label}
+</NavigationMenuLink>
+```
+
+### Keyboard Navigation
+
+Support keyboard shortcuts:
+
+```tsx
+// Arrow keys, Home, End handled by Radix
+<NavigationMenu>
+  {/* Automatic keyboard navigation */}
+</NavigationMenu>
+```
+
+### Accessibility
+
+```tsx
+// ✅ Good: Accessible navigation
+<nav aria-label="Main navigation">
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuLink href="/">Home</NavigationMenuLink>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
+</nav>
+
+// Breadcrumb
+<nav aria-label="Breadcrumb">
+  <Breadcrumb>
+    {/* ... */}
+  </Breadcrumb>
+</nav>
+```
+
+## Testing
+
+```tsx
+describe('TabsRenderer', () => {
+  it('renders tabs', () => {
+    const schema = {
+      type: 'tabs',
+      items: [
+        { value: 'tab1', label: 'Tab 1', content: { type: 'text', content: 'Content 1' } },
+        { value: 'tab2', label: 'Tab 2', content: { type: 'text', content: 'Content 2' } }
+      ]
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    expect(screen.getByText('Tab 1')).toBeInTheDocument();
+    expect(screen.getByText('Tab 2')).toBeInTheDocument();
+  });
+
+  it('switches tabs on click', () => {
+    // Test tab switching
+  });
+});
+```
+
+## Common Patterns
+
+### Dashboard Tabs
+
+```json
+{
+  "type": "tabs",
+  "items": [
+    {
+      "value": "overview",
+      "label": "Overview",
+      "content": {
+        "type": "grid",
+        "columns": 3,
+        "items": [...]
+      }
+    },
+    {
+      "value": "analytics",
+      "label": "Analytics",
+      "content": {
+        "type": "stack",
+        "children": [...]
+      }
+    }
+  ]
+}
+```
+
+### Sidebar Navigation
+
+```json
+{
+  "type": "stack",
+  "spacing": 1,
+  "className": "w-64 p-4",
+  "children": [
+    {
+      "type": "menu",
+      "items": [
+        { "label": "Dashboard", "icon": "Home", "href": "/" },
+        { "label": "Users", "icon": "Users", "href": "/users" },
+        { "label": "Settings", "icon": "Settings", "href": "/settings" }
+      ]
+    }
+  ]
+}
+```
+
+## Checklist
+
+- [ ] Active state tracking
+- [ ] Keyboard navigation
+- [ ] Accessible markup
+- [ ] Nested navigation supported
+- [ ] Tests added
+
+---
+
+**Principle**: Navigation is **clear**, **accessible**, and **keyboard-friendly**.
diff --git a/.github/prompts/components/overlay-components.md b/.github/prompts/components/overlay-components.md
new file mode 100644
index 0000000..f52c306
--- /dev/null
+++ b/.github/prompts/components/overlay-components.md
@@ -0,0 +1,473 @@
+# AI Prompt: Overlay Components
+
+## Overview
+
+Overlay components display content **on top of the main interface** in layers. They include modals, popovers, tooltips, and dropdowns that temporarily cover or augment the main content.
+
+**Category**: `overlay`  
+**Examples**: dialog, popover, tooltip, dropdown-menu, context-menu, sheet, drawer  
+**Complexity**: ⭐⭐⭐ Complex  
+**Package**: `@object-ui/components/src/renderers/overlay/`
+
+## Purpose
+
+Overlay components:
+1. **Display modal content** (dialogs, alerts)
+2. **Show contextual info** (tooltips, popovers)
+3. **Present actions** (dropdown menus, context menus)
+4. **Slide-in panels** (sheets, drawers)
+
+## Core Overlay Components
+
+### Dialog Component
+Modal dialog box.
+
+**Schema**:
+```json
+{
+  "type": "dialog",
+  "title": "Confirm Action",
+  "description": "Are you sure you want to proceed?",
+  "trigger": {
+    "type": "button",
+    "label": "Open Dialog"
+  },
+  "content": {
+    "type": "div",
+    "children": [...]
+  },
+  "footer": {
+    "type": "flex",
+    "justify": "end",
+    "gap": 2,
+    "children": [
+      { "type": "button", "label": "Cancel", "variant": "outline" },
+      { "type": "button", "label": "Confirm", "variant": "primary" }
+    ]
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/ui/dialog';
+import { SchemaRenderer } from '@object-ui/react';
+
+export function DialogRenderer({ schema }: RendererProps<DialogSchema>) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      {schema.trigger && (
+        <DialogTrigger asChild>
+          <SchemaRenderer schema={schema.trigger} />
+        </DialogTrigger>
+      )}
+      
+      <DialogContent className={schema.className}>
+        <DialogHeader>
+          {schema.title && <DialogTitle>{schema.title}</DialogTitle>}
+          {schema.description && <DialogDescription>{schema.description}</DialogDescription>}
+        </DialogHeader>
+        
+        {schema.content && (
+          <SchemaRenderer schema={schema.content} />
+        )}
+        
+        {schema.footer && (
+          <DialogFooter>
+            <SchemaRenderer schema={schema.footer} />
+          </DialogFooter>
+        )}
+      </DialogContent>
+    </Dialog>
+  );
+}
+```
+
+### Popover Component
+Floating content container.
+
+**Schema**:
+```json
+{
+  "type": "popover",
+  "trigger": {
+    "type": "button",
+    "label": "Open Popover"
+  },
+  "content": {
+    "type": "div",
+    "className": "p-4",
+    "children": [
+      { "type": "text", "content": "Popover content here" }
+    ]
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from '@/ui/popover';
+
+export function PopoverRenderer({ schema }: RendererProps<PopoverSchema>) {
+  return (
+    <Popover>
+      {schema.trigger && (
+        <PopoverTrigger asChild>
+          <SchemaRenderer schema={schema.trigger} />
+        </PopoverTrigger>
+      )}
+      
+      <PopoverContent className={schema.className}>
+        {schema.content && (
+          <SchemaRenderer schema={schema.content} />
+        )}
+      </PopoverContent>
+    </Popover>
+  );
+}
+```
+
+### Tooltip Component
+Hover information display.
+
+**Schema**:
+```json
+{
+  "type": "tooltip",
+  "content": "Click to copy",
+  "trigger": {
+    "type": "button",
+    "label": "Copy"
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from '@/ui/tooltip';
+
+export function TooltipRenderer({ schema }: RendererProps<TooltipSchema>) {
+  return (
+    <TooltipProvider>
+      <Tooltip>
+        {schema.trigger && (
+          <TooltipTrigger asChild>
+            <SchemaRenderer schema={schema.trigger} />
+          </TooltipTrigger>
+        )}
+        
+        <TooltipContent>
+          <p>{schema.content}</p>
+        </TooltipContent>
+      </Tooltip>
+    </TooltipProvider>
+  );
+}
+```
+
+### Dropdown Menu Component
+Action menu overlay.
+
+**Schema**:
+```json
+{
+  "type": "dropdown-menu",
+  "trigger": {
+    "type": "button",
+    "label": "Actions"
+  },
+  "items": [
+    { "label": "Edit", "onClick": { "type": "action", "name": "edit" } },
+    { "label": "Delete", "onClick": { "type": "action", "name": "delete" } }
+  ]
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/ui/dropdown-menu';
+import { useAction } from '@object-ui/react';
+
+export function DropdownMenuRenderer({ schema }: RendererProps<DropdownMenuSchema>) {
+  const handleAction = useAction();
+
+  return (
+    <DropdownMenu>
+      {schema.trigger && (
+        <DropdownMenuTrigger asChild>
+          <SchemaRenderer schema={schema.trigger} />
+        </DropdownMenuTrigger>
+      )}
+      
+      <DropdownMenuContent>
+        {schema.items?.map((item, index) => (
+          <DropdownMenuItem
+            key={index}
+            onClick={() => item.onClick && handleAction(item.onClick)}
+          >
+            {item.label}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
+```
+
+### Sheet Component
+Slide-in side panel.
+
+**Schema**:
+```json
+{
+  "type": "sheet",
+  "side": "right" | "left" | "top" | "bottom",
+  "title": "Settings",
+  "description": "Manage your preferences",
+  "trigger": {
+    "type": "button",
+    "label": "Open Settings"
+  },
+  "content": {
+    "type": "div",
+    "children": [...]
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from '@/ui/sheet';
+
+export function SheetRenderer({ schema }: RendererProps<SheetSchema>) {
+  return (
+    <Sheet>
+      {schema.trigger && (
+        <SheetTrigger asChild>
+          <SchemaRenderer schema={schema.trigger} />
+        </SheetTrigger>
+      )}
+      
+      <SheetContent side={schema.side || 'right'}>
+        <SheetHeader>
+          {schema.title && <SheetTitle>{schema.title}</SheetTitle>}
+          {schema.description && <SheetDescription>{schema.description}</SheetDescription>}
+        </SheetHeader>
+        
+        {schema.content && (
+          <div className="mt-4">
+            <SchemaRenderer schema={schema.content} />
+          </div>
+        )}
+      </SheetContent>
+    </Sheet>
+  );
+}
+```
+
+## Development Guidelines
+
+### State Management
+
+Control open/close state via data context:
+
+```tsx
+const { data, setData } = useDataContext();
+const isOpen = data[schema.id + '_open'] || false;
+
+<Dialog open={isOpen} onOpenChange={(open) => setData(schema.id + '_open', open)}>
+```
+
+### Focus Management
+
+Manage focus properly:
+
+```tsx
+// Focus trap in dialog
+<DialogContent>
+  <DialogTitle>Title</DialogTitle>
+  {/* Focus automatically trapped */}
+  <input autoFocus />
+</DialogContent>
+
+// Return focus on close
+onOpenChange={(open) => {
+  if (!open) {
+    // Focus returns to trigger automatically
+  }
+}}
+```
+
+### Keyboard Navigation
+
+Support keyboard shortcuts:
+
+```tsx
+// Close on Escape
+<Dialog onEscapeKeyDown={() => setOpen(false)}>
+
+// Navigation in menu
+<DropdownMenu>
+  {/* Arrow keys navigate automatically */}
+</DropdownMenu>
+```
+
+### Accessibility
+
+```tsx
+// ✅ Good: Accessible dialog
+<Dialog>
+  <DialogTitle>Confirm Action</DialogTitle>
+  <DialogDescription>This action cannot be undone.</DialogDescription>
+  <DialogContent>
+    <button>Cancel</button>
+    <button>Confirm</button>
+  </DialogContent>
+</Dialog>
+
+// Proper ARIA attributes are added automatically by Shadcn/Radix
+```
+
+## Testing
+
+```tsx
+describe('DialogRenderer', () => {
+  it('opens dialog on trigger click', async () => {
+    const schema = {
+      type: 'dialog',
+      title: 'Test Dialog',
+      trigger: { type: 'button', label: 'Open' },
+      content: { type: 'text', content: 'Dialog content' }
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    fireEvent.click(screen.getByText('Open'));
+    
+    await waitFor(() => {
+      expect(screen.getByText('Test Dialog')).toBeInTheDocument();
+    });
+  });
+
+  it('closes dialog on backdrop click', async () => {
+    // Test backdrop click
+  });
+});
+```
+
+## Common Patterns
+
+### Confirmation Dialog
+
+```json
+{
+  "type": "dialog",
+  "title": "Delete Item",
+  "description": "This action cannot be undone.",
+  "trigger": {
+    "type": "button",
+    "label": "Delete",
+    "variant": "destructive"
+  },
+  "footer": {
+    "type": "flex",
+    "justify": "end",
+    "gap": 2,
+    "children": [
+      { "type": "button", "label": "Cancel", "variant": "outline" },
+      {
+        "type": "button",
+        "label": "Delete",
+        "variant": "destructive",
+        "onClick": { "type": "action", "name": "confirmDelete" }
+      }
+    ]
+  }
+}
+```
+
+### Filter Popover
+
+```json
+{
+  "type": "popover",
+  "trigger": {
+    "type": "button",
+    "label": "Filters"
+  },
+  "content": {
+    "type": "stack",
+    "spacing": 3,
+    "className": "p-4 w-64",
+    "children": [
+      { "type": "input", "name": "search", "placeholder": "Search..." },
+      { "type": "select", "name": "category", "label": "Category", "options": [...] },
+      { "type": "button", "label": "Apply", "variant": "primary" }
+    ]
+  }
+}
+```
+
+## Performance
+
+### Lazy Load Content
+
+```tsx
+// Load content only when opened
+{isOpen && <DialogContent>{/* Heavy content */}</DialogContent>}
+```
+
+### Portal Rendering
+
+Overlays are rendered in portals (handled by Shadcn/Radix):
+
+```tsx
+// Automatically rendered at document.body
+<Dialog>
+  <DialogContent>{/* Rendered in portal */}</DialogContent>
+</Dialog>
+```
+
+## Checklist
+
+- [ ] Open/close state managed
+- [ ] Focus management implemented
+- [ ] Keyboard navigation supported
+- [ ] Accessible ARIA attributes
+- [ ] Backdrop/overlay handled
+- [ ] Tests added
+
+---
+
+**Principle**: Overlays are **accessible**, **keyboard-friendly**, and **properly layered**.
diff --git a/.github/prompts/plugins/plugin-development.md b/.github/prompts/plugins/plugin-development.md
new file mode 100644
index 0000000..74e6d61
--- /dev/null
+++ b/.github/prompts/plugins/plugin-development.md
@@ -0,0 +1,404 @@
+# AI Prompt: Plugin Development
+
+## Overview
+
+Plugins extend ObjectUI with specialized functionality that's **lazy-loaded** on demand. They follow the same schema-driven architecture while adding domain-specific components and features.
+
+**Purpose**: Extend ObjectUI without bloating core bundle  
+**Examples**: charts, editor, kanban, markdown, custom data sources  
+**Loading**: Lazy-loaded via dynamic imports  
+
+## Plugin Architecture
+
+### Package Structure
+
+```
+packages/plugin-{name}/
+├── package.json
+├── src/
+│   ├── index.ts              # Plugin registration
+│   ├── components/           # Plugin-specific components
+│   │   ├── ChartRenderer.tsx
+│   │   └── ...
+│   ├── types.ts             # Type definitions
+│   └── utils/               # Helper functions
+└── README.md
+```
+
+### Plugin Registration
+
+Every plugin exports a `register` function:
+
+```ts
+// packages/plugin-charts/src/index.ts
+import { registerRenderer } from '@object-ui/core';
+import { ChartRenderer } from './components/ChartRenderer';
+
+export function registerChartsPlugin() {
+  registerRenderer('chart', ChartRenderer);
+  registerRenderer('bar-chart', BarChartRenderer);
+  registerRenderer('line-chart', LineChartRenderer);
+  registerRenderer('pie-chart', PieChartRenderer);
+}
+
+// Export types
+export * from './types';
+```
+
+### Lazy Loading
+
+Plugins are loaded on-demand:
+
+```tsx
+// In your app
+const loadChartsPlugin = async () => {
+  const { registerChartsPlugin } = await import('@object-ui/plugin-charts');
+  registerChartsPlugin();
+};
+
+// Load when needed
+if (schema.type === 'chart') {
+  await loadChartsPlugin();
+}
+```
+
+## Example Plugins
+
+### Charts Plugin
+
+Visualization components using Chart.js or Recharts.
+
+**Schema**:
+```json
+{
+  "type": "chart",
+  "chartType": "line" | "bar" | "pie",
+  "data": {
+    "labels": ["Jan", "Feb", "Mar"],
+    "datasets": [{
+      "label": "Sales",
+      "data": [100, 200, 150]
+    }]
+  },
+  "options": {
+    "responsive": true,
+    "plugins": {
+      "legend": { "display": true }
+    }
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import { Line, Bar, Pie } from 'react-chartjs-2';
+import { useExpression } from '@object-ui/react';
+
+export function ChartRenderer({ schema }: RendererProps<ChartSchema>) {
+  const data = useExpression(schema.data, {}, { labels: [], datasets: [] });
+  
+  const ChartComponent = {
+    line: Line,
+    bar: Bar,
+    pie: Pie
+  }[schema.chartType];
+
+  if (!ChartComponent) {
+    return <div>Unsupported chart type: {schema.chartType}</div>;
+  }
+
+  return (
+    <div className={schema.className}>
+      <ChartComponent data={data} options={schema.options} />
+    </div>
+  );
+}
+```
+
+### Rich Editor Plugin
+
+WYSIWYG text editor using TipTap or Slate.
+
+**Schema**:
+```json
+{
+  "type": "editor",
+  "name": "content",
+  "placeholder": "Start writing...",
+  "toolbar": ["bold", "italic", "link", "heading"],
+  "defaultValue": "<p>Hello world</p>"
+}
+```
+
+**Implementation**:
+```tsx
+import { useEditor, EditorContent } from '@tiptap/react';
+import StarterKit from '@tiptap/starter-kit';
+import { useDataContext } from '@object-ui/react';
+
+export function EditorRenderer({ schema }: RendererProps<EditorSchema>) {
+  const { data, setData } = useDataContext();
+
+  const editor = useEditor({
+    extensions: [StarterKit],
+    content: data[schema.name] || schema.defaultValue || '',
+    onUpdate: ({ editor }) => {
+      setData(schema.name, editor.getHTML());
+    }
+  });
+
+  return (
+    <div className={cn('border rounded-md', schema.className)}>
+      <Toolbar editor={editor} items={schema.toolbar} />
+      <EditorContent editor={editor} />
+    </div>
+  );
+}
+```
+
+### Kanban Plugin
+
+Drag-and-drop kanban board.
+
+**Schema**:
+```json
+{
+  "type": "kanban",
+  "columns": [
+    {
+      "id": "todo",
+      "title": "To Do",
+      "items": [
+        { "id": "1", "title": "Task 1", "description": "..." }
+      ]
+    },
+    {
+      "id": "in-progress",
+      "title": "In Progress",
+      "items": []
+    }
+  ],
+  "onMove": {
+    "type": "action",
+    "name": "moveCard"
+  }
+}
+```
+
+**Implementation**:
+```tsx
+import { DndContext, DragEndEvent } from '@dnd-kit/core';
+import { useAction, useExpression } from '@object-ui/react';
+
+export function KanbanRenderer({ schema }: RendererProps<KanbanSchema>) {
+  const handleAction = useAction();
+  const columns = useExpression(schema.columns, {}, []);
+
+  const handleDragEnd = (event: DragEndEvent) => {
+    if (schema.onMove) {
+      handleAction({
+        ...schema.onMove,
+        payload: {
+          itemId: event.active.id,
+          fromColumn: event.over?.data.current?.columnId,
+          toColumn: event.over?.id
+        }
+      });
+    }
+  };
+
+  return (
+    <DndContext onDragEnd={handleDragEnd}>
+      <div className={cn('flex gap-4', schema.className)}>
+        {columns.map((column) => (
+          <KanbanColumn key={column.id} column={column} />
+        ))}
+      </div>
+    </DndContext>
+  );
+}
+```
+
+### Markdown Plugin
+
+Markdown renderer with syntax highlighting.
+
+**Schema**:
+```json
+{
+  "type": "markdown",
+  "content": "# Hello\n\nThis is **markdown**.",
+  "className": "prose"
+}
+```
+
+**Implementation**:
+```tsx
+import ReactMarkdown from 'react-markdown';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+
+export function MarkdownRenderer({ schema }: RendererProps<MarkdownSchema>) {
+  return (
+    <div className={cn('prose dark:prose-invert', schema.className)}>
+      <ReactMarkdown
+        components={{
+          code({ node, inline, className, children, ...props }) {
+            const match = /language-(\w+)/.exec(className || '');
+            return !inline && match ? (
+              <SyntaxHighlighter language={match[1]} {...props}>
+                {String(children).replace(/\n$/, '')}
+              </SyntaxHighlighter>
+            ) : (
+              <code className={className} {...props}>
+                {children}
+              </code>
+            );
+          }
+        }}
+      >
+        {schema.content}
+      </ReactMarkdown>
+    </div>
+  );
+}
+```
+
+## Development Guidelines
+
+### Keep Plugins Independent
+
+```ts
+// ✅ Good: Self-contained plugin
+export function registerChartsPlugin() {
+  // All dependencies bundled
+  registerRenderer('chart', ChartRenderer);
+}
+
+// ❌ Bad: Depends on core changes
+export function registerChartsPlugin(coreConfig) {
+  // Tightly coupled to core
+}
+```
+
+### Size Budget
+
+Plugins should be:
+- **Lazy-loadable**: Only loaded when used
+- **Tree-shakable**: Import only what's needed
+- **Optimized**: Minified and compressed
+
+```json
+{
+  "bundlesize": [
+    {
+      "path": "./dist/index.js",
+      "maxSize": "100kb"  // Plugin-specific limit
+    }
+  ]
+}
+```
+
+### Peer Dependencies
+
+Declare peer dependencies properly:
+
+```json
+{
+  "peerDependencies": {
+    "@object-ui/core": "workspace:*",
+    "@object-ui/react": "workspace:*",
+    "react": "^18.0.0"
+  },
+  "dependencies": {
+    "chart.js": "^4.0.0",  // Plugin-specific dependency
+    "react-chartjs-2": "^5.0.0"
+  }
+}
+```
+
+## Testing
+
+```tsx
+describe('ChartRenderer', () => {
+  beforeAll(async () => {
+    // Load plugin before tests
+    const { registerChartsPlugin } = await import('@object-ui/plugin-charts');
+    registerChartsPlugin();
+  });
+
+  it('renders line chart', () => {
+    const schema = {
+      type: 'chart',
+      chartType: 'line',
+      data: {
+        labels: ['A', 'B'],
+        datasets: [{ data: [1, 2] }]
+      }
+    };
+
+    render(<SchemaRenderer schema={schema} />);
+    
+    // Assert chart is rendered
+  });
+});
+```
+
+## Plugin Template
+
+```bash
+# Create new plugin
+pnpm create-plugin my-plugin
+
+# Generated structure:
+packages/plugin-my-plugin/
+├── package.json
+├── src/
+│   ├── index.ts
+│   ├── components/
+│   │   └── MyRenderer.tsx
+│   └── types.ts
+├── README.md
+└── tsconfig.json
+```
+
+## Documentation
+
+Every plugin must have:
+
+1. **README.md** with:
+   - Installation instructions
+   - Usage examples
+   - Schema documentation
+   - API reference
+
+2. **Type definitions**:
+   ```ts
+   export interface MyPluginSchema extends ComponentSchema {
+     type: 'my-component';
+     // Plugin-specific props
+   }
+   ```
+
+3. **Examples**:
+   ```json
+   // examples/my-plugin-demo.json
+   {
+     "type": "my-component",
+     "prop": "value"
+   }
+   ```
+
+## Checklist
+
+- [ ] Self-contained (no core modifications)
+- [ ] Lazy-loadable
+- [ ] Size optimized (< 100KB)
+- [ ] Peer dependencies declared
+- [ ] Types exported
+- [ ] Tests added
+- [ ] Documentation complete
+- [ ] Examples provided
+
+---
+
+**Principle**: Plugins **extend** without **bloating** the core.
diff --git a/.github/prompts/tools/designer-cli-runner.md b/.github/prompts/tools/designer-cli-runner.md
new file mode 100644
index 0000000..71ae6d2
--- /dev/null
+++ b/.github/prompts/tools/designer-cli-runner.md
@@ -0,0 +1,395 @@
+# AI Prompt: Designer, CLI & Runner Tools
+
+## Designer Package
+
+### Overview
+
+The Designer is a **visual drag-and-drop editor** for creating ObjectUI schemas without writing code.
+
+**Package**: `@object-ui/designer`  
+**Purpose**: Visual schema builder  
+**Tech**: React DnD, Monaco Editor  
+
+### Core Features
+
+1. **Canvas**: Drag-and-drop interface
+2. **Component Palette**: Available components
+3. **Property Inspector**: Edit component props
+4. **Schema Editor**: Raw JSON view
+5. **Preview**: Live preview mode
+
+### Architecture
+
+```tsx
+// Designer main component
+export function Designer({ initialSchema, onSave }: DesignerProps) {
+  const [schema, setSchema] = useState(initialSchema);
+  const [selectedComponent, setSelectedComponent] = useState(null);
+
+  return (
+    <div className="flex h-screen">
+      {/* Component Palette */}
+      <ComponentPalette />
+      
+      {/* Canvas */}
+      <Canvas schema={schema} onSelect={setSelectedComponent} />
+      
+      {/* Property Inspector */}
+      <PropertyInspector 
+        component={selectedComponent}
+        onChange={(props) => updateComponent(selectedComponent.id, props)}
+      />
+      
+      {/* Bottom Bar */}
+      <div className="border-t p-4 flex justify-between">
+        <SchemaEditor schema={schema} onChange={setSchema} />
+        <Button onClick={() => onSave(schema)}>Save</Button>
+      </div>
+    </div>
+  );
+}
+```
+
+### Component Palette
+
+```tsx
+const COMPONENT_CATEGORIES = [
+  {
+    name: 'Basic',
+    components: [
+      { type: 'text', icon: Type, label: 'Text' },
+      { type: 'image', icon: Image, label: 'Image' },
+      { type: 'button', icon: MousePointer, label: 'Button' }
+    ]
+  },
+  {
+    name: 'Layout',
+    components: [
+      { type: 'grid', icon: Grid, label: 'Grid' },
+      { type: 'flex', icon: Columns, label: 'Flex' }
+    ]
+  }
+];
+```
+
+### Development Guidelines
+
+- Use **React DnD** for drag-and-drop
+- Support **undo/redo** via history stack
+- **Auto-save** to local storage
+- **Export** to JSON file
+- **Import** from JSON file
+
+---
+
+## CLI Tool
+
+### Overview
+
+The CLI provides commands for **scaffolding**, **serving**, and **building** ObjectUI applications.
+
+**Package**: `@object-ui/cli`  
+**Purpose**: Command-line tool  
+**Tech**: Commander.js, Vite  
+
+### Commands
+
+```bash
+# Initialize new project
+objectui init my-app
+
+# Serve app from JSON
+objectui serve app.json
+
+# Build for production
+objectui build app.json
+
+# Create component
+objectui create component my-component
+```
+
+### Implementation
+
+```ts
+// packages/cli/src/index.ts
+import { Command } from 'commander';
+
+const program = new Command();
+
+program
+  .name('objectui')
+  .description('ObjectUI CLI')
+  .version('0.3.0');
+
+// Init command
+program
+  .command('init <name>')
+  .description('Create a new ObjectUI app')
+  .action(async (name: string) => {
+    await initProject(name);
+  });
+
+// Serve command
+program
+  .command('serve <file>')
+  .description('Start development server')
+  .option('-p, --port <port>', 'Port number', '3000')
+  .action(async (file: string, options) => {
+    await serveApp(file, { port: options.port });
+  });
+
+program.parse();
+```
+
+### Serve Command
+
+```ts
+async function serveApp(schemaFile: string, options: { port: string }) {
+  const schema = await fs.readFile(schemaFile, 'utf-8');
+  
+  // Create Vite server
+  const server = await createServer({
+    root: process.cwd(),
+    server: { port: parseInt(options.port) },
+    plugins: [
+      react(),
+      {
+        name: 'objectui-schema',
+        configureServer(server) {
+          server.middlewares.use((req, res, next) => {
+            if (req.url === '/schema.json') {
+              res.setHeader('Content-Type', 'application/json');
+              res.end(schema);
+            } else {
+              next();
+            }
+          });
+        }
+      }
+    ]
+  });
+
+  await server.listen();
+  console.log(`Server running at http://localhost:${options.port}`);
+}
+```
+
+### Init Command
+
+```ts
+async function initProject(name: string) {
+  const projectPath = path.join(process.cwd(), name);
+  
+  // Create directory
+  await fs.mkdir(projectPath, { recursive: true });
+  
+  // Copy template
+  await fs.cp(
+    path.join(__dirname, '../templates/default'),
+    projectPath,
+    { recursive: true }
+  );
+  
+  // Update package.json
+  const pkg = JSON.parse(await fs.readFile(path.join(projectPath, 'package.json'), 'utf-8'));
+  pkg.name = name;
+  await fs.writeFile(
+    path.join(projectPath, 'package.json'),
+    JSON.stringify(pkg, null, 2)
+  );
+  
+  console.log(`✨ Created ${name}`);
+  console.log(`\nNext steps:`);
+  console.log(`  cd ${name}`);
+  console.log(`  npm install`);
+  console.log(`  npm run dev`);
+}
+```
+
+### Project Template
+
+```
+templates/default/
+├── package.json
+├── index.html
+├── src/
+│   ├── main.tsx
+│   └── App.tsx
+├── app.json              # Schema file
+└── README.md
+```
+
+---
+
+## Runner Package
+
+### Overview
+
+The Runner provides a **development server** and **runtime** for executing ObjectUI apps from JSON schemas.
+
+**Package**: `@object-ui/runner`  
+**Purpose**: Development server & runtime  
+**Tech**: Vite, React  
+
+### Features
+
+1. **Hot Module Replacement**: Live reload on schema changes
+2. **Error Overlay**: Display schema errors
+3. **DevTools**: Inspect component tree
+4. **Multi-page**: Support routing
+
+### Implementation
+
+```tsx
+// packages/runner/src/App.tsx
+import { SchemaRenderer } from '@object-ui/react';
+import { registerDefaultRenderers } from '@object-ui/components';
+import { useEffect, useState } from 'react';
+
+registerDefaultRenderers();
+
+export function App() {
+  const [schema, setSchema] = useState(null);
+  const [error, setError] = useState(null);
+
+  useEffect(() => {
+    loadSchema();
+    
+    // Watch for changes (in dev mode)
+    if (import.meta.hot) {
+      import.meta.hot.on('schema-update', (newSchema) => {
+        setSchema(newSchema);
+      });
+    }
+  }, []);
+
+  const loadSchema = async () => {
+    try {
+      const response = await fetch('/schema.json');
+      const data = await response.json();
+      setSchema(data);
+    } catch (err) {
+      setError(err.message);
+    }
+  };
+
+  if (error) {
+    return <ErrorOverlay error={error} />;
+  }
+
+  if (!schema) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <SchemaRenderer 
+      schema={schema}
+      onAction={handleAction}
+    />
+  );
+}
+
+function handleAction(action: ActionSchema) {
+  console.log('Action:', action);
+  // Handle actions
+}
+```
+
+### Multi-page Support
+
+```tsx
+// Support routing with pages/*.json
+const routes = {
+  '/': 'pages/index.json',
+  '/about': 'pages/about.json',
+  '/contact': 'pages/contact.json'
+};
+
+export function Router() {
+  const [currentPath, setCurrentPath] = useState(window.location.pathname);
+  const [schema, setSchema] = useState(null);
+
+  useEffect(() => {
+    loadPage(currentPath);
+  }, [currentPath]);
+
+  const loadPage = async (path: string) => {
+    const schemaFile = routes[path] || routes['/'];
+    const response = await fetch(schemaFile);
+    const data = await response.json();
+    setSchema(data);
+  };
+
+  return <SchemaRenderer schema={schema} />;
+}
+```
+
+## Development Guidelines
+
+### Designer
+- Persist state to localStorage
+- Support keyboard shortcuts
+- Validate schemas in real-time
+- Provide component search
+
+### CLI
+- Clear error messages
+- Progress indicators
+- Graceful error handling
+- Help documentation
+
+### Runner
+- Fast HMR
+- Clear error overlays
+- Performance monitoring
+- DevTools integration
+
+## Testing
+
+```tsx
+describe('CLI', () => {
+  it('creates new project', async () => {
+    await exec('objectui init test-project');
+    
+    expect(fs.existsSync('test-project')).toBe(true);
+    expect(fs.existsSync('test-project/package.json')).toBe(true);
+  });
+});
+
+describe('Runner', () => {
+  it('loads schema and renders', async () => {
+    render(<App />);
+    
+    await waitFor(() => {
+      expect(screen.getByText('Welcome')).toBeInTheDocument();
+    });
+  });
+});
+```
+
+## Checklist
+
+### Designer
+- [ ] Drag-and-drop working
+- [ ] Property editing functional
+- [ ] Schema validation
+- [ ] Export/import JSON
+- [ ] Undo/redo support
+
+### CLI
+- [ ] All commands working
+- [ ] Templates complete
+- [ ] Error handling
+- [ ] Documentation
+- [ ] Published to npm
+
+### Runner
+- [ ] HMR functional
+- [ ] Error overlay
+- [ ] Routing support
+- [ ] Action handling
+- [ ] Performance optimized
+
+---
+
+**Principle**: Tools provide **excellent DX** and **fast iteration**.

From fb968f2030d5149438b86deadbb75e82df57a2c7 Mon Sep 17 00:00:00 2001
From: "copilot-swe-agent[bot]" <198982749+Copilot@users.noreply.github.com>
Date: Wed, 21 Jan 2026 14:25:48 +0000
Subject: [PATCH 4/4] Add bilingual quick reference guide for AI prompts

Co-authored-by: hotlong <50353452+hotlong@users.noreply.github.com>
---
 .github/prompts/QUICK_REFERENCE.md | 243 +++++++++++++++++++++++++++++
 1 file changed, 243 insertions(+)
 create mode 100644 .github/prompts/QUICK_REFERENCE.md

diff --git a/.github/prompts/QUICK_REFERENCE.md b/.github/prompts/QUICK_REFERENCE.md
new file mode 100644
index 0000000..57e266e
--- /dev/null
+++ b/.github/prompts/QUICK_REFERENCE.md
@@ -0,0 +1,243 @@
+# ObjectUI AI 开发提示词快速参考 / Quick Reference
+
+[English](#english) | [中文](#中文)
+
+---
+
+## 中文
+
+### 概述
+
+这个目录包含了 ObjectUI 各个核心组件的 AI 开发和优化提示词。这些提示词可以用于指导 AI 助手（如 GitHub Copilot、ChatGPT、Claude 等）在开发 ObjectUI 组件时遵循正确的模式和最佳实践。
+
+### 文件组织
+
+```
+.github/prompts/
+├── README.md                           # 主文档（英文）
+├── QUICK_REFERENCE.md                  # 本文件（中英双语）
+├── core-packages/                      # 核心包提示词
+│   ├── types-package.md               # 类型定义包
+│   ├── core-package.md                # 核心引擎包
+│   ├── react-package.md               # React 绑定包
+│   └── components-package.md          # UI 组件包
+├── components/                         # 组件类别提示词
+│   ├── basic-components.md            # 基础组件
+│   ├── layout-components.md           # 布局组件
+│   ├── form-components.md             # 表单组件
+│   ├── data-display-components.md     # 数据展示组件
+│   ├── feedback-components.md         # 反馈组件
+│   ├── overlay-components.md          # 浮层组件
+│   ├── navigation-components.md       # 导航组件
+│   └── disclosure-complex-components.md # 折叠与复杂组件
+├── plugins/                            # 插件开发
+│   └── plugin-development.md          # 插件开发指南
+└── tools/                              # 开发工具
+    └── designer-cli-runner.md         # 设计器、CLI 和运行器
+```
+
+### 使用方法
+
+#### 1. 开发新组件时
+
+选择对应类别的提示词文件，例如：
+
+- 开发按钮组件 → `components/form-components.md`
+- 开发网格布局 → `components/layout-components.md`
+- 开发对话框 → `components/overlay-components.md`
+
+#### 2. 使用 AI 助手
+
+将提示词内容复制给 AI 助手：
+
+```
+我需要开发一个新的表单组件。请参考这个开发指南：
+[粘贴 form-components.md 的内容]
+
+现在帮我创建一个日期选择器组件...
+```
+
+#### 3. 使用 GitHub Copilot Chat
+
+```
+使用 .github/prompts/components/form-components.md 中的指南帮我添加一个新的日期选择器组件
+```
+
+### 核心原则
+
+所有 ObjectUI 组件开发都应遵循以下原则：
+
+1. **JSON Schema 优先**: 所有组件必须完全可通过 JSON 配置
+2. **零运行时开销**: 只使用 Tailwind CSS，禁止内联样式
+3. **无状态组件**: 组件由 schema props 控制
+4. **关注点分离**: types → core → react → components
+5. **TypeScript 严格模式**: 所有代码必须通过 `tsc --strict`
+6. **可访问性优先**: WCAG 2.1 AA 标准
+7. **测试要求**: 逻辑单元测试 + 渲染器集成测试
+
+### 快速链接
+
+**核心包开发:**
+- [类型定义 (types)](core-packages/types-package.md) - 纯 TypeScript 接口
+- [核心逻辑 (core)](core-packages/core-package.md) - Schema 验证和引擎
+- [React 绑定 (react)](core-packages/react-package.md) - Hooks 和 Context
+- [UI 组件 (components)](core-packages/components-package.md) - Shadcn 实现
+
+**组件类别:**
+- [基础组件](components/basic-components.md) - text, image, icon, div
+- [布局组件](components/layout-components.md) - grid, flex, container, card
+- [表单组件](components/form-components.md) - input, select, checkbox, button
+- [数据展示](components/data-display-components.md) - list, table, badge, avatar
+- [反馈组件](components/feedback-components.md) - loading, progress, skeleton
+- [浮层组件](components/overlay-components.md) - dialog, popover, tooltip
+- [导航组件](components/navigation-components.md) - tabs, breadcrumb, menu
+- [复杂组件](components/disclosure-complex-components.md) - accordion, crud, calendar
+
+**扩展开发:**
+- [插件开发](plugins/plugin-development.md) - 创建自定义插件
+- [工具开发](tools/designer-cli-runner.md) - Designer、CLI、Runner
+
+### 统计信息
+
+- **总文件数**: 15 个 Markdown 文件
+- **总行数**: ~6,500 行
+- **覆盖组件**: 60+ 组件类型
+- **包含示例**: 200+ 代码示例
+
+---
+
+## English
+
+### Overview
+
+This directory contains AI development and optimization prompts for each core component of ObjectUI. These prompts guide AI assistants (like GitHub Copilot, ChatGPT, Claude, etc.) to follow correct patterns and best practices when developing ObjectUI components.
+
+### File Organization
+
+See the Chinese section above for the directory structure.
+
+### How to Use
+
+#### 1. When Developing a New Component
+
+Choose the corresponding prompt file, for example:
+
+- Developing a button → `components/form-components.md`
+- Developing a grid layout → `components/layout-components.md`
+- Developing a dialog → `components/overlay-components.md`
+
+#### 2. With AI Assistants
+
+Copy the prompt content to your AI assistant:
+
+```
+I need to develop a new form component. Please refer to this development guide:
+[Paste content from form-components.md]
+
+Now help me create a date picker component...
+```
+
+#### 3. With GitHub Copilot Chat
+
+```
+Use the guide from .github/prompts/components/form-components.md to help me add a new date picker component
+```
+
+### Core Principles
+
+All ObjectUI component development should follow these principles:
+
+1. **JSON Schema First**: All components must be fully configurable via JSON
+2. **Zero Runtime Overhead**: Only Tailwind CSS, no inline styles
+3. **Stateless Components**: Controlled by schema props
+4. **Separation of Concerns**: types → core → react → components
+5. **TypeScript Strict Mode**: All code must pass `tsc --strict`
+6. **Accessibility First**: WCAG 2.1 AA minimum
+7. **Testing Required**: Unit tests for logic + integration tests for renderers
+
+### Quick Links
+
+**Core Packages:**
+- [Types (types)](core-packages/types-package.md) - Pure TypeScript interfaces
+- [Core Logic (core)](core-packages/core-package.md) - Schema validation & engine
+- [React Bindings (react)](core-packages/react-package.md) - Hooks & Context
+- [UI Components (components)](core-packages/components-package.md) - Shadcn implementation
+
+**Component Categories:**
+- [Basic Components](components/basic-components.md) - text, image, icon, div
+- [Layout Components](components/layout-components.md) - grid, flex, container, card
+- [Form Components](components/form-components.md) - input, select, checkbox, button
+- [Data Display](components/data-display-components.md) - list, table, badge, avatar
+- [Feedback Components](components/feedback-components.md) - loading, progress, skeleton
+- [Overlay Components](components/overlay-components.md) - dialog, popover, tooltip
+- [Navigation Components](components/navigation-components.md) - tabs, breadcrumb, menu
+- [Complex Components](components/disclosure-complex-components.md) - accordion, crud, calendar
+
+**Extensions:**
+- [Plugin Development](plugins/plugin-development.md) - Creating custom plugins
+- [Tools Development](tools/designer-cli-runner.md) - Designer, CLI, Runner
+
+### Statistics
+
+- **Total Files**: 15 Markdown files
+- **Total Lines**: ~6,500 lines
+- **Component Coverage**: 60+ component types
+- **Code Examples**: 200+ examples
+
+### Usage Examples
+
+#### Example 1: Creating a New Form Component
+
+```bash
+# 1. Read the form components guide
+cat .github/prompts/components/form-components.md
+
+# 2. Ask AI to help
+"Using the patterns in form-components.md, create a DatePicker component
+that supports:
+- Single date selection
+- Date range selection
+- Min/max date validation
+- Custom date format"
+```
+
+#### Example 2: Developing a Plugin
+
+```bash
+# 1. Read the plugin development guide
+cat .github/prompts/plugins/plugin-development.md
+
+# 2. Create plugin structure
+"Following the plugin-development.md guide, scaffold a new maps plugin
+that integrates Google Maps with ObjectUI schemas"
+```
+
+#### Example 3: Optimizing Existing Component
+
+```bash
+# 1. Identify component category
+# 2. Read relevant guide
+cat .github/prompts/components/overlay-components.md
+
+# 3. Ask for optimization
+"Review my Dialog component against the overlay-components.md guide
+and suggest improvements for accessibility and performance"
+```
+
+---
+
+## Contributing
+
+To add or update prompts:
+
+1. Follow the existing structure and format
+2. Include concrete, working examples
+3. Specify constraints clearly
+4. Link to relevant documentation
+5. Test the prompt with an AI agent before committing
+
+---
+
+**Version**: 1.0.0  
+**Last Updated**: 2026-01-21  
+**Maintainer**: ObjectUI Team