Surface Composition Model
How blocks, surfaces and capabilities combine. PhiCo composes against this model; nothing publishes without an accepted Receipt.
The simple model
blocks compose into surfaces enhanced by capabilities
Three concepts, combined freely. There is no template layer in between.
Composition hierarchy
- Blocks — the typed pieces, across eight categories (text, media, layout, panel, control, form, data, feedback), plus any custom blocks installed in your World.
- Surfaces — reproducible renders, materialised from a Receipt that PhiCo proposes and you accept.
- Capabilities — the four powers a surface can declare. Visual appearance is not one of them; it is a separate atom the surface points at.
Block composition
Blocks nest to create structure. Layout blocks (container, grid) hold other blocks:
container
├── heading ("Features")
├── grid (3 columns)
│ ├── container (feature card)
│ │ ├── image (icon)
│ │ ├── heading ("Fast")
│ │ └── text ("Lightning speed…")
│ ├── container (feature card)
│ │ ├── image (icon)
│ │ ├── heading ("Secure")
│ │ └── text ("Enterprise grade…")
│ └── container (feature card)
│ ├── image (icon)
│ ├── heading ("Simple")
│ └── text ("No complexity…")Capabilities extension
Capabilities add powers to a surface without changing its structure. The runtime resolves exactly four:
| Capability | Adds |
|---|---|
platform/persistence | Data fetch + cache, client state, binding config. |
platform/entities | The app’s data model, and reading/writing records against it. |
platform/navigation | Routing between the surfaces of an app. |
platform/interaction | Event-driven rules: triggers and actions wired into surface events. |
See the capabilities reference.
Appearance
Theme, colours, typography and spacing are not scattered across blocks. A surface points at one appearance atom and inherits it whole, which is what lets an app of twenty pages change its look in one move.
Complete example
A landing page with full composition:
Landing Page (surface)
│
├── Blocks
│ ├── container (hero)
│ │ ├── heading (h1)
│ │ ├── text (subtitle)
│ │ └── button (CTA)
│ ├── container (features)
│ │ └── grid (3-col feature cards)
│ ├── container (testimonials)
│ │ └── grid (testimonial cards)
│ └── container (footer)
│ ├── grid (links)
│ └── text (copyright)
│
└── Capabilities
├── platform/persistence (page-load data fetch)
├── platform/navigation (links to the app's other pages)
└── platform/interaction (contact form validation + submit)