diff --git a/.github/workflows/deploy-docs.yml b/.github/workflows/deploy-docs.yml
new file mode 100644
index 0000000..6dcadae
--- /dev/null
+++ b/.github/workflows/deploy-docs.yml
@@ -0,0 +1,61 @@
+name: Deploy Documentation
+
+on:
+ push:
+ branches:
+ - main
+ paths:
+ - 'website/**'
+ - '.github/workflows/deploy-docs.yml'
+ workflow_dispatch:
+
+permissions:
+ contents: read
+ pages: write
+ id-token: write
+
+concurrency:
+ group: pages
+ cancel-in-progress: false
+
+jobs:
+ build:
+ runs-on: ubuntu-latest
+ defaults:
+ run:
+ working-directory: website
+ steps:
+ - name: Checkout
+ uses: actions/checkout@v4
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v4
+ with:
+ node-version: 20
+ cache: npm
+ cache-dependency-path: website/package-lock.json
+
+ - name: Install dependencies
+ run: npm ci
+
+ - name: Build website
+ run: npm run build
+
+ - name: Setup Pages
+ uses: actions/configure-pages@v4
+
+ - name: Upload artifact
+ uses: actions/upload-pages-artifact@v3
+ with:
+ path: website/build
+
+ deploy:
+ environment:
+ name: github-pages
+ url: ${{ steps.deployment.outputs.page_url }}
+ runs-on: ubuntu-latest
+ needs: build
+ steps:
+ - name: Deploy to GitHub Pages
+ id: deployment
+ uses: actions/deploy-pages@v4
diff --git a/.gitignore b/.gitignore
index 83fe2a6..d2ab167 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,5 @@
.phpunit.cache
vendor
+node_modules
+.docusaurus
+build
diff --git a/readme.md b/readme.md
index 0f8300d..5de5de1 100644
--- a/readme.md
+++ b/readme.md
@@ -1,878 +1,83 @@
# Tangible Object
-A WordPress tool suite for building data-driven admin interfaces with a clean four-layer architecture.
+A WordPress tool suite for building data-driven admin interfaces with a clean, layered architecture.
-## Architecture
-
-The suite separates concerns into four distinct layers:
-
-1. **DataSet** - Define field types and coercion rules
-2. **EditorLayout** - Compose the editor structure (sections, tabs, fields)
-3. **Renderer** - Generate HTML output from the layout
-4. **RequestHandler** - Handle CRUD operations with validation
+**[View Full Documentation →](https://tangibleinc.github.io/object/)**
-## Complete Example: Contact Form Entries Admin Page
+## Quick Start
-This example shows how to create a WordPress admin page for managing contact form entries, with list, create, and edit views.
-
-### Step 1: Define Your Data Object
-
-Create a file to define and configure your data object. This is typically done once during plugin initialization.
+The easiest way to use Tangible Object is through the **DataView** API:
```php
-add_string('name')
- ->add_string('email')
- ->add_string('message')
- ->add_boolean('subscribe');
-
- // =========================================================================
- // LAYER 2: Editor Composition
- // =========================================================================
- $layout = new Layout($dataset);
-
- $layout->section('Contact Information', function(Section $s) {
- $s->field('name')
- ->placeholder('Full name')
- ->help('The sender\'s full name');
- $s->field('email')
- ->placeholder('email@example.com');
- });
- $layout->section('Message', function(Section $s) {
- $s->field('message');
- $s->field('subscribe');
- });
-
- $layout->sidebar(function(Sidebar $sb) {
- $sb->actions(['save', 'delete']);
- });
-
- // =========================================================================
- // LAYER 3: UI Presentation
- // =========================================================================
- $renderer = new HtmlRenderer();
-
- // =========================================================================
- // LAYER 4: Request Handling
- // =========================================================================
- // Note: CPT slugs must be 20 characters or less
- $object = new PluralObject('contact_entry');
- $object->set_dataset($dataset);
- $object->register([
- 'public' => false,
- 'label' => 'Contact Entries',
+add_action('admin_menu', function() {
+ $view = new DataView([
+ 'slug' => 'contact_entry',
+ 'label' => 'Contact Entry',
+ 'fields' => [
+ 'name' => 'string',
+ 'email' => 'email',
+ 'message' => 'text',
+ 'subscribe' => 'boolean',
+ ],
+ 'ui' => [
+ 'menu_label' => 'Contact Entries',
+ 'icon' => 'dashicons-email',
+ ],
]);
- $handler = new PluralHandler($object);
- $handler
+ $view->get_handler()
->add_validator('name', Validators::required())
->add_validator('email', Validators::required())
- ->add_validator('email', Validators::email())
- ->before_create(function($data) {
- $data['created_at'] = current_time('mysql');
- return $data;
- });
-
- return [
- 'dataset' => $dataset,
- 'layout' => $layout,
- 'renderer' => $renderer,
- 'handler' => $handler,
- ];
-}
-```
-
-### Step 2: Create the Admin Page
-
-Register the admin menu and handle the different views.
-
-```php
-list();
- $entities = $result->get_entities();
-
- // Prepare data for rendering
- $rows = array_map(function($entity) {
- return [
- 'id' => $entity->get_id(),
- 'name' => $entity->get('name'),
- 'email' => $entity->get('email'),
- 'message' => $entity->get('message'),
- 'subscribe' => $entity->get('subscribe'),
- ];
- }, $entities);
-
- // Page header
- ?>
-
-
- Contact Entries
- Add New
-
-
-
-
No contact entries found.
-
-
-
-
- | Name |
- Email |
- Subscribed |
- Actions |
-
-
-
-
-
- |
- |
- |
-
-
- Edit
-
- |
-
- Delete
-
- |
-
-
-
-
-
-
-
Add New Contact Entry
-
-
-
-
-
- - get_field() . ': ' . $error->get_message()); ?>
-
-
-
-
-
-
-
-
-
- ← Back to list
-
-
-
-
Edit Contact Entry
-
-
-
-
-
- - get_field() . ': ' . $error->get_message()); ?>
-
-
-
-
-
-
-
-
-
- ← Back to list
-
-
-
-
My Plugin Settings
-
-
-
-
-
-
-
-
-
- - get_field() . ': ' . $error->get_message()); ?>
-
-
-
-
-
-
-
Invoice not found.
';
+ }
+
+ $entity = $result->get_entity();
+ $line_items = json_decode($entity->get('line_items'), true);
+
+ ob_start();
+ ?>
+
+
Invoice
+
+
+ get('customer_name')); ?>
+ get('customer_email')); ?>
+
+
+
+
Invoice Date: get('invoice_date')); ?>
+
Due Date: get('due_date')); ?>
+
+
+
+
+
+ | Description |
+ Qty |
+ Unit Price |
+ Total |
+
+
+
+
+
+
+ |
+ |
+ |
+ |
+
+
+
+
+
+ | Subtotal |
+ get('subtotal')); ?> |
+
+
+ | Tax |
+ get('tax_total')); ?> |
+
+
+ | Total |
+ get('total')); ?> |
+
+
+
+
+ get('notes')): ?>
+
+
Notes
+
get('notes')); ?>
+
+
+
+
+ get('is_paid')): ?>
+ PAID
+
+ UNPAID
+
+
+
';
+ $html .= '
' . esc_html($section['label']) . '
';
+
+ foreach ($section['items'] ?? [] as $item) {
+ $html .= $this->render_item($item, $data, $dataset);
+ }
+
+ foreach ($section['fields'] ?? [] as $field) {
+ $html .= $this->render_field($field, $data, $dataset);
+ }
+
+ $html .= '';
+ return $html;
+}
+```
+
+## Rendering Fields
+
+Get field info from the dataset:
+
+```php
+protected function render_field(array $field, array $data, DataSet $dataset): string {
+ $slug = $field['slug'];
+ $value = $data[$slug] ?? '';
+ $type = $dataset->get_type($slug);
+
+ $html = '';
+ return $html;
+}
+```
+
+## Complete Example
+
+A Bootstrap-styled renderer:
+
+```php
+class BootstrapRenderer implements Renderer {
+
+ public function render_editor(Layout $layout, array $data = []): string {
+ $structure = $layout->get_structure();
+ $dataset = $layout->get_dataset();
+
+ $html = '