npm package: @manifesto-ai/ui
Description: Framework-agnostic UI semantic layer for Manifesto (field registry, semantic registry, adapters)
Author: eggp
Latest version: 0.0.1

# ⚡ **manifesto-ai UI Package**

### *Framework-agnostic, AI-native semantic rendering layer*

The **Manifesto UI Package** is the presentation layer of the manifesto-ai ecosystem.
It transforms **semantic contracts** generated by the Manifesto engine into concrete UI across any framework — React, Vue, or even AI-generated components.

Manifesto does **not** compute UI logic inside the UI package.
Instead, the UI package expresses:

> **“How should this meaning be rendered?”
> not
> “How should this UI behave?”**

Business logic lives in the engine.
Rendering lives here.

---

## 🎯 **Purpose**

The UI package provides:

* A **framework-agnostic semantic rendering system**
* A **pluggable Field Renderer Registry** for atomic components
* A **Semantic View Renderer Registry** (Form / List / Detail)
* Adapter layers for React and Vue and the ability to add more frameworks easily
* Default UI implementations (optional) using Shadcn UI (React) or Vuetify (Vue)
* A domain-agnostic representation of UI state via **Semantic Trees**
* A future-proof foundation for AI-driven UI generation

This allows applications to be rendered using any UI framework — or none — without rewriting business logic or schema definitions.

---

# 🧠 **Core Philosophy**

### 1. **Meaning and Presentation Must Be Decoupled**

The engine defines the semantics of UI — fields, views, actions, constraints.
The UI package *only* renders them.

No validation logic, workflow logic, or conditional visibility is re-evaluated by the UI.

---

### 2. **Two-Layer Rendering System**

#### **A. Atomic Layer — Field Renderer Registry**

Maps atomic field types to actual UI components:

```
"text-input"     → ReactTextInput / VueTextInput  
"date-picker"    → ReactDatePicker / VueDatePicker  
"toggle"         → custom toggle component  
```

This allows complete freedom to replace UI kits or theme systems.

#### **B. Semantic Layer — View Renderer Registry**

Interprets **semantic meaning**:

* Forms
* ListTables
* DetailViews

This layer produces a **Semantic Tree**, a framework-independent representation of the UI structure.
Adapters turn this tree into concrete UI.

---

### 3. **Adapters Should Translate, Not Interpret**

React/Vue adapters convert nodes like:

```
FieldNode("name")
SectionNode("pricing")
ActionNode("save")
```

into framework-native components.
They do *not* infer new logic or re-evaluate constraints.

---

### 4. **Replaceability by Design**

The UI package is intentionally built so that:

* React can be swapped for Vue
* Vue can be swapped for Svelte
* And both can be replaced by **AI-generated UI renderers**

…without modifying the engine or schema.

This ensures Manifesto is relevant long-term, even as UI frameworks evolve or disappear.

---

### 5. **AI-Native UI Generation**

Because all UI meaning is represented in a **pure semantic layer**, AI agents can:

* Understand which fields belong to which sections
* Explain hidden/disabled conditions
* Suggest UI layouts
* Generate React/Vue code automatically
* Produce entirely new UI kits on-the-fly

Manifesto’s semantic layer is intentionally optimized for machine reasoning.

---

# 🧩 **Architecture Overview**

```
┌───────────────────────────────────────────┐
│             Manifesto Engine              │
│ (Semantics: fields, constraints, actions) │
└──────────────────────────┬────────────────┘
                           │
                           ▼
┌───────────────────────────────────────────┐
│         Semantic Renderer Registry        │
│ (Form / List / Detail → Semantic Tree)    │
└──────────────────────────┬────────────────┘
                           │
                           ▼
┌───────────────────────────────────────────┐
│         Field Renderer Registry           │
│  (Atomic UI components per framework)     │
└──────────────────────────┬────────────────┘
                           │
                           ▼
┌───────────────────────────────────────────┐
│      Framework Adapter (React / Vue)      │
│ Converts Semantic Tree → UI Components    │
└───────────────────────────────────────────┘
```

---

# 🛠 **Package Responsibilities**

### ✔ Manage Atomic Field Renderer Registry

Allow React/Vue/Svelte/AI renderers to register components by type.

### ✔ Provide Semantic Renderer Registry

Compose fields, sections, and actions into meaningful UI structures.

### ✔ Produce Framework-Independent Semantic Trees

Guarantee deterministic UI generation across frameworks.

### ✔ Implement Adapter Layers

Turn semantic instructions into framework-specific UI.

### ✔ Provide Default UI Implementations (optional)

Shadcn UI (React) or Vuetify (Vue) may be provided as optional presets.

---

# 🚫 **What the UI Package Does NOT Do**

* ❌ Recompute logic (validation, visibility, dependency resolution)
* ❌ Interpret workflow or business decisions
* ❌ Modify schema definitions
* ❌ Assume any particular UI kit
* ❌ Bind tightly to React or Vue internals
* ❌ Define domain rules or data shapes

This is a pure rendering package.
All semantics originate from the engine.

---

# 📦 **Package Structure**

```
ui/
  ├── registry/
  │     ├── field/
  │     └── semantic/
  ├── semantic/
  │     ├── tree-builder/
  │     └── view-renderers/
  ├── adapters/
  │     ├── react/
  │     └── vue/
  ├── components/
  │     ├── react/
  │     └── vue/
  └── README.md
```

---

# 🔧 **Customization Example (Conceptual)**

### Registering a new field:

```ts
fieldRegistry.register("rich-text", MyRichTextEditor)
```

### Overriding Form rendering strategy:

```ts
semanticRegistry.register("form", MyCustomFormRenderer)
```

### Writing a React adapter:

```ts
reactAdapter.render(tree)
```

Everything is composable, everything is replaceable.

---

# 🤖 **Future-Proof by Design**

The UI package is built for today’s frameworks **and tomorrow’s AI-powered UI ecosystems**:

* AI-driven layout suggestions
* AI component generation
* Adaptive UI based on context
* Zero-code UI assembly from API schema
* Runtime UI evolution without redeploy

Manifesto’s abstraction is built explicitly for this future.

---

# 🧭 **Summary**

The Manifesto UI Package is:

* **The presentation layer of an AI-native semantic UI engine**
* **Framework-agnostic** and **completely replaceable**
* Powered by composable registries
* Driven by semantic meaning, not UI logic
* Designed for humans and AI to build, render, and evolve UIs together
* Capable of scaling across React, Vue, Svelte, AI renderers, and more

It is not a component library.
It is a **semantic rendering platform.**