[WIP] Update documentation for project

CHANGELOG.md

@@ -10,13 +10,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Comprehensive test suite using Vitest and React Testing Library
-- Test coverage for @object-ui/protocol, @object-ui/engine, @object-ui/renderer, @object-ui/ui, and @object-ui/designer packages
+- Test coverage for @object-ui/core, @object-ui/react, @object-ui/components, and @object-ui/designer packages
 - GitHub Actions CI/CD workflows:
   - CI workflow for automated testing, linting, and building
   - Release workflow for publishing new versions
 - Test coverage reporting with @vitest/coverage-v8
 - Contributing guidelines (CONTRIBUTING.md)
 - Documentation for testing and development workflow in README
+- README files for all core packages
 
 ### Changed
 
@@ -28,14 +29,14 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Core packages:
-  - @object-ui/protocol - Pure metadata definitions and types
-  - @object-ui/engine - Headless logic for handling data
-  - @object-ui/renderer - Schema to UI component renderer
-  - @object-ui/ui - High-quality UI components built with Tailwind CSS & Shadcn
+  - @object-ui/core - Core logic, types, and validation (Zero React dependencies)
+  - @object-ui/react - React bindings and SchemaRenderer component
+  - @object-ui/components - Standard UI components built with Tailwind CSS & Shadcn
   - @object-ui/designer - Drag-and-drop visual editor
-- Monorepo structure using pnpm and TurboRepo
+- Monorepo structure using pnpm workspaces
 - Basic TypeScript configuration
 - Example applications in the examples directory
+- Complete documentation site with VitePress
 
 [Unreleased]: https://github.com/objectql/objectui/compare/v0.1.0...HEAD
 [0.1.0]: https://github.com/objectql/objectui/releases/tag/v0.1.0

CONTRIBUTING.md

@@ -34,7 +34,7 @@ pnpm test:coverage
 pnpm build
 
 # Build specific package
-cd packages/protocol && pnpm build
+cd packages/core && pnpm build
 ```
 
 ### Linting

README.md

@@ -172,11 +172,10 @@ This project is organized as a Monorepo:
 
 | Package | Description |
 | --- | --- |
-| **`@object-ui/types`** | The protocol definitions. Pure TypeScript interfaces. |
-| **`@object-ui/core`** | The logic engine. Data scoping, validation, evaluation. |
-| **`@object-ui/react`** | The React framework adapter. |
+| **`@object-ui/core`** | Core logic, types, and validation. Zero React dependencies. |
+| **`@object-ui/react`** | The React framework adapter with SchemaRenderer. |
 | **`@object-ui/components`** | The standard UI library implementation (Shadcn + Tailwind). |
-| **`@object-ui/plugin-*`** | Lazy-loaded complex components (e.g., AG Grid, Monaco). |
+| **`@object-ui/designer`** | Visual schema editor for building UIs without code. |
 
 ---
 

docs/api/core.md

@@ -1,11 +1,13 @@
 # Core API
 
-The `@object-ui/core` package (also published as `@object-ui/protocol`) provides the foundational type definitions and schemas for Object UI.
+The `@object-ui/core` package provides the foundational type definitions, schemas, and core logic for Object UI.
+
+This package is **framework-agnostic** with zero React dependencies, making it suitable for use in Node.js environments, build tools, or other frameworks.
 
 ## Installation
 
 ```bash
-npm install @object-ui/protocol
+npm install @object-ui/core
 ```
 
 ## Type Definitions
@@ -19,7 +21,7 @@ import type {
   FormSchema,
   ViewSchema,
   ComponentSchema
-} from '@object-ui/protocol'
+} from '@object-ui/core'
 ```
 
 ### BaseSchema
@@ -82,7 +84,7 @@ interface InputSchema extends BaseSchema {
 ### Using Zod
 
 ```typescript
-import { PageSchema } from '@object-ui/protocol'
+import { PageSchema } from '@object-ui/core'
 import { z } from 'zod'
 
 const pageValidator = z.object({
@@ -100,18 +102,38 @@ const result = pageValidator.safeParse(mySchema)
 ### Type Guards
 
 ```typescript
-import { isPageSchema, isFormSchema } from '@object-ui/protocol'
+import { isPageSchema, isFormSchema } from '@object-ui/core'
 
 if (isPageSchema(schema)) {
   // TypeScript knows schema is PageSchema
   console.log(schema.title)
 }
 ```
 
-## API Reference
+## Component Registry
+
+The core package provides a framework-agnostic component registry:
+
+```typescript
+import { ComponentRegistry } from '@object-ui/core'
+
+const registry = new ComponentRegistry()
+registry.register('button', buttonMetadata)
+```
 
-Full API documentation coming soon.
+## Data Scope
+
+Data scope management for expression evaluation:
+
+```typescript
+import { DataScope } from '@object-ui/core'
+
+const scope = new DataScope({ user: { name: 'John' } })
+const value = scope.get('user.name') // 'John'
+```
+
+## API Reference
 
-For now, see:
-- [GitHub Repository](https://github.com/objectql/objectui/tree/main/packages/protocol)
-- [TypeScript Definitions](https://github.com/objectql/objectui/blob/main/packages/protocol/src/types)
+For detailed API documentation, see:
+- [GitHub Repository](https://github.com/objectql/objectui/tree/main/packages/core)
+- [TypeScript Definitions](https://github.com/objectql/objectui/blob/main/packages/core/src/index.ts)

docs/api/designer.md

@@ -2,13 +2,15 @@
 
 The `@object-ui/designer` package provides a visual drag-and-drop editor for creating Object UI schemas.
 
-::: warning Coming Soon
-The Designer is planned for release in Q3 2026. This documentation is a preview.
-:::
+## Installation
 
-## Planned Features
+```bash
+npm install @object-ui/designer @object-ui/react @object-ui/components
+```
+
+## Features
 
-### Visual Editor
+### ✅ Visual Editor
 
 ```tsx
 import { Designer } from '@object-ui/designer'
@@ -18,48 +20,130 @@ function App() {
 
   return (
     <Designer
-      schema={schema}
-      onChange={setSchema}
+      initialSchema={schema}
+      onSchemaChange={setSchema}
     />
   )
 }
 ```
 
-### Component Palette
+### ✅ Component Palette
+
+Drag components from the categorized palette to the canvas. Includes:
+- Basic components (text, button, link, image)
+- Form inputs (input, textarea, select, checkbox, radio, date picker)
+- Layout components (container, grid, flex, tabs, card)
+- Data display (table, list, badge)
+- Feedback components (alert, toast, dialog)
+
+### ✅ Property Editor
+
+Edit component properties visually with a dynamic form in the sidebar panel.
+
+### ✅ Real-time Preview
 
-Drag components from the palette to the canvas.
+See your changes instantly with live preview in the canvas.
 
-### Property Editor
+### ✅ Drag and Drop
 
-Edit component properties visually with a sidebar panel.
+- Drag components from palette to canvas
+- Reorder components within the canvas
+- Visual feedback during drag operations
 
-### Real-time Preview
+### ✅ JSON Import/Export
 
-See your changes instantly with live preview.
+- Export schema as JSON
+- Import schema from JSON
+- Copy schema to clipboard
 
-### AI Assistant
+## Components
 
-Generate schemas using natural language:
+### Designer
+
+The main designer component that includes all functionality.
 
 ```tsx
 <Designer
-  enableAI={true}
-  aiPrompt="Create a user registration form"
+  initialSchema={schema}
+  onSchemaChange={handleChange}
 />
 ```
 
-### Collaboration
+**Props:**
+- `initialSchema?: SchemaNode` - Initial schema to load
+- `onSchemaChange?: (schema: SchemaNode) => void` - Callback when schema changes
+
+### Custom Layout
+
+Use individual components for custom layouts:
+
+```tsx
+import { 
+  DesignerProvider,
+  Canvas,
+  ComponentPalette,
+  PropertyPanel,
+  Toolbar
+} from '@object-ui/designer'
+
+function CustomDesigner() {
+  return (
+    <DesignerProvider>
+      <div className="flex flex-col h-screen">
+        <Toolbar />
+        <div className="flex flex-1">
+          <ComponentPalette className="w-64" />
+          <Canvas className="flex-1" />
+          <PropertyPanel className="w-80" />
+        </div>
+      </div>
+    </DesignerProvider>
+  )
+}
+```
+
+## API Reference
 
-Real-time multi-user editing like Google Docs.
+### useDesigner Hook
 
-## Stay Updated
+Access designer state and methods:
 
-Want to be notified when Designer launches?
+```tsx
+import { useDesigner } from '@object-ui/designer'
+
+function CustomComponent() {
+  const {
+    schema,
+    setSchema,
+    selectedNodeId,
+    setSelectedNodeId,
+    updateNode,
+    addNode,
+    deleteNode,
+    moveNode
+  } = useDesigner()
+
+  // Use designer state
+}
+```
 
-- ⭐ [Star on GitHub](https://github.com/objectql/objectui)
-- 📧 [Email us](mailto:hello@objectui.org)
-- 📋 [View Roadmap](/roadmap)
+### Context API
+
+```typescript
+interface DesignerContextValue {
+  schema: SchemaNode
+  setSchema: (schema: SchemaNode) => void
+  selectedNodeId: string | null
+  setSelectedNodeId: (id: string | null) => void
+  hoveredNodeId: string | null
+  setHoveredNodeId: (id: string | null) => void
+  updateNode: (id: string, updates: Partial<SchemaNode>) => void
+  addNode: (parentId: string | null, node: SchemaNode, index?: number) => void
+  deleteNode: (id: string) => void
+  moveNode: (nodeId: string, targetParentId: string | null, targetIndex: number) => void
+}
+```
 
-## Roadmap
+## Examples
 
-See the [full roadmap](/roadmap#q3-2026-visual-designer-available-september-2026) for Designer features and timeline.
+See [examples/designer-demo](https://github.com/objectql/objectui/tree/main/examples/designer-demo) for a complete working example.

docs/guide/installation.md

@@ -16,9 +16,9 @@ Object UI is distributed as several packages:
 
 | Package | Description | Required |
 |---------|-------------|----------|
-| `@object-ui/protocol` | Type definitions and schemas | Yes |
-| `@object-ui/renderer` | The core compiler that turns JSON into React | Yes |
-| `@object-ui/ui` | The visual component library (Shadcn extended) | Yes |
+| `@object-ui/core` | Core logic, types, and validation (Zero React dependencies) | Yes |
+| `@object-ui/react` | React bindings and SchemaRenderer component | Yes |
+| `@object-ui/components` | Standard UI library with Shadcn + Tailwind components | Yes |
 | `@object-ui/designer` | Visual schema editor and builder | Optional |
 
 ## Basic Installation
@@ -28,29 +28,17 @@ To get started, install the core packages:
 ::: code-group
 
 ```bash [npm]
-npm install @object-ui/renderer @object-ui/ui @object-ui/protocol
+npm install @object-ui/react @object-ui/components
 ```
 
 ```bash [pnpm]
-pnpm add @object-ui/renderer @object-ui/ui @object-ui/protocol
-```
-
-```bash [yarn]
-yarn add @object-ui/renderer @object-ui/ui @object-ui/protocol
-```
-
-:::bash [npm]
-npm install @object-ui/react @object-ui/components
+pnpm add @object-ui/react @object-ui/components
 ```
 
 ```bash [yarn]
 yarn add @object-ui/react @object-ui/components
 ```
 
-```bash [pnpm]
-pnpm add @object-ui/react @object-ui/components
-```
-
 :::
 
 ## Setup Steps
@@ -158,19 +146,19 @@ Create React App requires no special configuration.
 For TypeScript type definitions:
 
 ```bash
-npm install @object-ui/protocol
+npm install @object-ui/core
 ```
 
 ```typescript
-import type { PageSchema, FormSchema } from '@object-ui/protocol'
+import type { PageSchema, FormSchema } from '@object-ui/core'
 ```
 
-### Engine
+### Designer
 
-For advanced state management and data handling:
+For visual schema editing:
 
 ```bash
-npm install @object-ui/engine
+npm install @object-ui/designer
 ```
 
 ## Verification

docs/guide/introduction.md

@@ -119,11 +119,10 @@ Object UI automatically:
 Object UI is built as a modular ecosystem:
 
 ```
-@object-ui/protocol  → Type definitions and schemas
-@object-ui/engine    → Core logic and state management
-@object-ui/ui        → UI components (Tailwind + Shadcn)
-@object-ui/renderer  → Schema-to-React transformer
-@object-ui/designer  → Visual editor (coming Q3 2026)
+@object-ui/core       → Core logic, types, and validation (Zero React)
+@object-ui/react      → React bindings and SchemaRenderer
+@object-ui/components → UI components (Tailwind + Shadcn)
+@object-ui/designer   → Visual schema editor
 ```
 
 This modular design means: