Server-Driven UI (SDUI)

The server controls what the client renders. Instead of hardcoding layouts in the frontend, the backend returns a JSON structure describing sections, blocks, and settings. The frontend just renders what it receives.

Concepts

SectionDef (schema)          Template (instance)
┌──────────────────┐         ┌──────────────────┐
│ type: HeroSection │         │ route: /home      │
│ settings:         │         │ sections:         │
│   title (TEXT)    │    ──►  │   - type: Hero    │
│   bgColor (COLOR) │         │     title: "Hi"   │
│ blocks:           │         │     blocks:       │
│   - Button        │         │       - Button    │
│     label (TEXT)  │         │         label: Go │
└──────────────────┘         └──────────────────┘

Concept	What
SectionDef	Reusable component type with configurable settings and block schemas
Template	A page (bound to app + route) composed of section instances
SectionInstance	An instance of a SectionDef in a template, with setting overrides
BlockInstance	A child component within a section
SettingDefinition	A configurable property (TEXT, NUMBER, COLOR, IMAGE, SELECT, etc.)
Preset	Pre-configured template for quick section creation

Settings Merge

At render time, definition defaults are merged with instance overrides:

Definition default:  { title: "Default Title", bgColor: "#FFFFFF" }
Instance override:   { title: "Welcome to ELIVAAS" }
─────────────────────────────────────────────────────
Rendered output:     { title: "Welcome to ELIVAAS", bgColor: "#FFFFFF" }

Lifecycle

DRAFT → PUBLISHED → ARCHIVED
          │
          ├─ SCHEDULED (publishAt in future)
          └─ Auto-expires (expireAt)

Each publish creates an immutable version snapshot for rollback support.