CB cookbook
Each recipe is one focused, real, compiled .aihu component — a single construct done right. Open any card for its source, its governed surface, and a live in-browser Run.
Agent-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.