Build and embed a vapp

{
  "id": "com.example.hello",
  "name": "Hello",
  "version": "1.0.0",
  "description": "A greeting card that follows the weather source and can toast.",
  "catalogId": "https://ui.exponential.at/catalogs/core/v1",
  "theme": "neutral",
  "functions": ["app.toast"],
  "templates": {
    "main": {
      "components": [
        { "id": "root", "component": "Card", "padded": true, "children": ["title", "body", "wave"] },
        { "id": "title", "component": "Text", "text": { "path": "/title" }, "variant": "title" },
        { "id": "body", "component": "Text", "text": { "path": "/weather/summary" }, "variant": "muted" },
        { "id": "wave", "component": "Button", "label": "Wave", "on": { "press": { "functionCall": { "call": "app.toast", "args": { "text": "Hello back!" } } } } }
      ],
      "data": { "title": "Hello, world", "weather": { "summary": "Loading the weather…" } },
      "bindings": [{ "path": "/weather", "source": "weather:current?city=Vienna" }]
    }
  }
}

// A declarative vapp = templates + data + bindings + the functions it may
// call. Data, never code: validate it, then run it in any host.
import { createVappHost, validatePackage } from "@exponential-at/ui"
import type { VappPackage } from "@exponential-at/ui"
import pkg from "./hello.vapp.json"

const issues = validatePackage(pkg)
if (issues.length) throw new Error(issues.map((i) => `${i.path}: ${i.message}`).join(`\n`))

export const vapp = createVappHost({
  package: pkg as VappPackage,
  // The host lends what the package names: the toast (its `functions` list
  // narrows the policy) and the `weather:` source its binding follows.
  functions: { "app.toast": ({ text }) => console.info(String(text)) },
  sources: { weather: (_source, emit) => emit({ summary: `Sunny, 21 °C` }) },
})

vapp.open(`hello`) // applyTemplate: the first template onto surface "hello"
// Paint it: <HostSurface host={vapp.host} surfaceId="hello" theme="neutral" />