Update remaining docs with correct package names and designer status

Co-authored-by: huangyiirene <7665279+huangyiirene@users.noreply.github.com>

Author: Copilot

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/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:

docs/protocol/overview.md

@@ -149,7 +149,7 @@ All schemas can be validated using:
 Example validation:
 
 ```typescript
-import { PageSchema } from '@object-ui/protocol'
+import { PageSchema } from '@object-ui/core'
 import { z } from 'zod'
 
 const pageSchema = z.object({
@@ -233,15 +233,15 @@ This single schema creates a complete user management interface with:
 The reference implementation is available in TypeScript:
 
 ```bash
-npm install @object-ui/protocol
+npm install @object-ui/core
 ```
 
 ```typescript
 import {
   PageSchema,
   ViewSchema,
   ObjectSchema
-} from '@object-ui/protocol'
+} from '@object-ui/core'
 ```
 
 ## Contributing

docs/spec/architecture.md

@@ -71,27 +71,29 @@ Dynamic logic is handled via string expressions in the JSON schema.
 ## 4. Architecture Layers
 
 ```
-Layer 1: @object-ui/protocol (The Language)
-  - Types definitions for Object, Field, View, Page (from docs/objectql)
+Layer 1: @object-ui/core (The Foundation)
+  - Type definitions for schemas and components
+  - Core logic with zero React dependencies
   - Validation Logic (Zod)
+  - Component Registry
+  - Data Scope and Expression Evaluation
 
-Layer 2: @object-ui/engine (The Brain)
-  - Headless State Management
-  - Data Source / API Connectors
-  - Expression Evaluation utils
+Layer 2: @object-ui/react (The Glue)
+  - React bindings and hooks
+  - SchemaRenderer component
+  - Context providers
+  - React-specific state management
 
-Layer 3: @object-ui/ui (The Look)
+Layer 3: @object-ui/components (The Look)
   - Shadcn/UI primitives
   - Tailwind Configuration
-  - Dumb React Components
-
-Layer 4: @object-ui/renderer (The Compiler)
-  - SchemaRenderer
-  - Component Registry
-  - Concrete implementations of Page, View, Object renderers
+  - Component Renderers
+  - Standard UI implementations
 
-Layer 5: @object-ui/designer (The Tool)
-  - Visual Editor
+Layer 4: @object-ui/designer (The Tool)
+  - Visual Schema Editor
+  - Drag-and-Drop Interface
+  - Property Editing
 ```
 
 ## 5. Advantages over Traditional Engines