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

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

Overriding Form rendering strategy:

semanticRegistry.register("form", MyCustomFormRenderer)

Writing a React adapter:

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.