EX examples & cookbook
A governed example set that exercises every subsystem live, and a fluency cookbook of focused recipes — each one a real, compiled.aihu component.
This counter is the real aihu-counter recipe, compiled at build and hydrated as an island — fully interactive right here. In-browser recompilation (the WASM playground) is the next phase.
todo-mvcbuildhacker-newscompile+smokelayoutsbuildstorefrontcompile+smokerealtime-scorescompile+smokecss-engine-utilitybuildagent-driven-democompile+smokessg-sitebuildagent-hubcompile+smokeAgent-surface async fetch — prop city and action fetchForecast carry expose/describe so MCP agents can read and invoke them.
Accordion — each/key over prop-provided items, show toggles the open panel, aria-expanded tracks state.
Real-time clock — onMount starts the interval, onDispose clears it; tick runs through an action.
controller() intrinsic — a ResizeObserver reactive controller with hostConnected/hostDisconnected lifecycle, writes routed through an action.
Minimal reactive counter — prop-backed count with increment/decrement/reset actions.
Modal dialog — aria() declares role/aria-modal on the host, show toggles visibility, Escape and backdrop click dismiss.
Tabs — derived() computes the selected tab, each/key renders the tablist, onMount picks the initial tab.
Toast — auto-dismiss via onMount setTimeout, manual dismiss action, aria-live polite status region.
Form-associated element — aria() maps role/label/describedby, form() exposes value and validity to the surrounding form.
consume() intrinsic — reads the 'theme' token provided by an ancestor context-provider.
provide() intrinsic — exposes a theme token to descendant consumers over the context prototype chain.
Sortable data table — derived() sorts a copy of the prop rows, each/key renders rows, click headers to toggle direction.
resource() intrinsic — async fetch with loading/error/value states rendered through an if/elseif/else chain.
Live validation — form() exposes value/validity, derived() computes the error message, touched gates when errors show.
<guard> element — scope-gated UI that renders its children only when the 'admin' scope is verified.
Infinite scroll — controller() wires an IntersectionObserver sentinel that calls the loadMore action; each/key/empty renders the list.
Debounced search — bind:value feeds the query, effect() debounces 300ms into a second state, derived() filters results.
SSR-safe bootstrapping — props render placeholders on the server; onMount reads server-stamped dataset values after hydration.
Tailwind utilities in the template coexisting with a scoped @style block for component-specific rules.
Theme switcher — state-backed theme is provided to descendants and mirrored onto documentElement by an effect.