Components and hooks

JSX works as in React, with a few points worth knowing:

Write class (className also works). Handlers are React-named native events: onClick, onInput, onChange, onKeyUp, onPointerDown and so on. event.currentTarget is the element the handler is on.
Interpolated text is escaped. dangerouslySetInnerHTML={{ __html }} sets markup: only pass markup you wrote, never page or generated text.
Give list items a key. A field with value={…} and onInput is controlled.
Take everything from the global: const { Toolbar, Action, Icon, useState, Readout } = Bundleware;.

React's hooks follow React's rules: useState, useReducer, useEffect, useLayoutEffect, useRef, useMemo and useCallback. The toolbar hooks:

Hook	Returns
`useToolbar()`	This mount's context: timers, listeners, windows, popups, page and local AI.
`useStore(store)`	`[value, setValue]` for a store, like `useState` shared by the toolbar, its widgets and windows.
`usePage({ maxLength? })`	The page `{ url, title, text, selection }`, re-rendering after changes.
`useActivity()`, `useAiSite()`	The activity list and AI-site snapshot, re-rendering after changes.
`useSpeech()`	`{ speaking, available, speak(text, options?), stop() }`; see speech.
`useSound({ onEnd? })`, `useLevels(count?, options?)`	A deck of the toolbar's music and the levels of its sound; see sound.
`useGenerate()`	`{ run(request), cancel(), busy, result, error, cancelled }`; see local AI.
`useRoot()`	The element a widget or window renders into. Rarely needed, for example to find the band with `useRoot().closest('.bundle-bar')`.

Two components cover common shapes inside widgets:

<Readout label="Summary:" value={text} onClick={…} /> is a sunken label/value display; with onClick it is a button. class and valueClass add classes.
<Icon name={Icon.Search} /> draws one of Bundleware.icons.

Effects and cleanup. Anything created through the context or the toolbar hooks ends with the mount, so most components need no cleanup at all. Effect cleanups run when a component unmounts too, but a useEffect cleanup can run a moment later; use useLayoutEffect when something must stop before the mount finishes ending, such as removing an attribute you set on the band.