provide() intrinsic — exposes a theme token to descendant consumers over the context prototype chain.
stateprovideactionslotinterpolationThis recipe doesn't have a hydrated island in the demo gallery yet. An in-browser, WASM-compiled playground (edit this source and re-render live) is planned as a follow-up — read the real source below.
// context-provider — provide(): exposes a theme token to descendants
// Pairs with context-consumer.aihu, which consumes 'theme' and renders it.
@state {
let theme = state('light')
provide('theme', theme)
const setTheme = action((t: string) => { theme = t })
}
@template {
<div class="provider" data-theme="light">
<div class="controls">
<span class="label">Providing theme: <strong>{theme}</strong></span>
</div>
<div class="slot-area">
<slot />
</div>
</div>
}
@style {
.provider { padding: 1rem; border: 2px solid var(--border, #ccc); border-radius: 6px; }
.controls { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; }
.label { font-size: 0.9rem; color: var(--muted, #666); }
.slot-area { padding-top: 0.5rem; border-top: 1px solid var(--border, #eee); }
}state